Cara membuat artikel terkait dengan thumnail

Cara membuat artikel terkait dengan thumnail - Artikel terkait atau related post dalam dalam postingan sangatlah penting, karena dengan adanya artikel terkait (related post) kita bisa menunjukkan kepada pembaca untuk membaca artikel-artikel yang berhubungan dengan posting yang dibacanya, dan jika si pembaca tertarik maka si pembaca tersebut bisa berlama-lama di blog kita.

Berikut cara memasang artikel terkait dengan thumbnail.

1. Masuk ke akun Blogger Anda.

2. Klik Download Template Lengkap, untuk berjaga-jaga kalau nanti terjadi kesalahan dalam mengedit template.

4. Klik tab Edit HTML

5.Cari kode </head> Bila Anda menggunakan browser Mozilla Firefox, tekan tombol Ctrl +  F, lalu isikan kode yang dimaksud untuk memudahkan pencarian.

6. Copy kode berikut dan paste di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove -->
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:2px;
}

#related-posts h2{
text-align:center;margin:0
;height:25px;padding:5px 0px 0px;line-height:1.5em
;font:normal bold 100%&#39;Trebuchet MS&#39;,Verdana,Arial,Sans-serif;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJokxWZrAiLrqeOVJoZg3PE2SrmJR1iyIIn5CqfDs6JQtd3yPXfHNzHxhfnaDr-WRhKI6TXfVGqzsM8lvXBe2P_d12BC3xyNBa2wcBzwWbI_o6tXX-1U-sAeA4Qb9slDjpEcqUolnoroA/s320/pelangi1.jpg) repeat-x;color:#FFFFFF;
}
#related-posts a{
color:#FF8000;
}
#related-posts a:hover{
color:red;
text-decoration:underline
}

#related-posts a:hover {
background-color:#484B52;
}

</style>

<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2r4FASUacHpmUzvgFYbg2L47qNctFGXB_y5KM5lNryiQADpqLDBEZXqKXoU3Wku_rmeQ9ys9tvS-rRT2d7G4H-vpEd0Aoh5C_odFUwiQhxoq3sE46TdiXJsg_Z31d159XaUi7FMSfFWI0/s1600/Nonami_Takizawa_.jpg&quot;;
var maxresults=6;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artikel Terkait&quot;;
</script>
<script src='https://andiknet-code.googlecode.com/svn/file/relatedpostthumbnailandiknet.js' type='text/javascript'/>
<!-- remove -->
<!--Related Posts with thumbnails Scripts and Styles End-->

   6. Cari code <data:post.body/>
   7. Copy kode berikut dan paste bawah kode <data:post.body/> 

<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>

8. Simpan.

untuk code <data:post.body/> biasanya lebih dari satu, coba anda pilih yang terakhir atau paling bawah.

dan jika themplate anda ada tombol share facebook, twitter dll

anda tinggal meletakkan dibawah tombol share jejaring social yang ada di themplate anda,,

Keterangan:

• Anda dapat mengubah jumlah artikel terkait yang ingin ditampilkan dengan mengubah kode var maxresults=6;

• Untuk mengubah judul widget, Anda dapat mengedit kode berikut var relatedpoststitle=&quot;Artikel Terkait&quot;

• Bila ingin mengganti default thumbnail, edit kode berikut var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2r4FASUacHpmUzvgFYbg2L47qNctFGXB_y5KM5lNryiQADpqLDBEZXqKXoU3Wku_rmeQ9ys9tvS-rRT2d7G4H-vpEd0Aoh5C_odFUwiQhxoq3sE46TdiXJsg_Z31d159XaUi7FMSfFWI0/s1600/Nonami_Takizawa_.jpg";

• Untuk mengubah warna dari Splitter Line, silakan edit kode var splittercolor=&quot;#d4eaf2&quot;;