Top & Unique Cara Membuat Artikel Terkait (Related Post) Dengan Thumbnail

Artikel Terkait atau related post sangatlah penting dalam sebuah blog yang sangat mengutamakan SEO. Karena dengan adanya artikel terkait, pengunjung tidak akan bosan membaca artikel blog kita. Sehingga Bounce Rate akan semakin kecil.

Dan kali ini aku akan share bagaimana cara membuat artikel terkait dengan gambar, Berikut eksklusif saja kita simak tolong-menolong :)

Screenshoot :

Cara Membuat Artikel Terkait dengan Gambar :

1. Login Blogger
2. Masuk Menu Template - Edit HTML - Lanjutkan
3. Centang pada Expand Template Widget
4. Cari isyarat </head> Gunakan tombol CTRL + F untuk mempermudah pencarian.
5. Lalu Copy isyarat berikut dan letakan sempurna diatas isyarat </head>

<!--Start Related Posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:90%;
min-height:90%;
padding-top:0px;
padding-left:8px;
}
#related-posts h2{
font-size: 1.0em;
font-weight: bold;
color: white;
font-family: Rockwell,Georgia,Serif;
margin-bottom: 0.8em;
margin-top:0em;
padding-bottom:0em;
}
#related-posts a{
color:white;
}
#related-posts a:hover{
color:white;
}
#related-posts a:hover {
background-color:#080;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2jMQX8dD5FgAJ3ZAmZTehoNEBJkc9tE5GIeFrg4ccNDwcDzIxD6K43nkwhYNBSKGC0J_Qi43voNegttT0ey-6qup4dXo54xUm9LLnYVgq26Fk62BqkZ2Q5xvrG3FhXx6v2Ygg-uY5LPP2/s1600/No+Image.jpg&quot;;
var maxresults=6;
var splittercolor=&quot;#000000&quot;;
var relatedpoststitle=&quot;Silahkan Baca Ini Juga:&quot;;
</script>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>
<!--End Related Post-->

    6. Selanjutnya cari isyarat berikut ( Jika ada dua kode, pilih bab yang kedua ) :

<data:post.body/>

 
    7. Kalau isyarat diatas sudah ketemu, Sekarang copy'lah script berikut :

<!-- Start Related Posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<!-- End Related Posts-->

    8. Paste'kan isyarat script diatas sempurna dibawah isyarat :

<data:post.body/>

 
    9. Jika sudah, klik Simpan Template.

Catatan :
Berikut ini yaitu isyarat yang mampu teman ganti sebelum menyimpan template, gantilah goresan pena berwarna merah sesuai impian sobat.

• Menampilkan jumlah artikel terkait yang muncul max-results=7
• Judul artikel terkait var relatedpoststitle=&quot;Silahkan Baca Ini Juga:&quot;;
• Warna Tulisan var splittercolor=&quot;#000000&quot;;

Ok, Sekian saja postingan aku kali ini tentang Cara Membuat Artikel Terkait dengan Gambar.

 

Semoga bermanfaat.