Buat Artikel Terkait Thumb Blog

Kembali sedikit di bahas perbedaan tips untuk postingan sebelumnya untuk Artikel Terkait di Bawah Postingan Blog, memiliki perbedaan yang mana artikel terkait sebelumnya hanya menampilkan teks link postingan blog saja, dan untuk yang sekarang Saya akan coba tambahkan dengan bumbu kode variasi agar tampilan terlihat lebih menarik lagi untuk di lihat dan di pasang. Lihat contoh hasilnya seperti gambr berikut.

Cara Buat Artikel Terkait Thumb Di Blog
Berikut langkah-langkahnya yang harus di perhatikan dan di implementasikan jika Anda tertarik lanjutkan!

1. Masuk Blogger.com
2. Pilih icon "Go to post list" ->> Template
3. Back up template
4. Pilih Edit HTML ->> Proceed ->> Centang "Expand Widget Templates"
5. Tekan Ctrl+F untuk mencari cepat kode </head>
6. Letakkan kode berikut tepat di atas kode tersebut


<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:center;text-transform:none;height:100%; width:auto;min-height:100%;padding-top:5px;padding-left:5px}#related-posts h2{font-size:1.6em;font-weight:bold;color:black;font-family:Georgia,&#8220;Times New Roman&#8221;,Times,serif;margin-bottom:.75em;margin-top:0;padding-top:0}#related-posts a{color:black}#related-posts a:hover{color:black}#related-posts a:hover{background-color:#d4eaf2}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4oyjaYM0KaimMKEs_-ezC42Toz4NR1t0wmg5FMpxKdiYgpQpd1ysZRN57AQ5dtVRC7fLvEuSuFskQ_UrJvRpzA1wwG_-MCs9dSzT5gfoRAhU4IpRzrG-JlXswxrvYLuKyQXfCgoagBA/s72/no-image.png&quot;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artikel Terkait&quot;;
</script>
<script src='http://berbagi-kreativitas.googlecode.com/files/related-posts-thumb.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

7. Berikutnya cari kode <div class="post-footer-line post-footer-line-1"> letakkan kode berikut ini tepat di bawah kode tersebut, atau sesuaikan dengan template blog Anda


<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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=6&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'/>
<!-- remove --></b:if>

8. Pratinjau, jika tidak ada error lanjutkan
9. Simpan template

Keterangan:

Untuk kode yang bercetakkan tebal bisa Anda rubah.
Link gambar:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4oyjaYM0KaimMKEs_-ezC42Toz4NR1t0wmg5FMpxKdiYgpQpd1ysZRN57AQ5dtVRC7fLvEuSuFskQ_UrJvRpzA1wwG_-MCs9dSzT5gfoRAhU4IpRzrG-JlXswxrvYLuKyQXfCgoagBA/s72/no-image.png
adalah gambar thumb jika postingan blog tidak menggunakan gambar, maka gambar tersebut akan muncul pada artikel terkait, lihat gambar yang Saya lingkari.
Untuk Maxresults=7; adalah jumlah artikel yang ingin di tampilkan.
Artikel Terkait: Bisa di ubah menjadi Related post dan lain sebagainya sesuai keinginan.

OK selamat mencoba semoga berhasil, jika ingin ada yang di tanyakan jangan ragu sekian dan Salam.