Membuat Artikel Terkait Dengan Thumbnail

Membuat Artikel Terkait 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. 



Membuat Artikel Terkait Dengan Thumbnail - Artikel Terkait atau related post

Screenshoot :

Cara Membuat Artikel Terkait dengan Gambar :

• Login Blogger
• Masuk Menu Template - Edit HTML - Lanjutkan
• Centang pada Expand Template Widget
• Cari kode </head> Gunakan tombol CTRL + F untuk mempermudah pencarian.
• Lalu Copy kode berikut dan letakan tepat diatas kode </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/AVvXsEjKKQ5cJWoJsxaTwQkbwA-V0uoe5ucQM-eUmVm75AQHPdJPhZ20ncHdIA_BieIbVUT145CkSuVM2X_TEYJGg87ZnAnMdMKiUbTdqfJ5iYr0YfMeKiVZXEsvbzBL0KcTqfW5jjlfazQ0d5Bd/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-->

• Selanjutnya cari kode berikut ( Jika ada dua kode, pilih bagian yang kedua ) : <data:post.body/>
• Letakkan kode script berikut tepat dibawah kode : <data:post.body/>

<!-- 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-->

• Simpan dan lihat hasilnya dengan cara membuka salah satu artikel pada blog anda.

Catatan :

Berikut ini adalah kode yang bisa sobat ganti sebelum menyimpan template, gantilah tulisan berwarna merah sesuai keinginan 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;;