Inilah Cara Mudah Menciptakan Artikel Terkait Atau Related Post Yang Bergambar

Cara Membuat Artikel Terkait atau Related Post iyaang Bergambar - Artikel terkait atau biasa diistilahkan dengan Related Posts merupakan kumpulan link terkait dengan tags iyaang ada dalam postingan. Link ini bukan berada di dalam postingan, melainkan di luar postingan. Biasaniyaa terletak di bawah postingan.

Fungsi Related Posts

Fungsi adaniyaa related posts ini sangat jelas, iyaahal tersebut memudahkan pembaca untuk mencari infrormasi terkait iyaang sedang ia cari. Pengunjung haniyaa tinggal klik link iyaang sudah tersedia.

Cara menciptakan related posts sudah baniyaak disuguhkan oleh para master blogger, namun masih sedikit iyaang menjelaskan link related posts iyaang disertai gambar thumbnail. 

Cara Membuat Related Post iyaang Bergambar

Tutorial kali ini akan membagikan trik menciptakan link related posts iyaang bergambar. Berikut tahap-tahapniyaa.

1. Masuk dasboard blogger, pilih template pada sajian dropdown. Klik Edit HTML.

2. Cari kode </head>. Mudahkan dengan Ctrl+F.

3. Setelah ketemu, pastekan isiyaarat berikut sempurna di atas kode </head>.

<b:if cond='data:blog.pageType == "item"'> <style> #related_posts{} #related_posts h4{ border-top:1px solid #333; border-bottom:1px solid #333; color:#333; font-size:14px; letter-spacing:0; line-height:20px; margin:0 0 5px; padding:5px 10px; background:#03C} #relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px} #relpost_img_sum:hover{background:none} #relpost_img_sum ul{list-style-type:none; margin:0; padding:0} #relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none} #relpost_img_sum .news-title{display:block; font-weight:bold !important} #relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333} #relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff} </style> </b:if>

4. Selanjutniyaa masih dalam kotak Edit HTML, cari kode <data:post.body/>.

5. Setelah ketemu, pastekan isiyaarat ini sempurna di bawah kode <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'> <div id='related_posts' style='margin-top:35px;'> <h4 style='color:#ffffff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#6fa8dc;'> Artikel Terkait</h4> <b:loop values='data:post.labels' var='label'> </ul> </div> </b:if>

Warning ! Kode <data:post.body/> lazimniyaa ada beberapa. Pilih salah satu. Atau lebih baik dicoba satu persatu sampai berhasil. Mulailah dengan mencoba kode tersebut dari iyaang paling bawah.

Akhiri dengan Save Template.

Blog sahabat ingin diganti adminniyaa ? Atau mau nambah author ? Sahabat dapat baca ulasanniyaa di Cara Menambah Author dan Admin Baru pada Blog. 

Demikian trik menciptakan artikel terkait atau related posts iyaang bergambar. Semoga bermanfaat dan selamat menikmati percobaanniyaa.