Cara Menciptakan Artikel Terkait Atau Related Post Yang Bergambar

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

Fungsi Related Posts

Fungsi adanya related posts ini sangat jelas, yaitu memudahkan pembaca untuk mencari infrormasi terkait yang sedang ia cari. Pengunjung hanya tinggal klik link yang sudah tersedia.

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

Cara Membuat Related Post yang Bergambar

Tutorial kali ini akan membagikan trik menciptakan link related posts yang bergambar. Berikut tahap-tahapnya.

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

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

3. Setelah ketemu, pastekan instruksi 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. Selanjutnya masih dalam kotak Edit HTML, cari kode <data:post.body/>.

5. Setelah ketemu, pastekan instruksi 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/> biasanya ada beberapa. Pilih salah satu. Atau lebih baik dicoba satu persatu sampai berhasil. Mulailah dengan mencoba kode tersebut dari yang paling bawah.

Akhiri dengan Save Template.

Blog sobat ingin diganti adminnya ? Atau mau nambah author ? Sahabat dapat baca ulasannya di Cara Menambah Author dan Admin Baru pada Blog. 

Demikian trik menciptakan artikel terkait atau related posts yang bergambar. Semoga bermanfaat dan selamat menikmati percobaannya.

Tweet

Subscribe to receive free email updates: