Cara Membuat Artikel Terkait dengan Gambar / Thumbnail

Artikel terkait atau related post atau mungkin artikel yang berhubungan, atau sejenisnya sangat penting sekali. Kenapa demikian, visitor akan dimudahkan untuk mengelilingi (surfing) blog anda. Membuat Artikel Terkait dengan Gambar / Thumbnail ini merupakan salah satu tips untuk menaikkan page view pada blog.

Cara Membuat Artikel Terkait dengan Gambar / Thumbnail
Langkah-langnya sebagai berikut:
1. Seperti biasa, Anda harus login ke Blog
2. Pilihlah Rancangan / Design pada Blog Anda
3. Pilih Edit HTML dan jangan lupa Centang expand widget templates.
4. Cari kode </head> (gunakan Ctrl + F untuk memudahkan pencarian) dan kalau sudah ketemu silahkan Copy kode script di bawah ini dan Paste tepat di atas kode </head>

<!--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%;
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: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn8O-hifXqQAuwygFLf5LQA-rmCL2MBeFmoxPbfwY8XjmyAVM9PruWOzFFKFyDrbXDPuVyfXfIHVuMGP3sITIJg4AcipcvmCxhfR7kKIJZNTpV-FyqMJMZxgAmBSO2LqeSUTJjY4ygGmI/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Selanjutnya carilah kode dibawah ini

<div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>

Nah kalau sudah ketemu, sekarang Copy lah Script / kode berikut. 

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

6.Paste lah kode script tepat di bawah <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>

7. Kalau sudah selesai jangan lupa klik save template dan selesai. Lihat Hasilnya seperti apa.

Catatan:
Berikut ini adalah kode yang bisa anda ganti sebelum menyimpan template (ganti tulisan yang berwarna merah)

Jumlah artikel terkait muncul (pada blog ini Artikel Terkait dengan Gambar / Thumbnail saya bikin 7 karena ukurannya pas banget, hehehe)

var maxresults=5;

Jumlah artikel terkait / label

max-results=6

Judul artikel terkait

var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";

Warna tulisan pada artikel yang terkait, silahkan anda ganti sesuai keinginan anda. Cari Kode Warna

var splittercolor="#d4eaf2";

Artikel Terkait dengan Gambar / Thumbnail ini hanya muncul pada halaman posting, jika anda ingin Artikel Terkait dengan Gambar / Thumbnail ini muncul di semua halaman blog, anda bisa menghapus kode

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> dan
<!-- remove --></b:if>