Cara Membuat Artikel Terkait dengan Gambar / Thumbnail

AB | Tips 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.

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/AVvXsEgug1QvGa3XgBJTxF1Hj_WR_tPdNZO9TLKx4k9lMojxpQyjYNWoYI2xztopKSl-MPIwMAvCEWWrVZqe0g1xw9O83kB4caMCquryOWtIZdNM6dqRdwuHdXVZjVxRzvDIJcmDNfKFPh-lrAo/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>

Tulisan Cara Membuat Artikel Terkait dengan Gambar / Thumbnail AB pelajari dari Bamz.us dan sudah dicoba (lihat hasilnya dibawah postingan ini). Semoga Tulisan Cara Membuat Artikel Terkait dengan Gambar / Thumbnail bisa bermanfaat. Salam Blogger. Kumpulan Adsen Blogspot.

UPDATE :
Berhubung karena Googlecode telah mem-banned kode: http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js, dan ditambah file duplikat saya hilang, maka tutorial di atas sudah tidak layak pakai lagi. Silahkan KLIK DISINI, saya sudah buat yang baru disana. Mohon maaf yang sebesar-besarnya.