Cara Membuat Artikel Terkait dengan Gambar / Thumbnail

Artikel terkait atau related post atau mungkin artikel yang berhubungan, atau sejenisnya sangat penting sekali. Kenapa demikian, karena 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.

Kali ini Kumpulan Adsen Blogspot (AB) akan sharing cara membuat artikel terkait dengan thumbnail. Sebelum postingan ini, AB sebelumnya sudah posting Cara Membuat Artikel Terkait di Blogspot Tanpa Tuhmbnail dan Cara Membuat Related Post dengan LinkWithin. Ada 2 cara membuat artikel terkait dengan thubnail atau gambar, yang pertama menggunakan layanan online seperti linkwithin dll. Sedangkan yang ke 2 yaitu membuat artikel terkait dengan thumbnail secara manual seperti postingan sekarang. Disini AB akan sharing cara membuat artikel terkait dengan gambar secara manual (Cara Membuat Artikel Terkait dengan Gambar / Thumbnail).

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/AVvXsEh26E_S9ph4RBAOvU_557hK17Vz-hWzUesEfquZX8ltvO_lVOpXTu3KhldIoqlWw1ejJ2gszQPqbAN_JIoqHdxVquw1LHQsR7p-jdU1fx3jCCkexl6WTLMoHC8zqP3UTFeSh_geKF_S3mE/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 AB 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>

sumber