Cara Menambahkan Retated Post dengan Thumbnail Bergerak

Related post atau artikel terkait dapat memudahkan pembaca untuk mencari topik yang berkaitan. Menampilkan related post dengan gambar dan cuplikan terbuki ampuh untuk meningkatkan ratio pageviews pada blog sobat dan yang pasti membuat pengunjung betah. Nah kali ini saya ingin membahas cara membuat related post yang lebih menarik yaitu dengan menambahkan thumbnail atau gambar didalamnya. Agar lebih jelas perhatikan gambar dibawah ini.

Membuat Artikel Terkait atau Related Post Dengan Thumbnail Bergerak Di Bawah Postingan sebenarnya cukup mudah. Kenapa demikian? Karena Sobat hanya tinggal mengcopy kode-kodenya dan mengikuti petunjuknya. Kali ini kita akan sedikit mengobok-obok kode HTML template blog. Namun alangkah baiknya sebelumnya Sobat back up dulu template blognya untuk menjaga hal-hal yang tidak diinginkan, sehingga bilamana terjadi kesalahan bisa dikembalikan ke template semula.

Bagi Sobat yang tertarik untuk memasangnya dan ingin lanjut, silakan ikuti langkah-langkah berikut:

1. Seperti biasa silahkan Login ke blog >> Dashboard >> Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates (untuk tampilan dasbor blog yang baru sudah berubah).
2. Kemudian cari kode </head>, agar lebih mudah dalam pencarian, tekan CTRL + F di keyboard kemudian masukan kode tadi. Setelah ketemu silahkan copy kode di bawah ini dan paste SEBELUM kode tadi.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='https://bfcsarif.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

3. Kemudian cari kode seperti berikut :
<div class='post-footer-line post-footer-line-1'>

4. Lalu copy kode di bawah ini dan paste SETELAH salah satu kode di atas yang sobat temukan.

<!-- Marquee Kompiajaib Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Baca Juga Artikel Terkait Lainnya :</b></h3>
<div style='background:#777676; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=13;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://sarifpbg.blogspot.com/2012/12/cara-membuat-related-post-bergambar-di.html' target='_blank'>widget</a></div>
</div>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Kompiajaib Related Posts with Thumbnails Code End-->

Perhatikan tulisan "Baca Juga Artikel Terkait Lainnya :" bisa Sobat ganti dengan kalimat yang Sobat kehendaki.

#777676 untuk warna background kotaknya.
Dan angka 13 untuk menunjukan jumlah related post yang ditampilkan.

Silahkan lakukan preview untuk memastikan widgetnya berjalan atau tidak, setelah itu silahkan simpan templatenya kemudian lihat hasilnya....menarik bukan... hehehe 

Bagi Sobat yang merasa cara diatas terlalu sulit, Sobat bisa menggunakan widget related post dengan thumbnail yang disediakan oleh linkwithin.com. Untuk cara pemasangannya sangat mudah, berikut langkah-langkahnya:

1.    Buka situs http://www.linkwithin.com/
2.    Isi data-data yang diperlukan pada form yang telah disediakan
3.    Beri centang pada kotak kecil jika Sobat menggunakan background template yang gelap
4.    Klik Get Widget
5.    Copy dan paste kode script yang diberikan diatas kode </body> pada template blog Sobat lalu simpan template Sobat. Selesai….

Jika ada yang kurang jelas atau mengalami kendala dalam memasang related post dengan thumbnail silahkan tinggalkan komentar Sobat dibawah ini. Saya akan berusaha untuk membantu Sobat.

Demikian informasi mengenai Cara Menambahkan Retated Post dengan Thumbnail Bergerak. Selamat mencoba dan semoga bermanfaat…

Ditulis Oleh : Unknown | Pustaka IPTEKKES

Anda sedang membaca artikel tentang Cara Menambahkan Retated Post dengan Thumbnail Bergerak. Anda dapat menyebarluaskan Informasi Terbaru dari Pustaka IPTEKKES tersebut agar dapat memberikan manfaat untuk kita semua, namun jangan lupa menyertakan alamat link dibawah ini sebagai sumbernya : http://widanarta.blogspot.com/ atau tekan Ctrl + D untuk Bookmark Homepage kami. Atau Copy Paste kan kode berikut pada postingan anda : <a href="http://widanarta.blogspot.com/2013/05/cara-menambahkan-retated-post-dengan_24.html" target="_blank">Cara Menambahkan Retated Post dengan Thumbnail Bergerak</a>

Jika ada kendala atau ada yang ingin ditanyakan tentang artikel diatas, masukan komentar anda dibawah. Bisa jadi salah tulis, atau ada yang kurang dari tulisan tersebut. Kami hanya menerima komentar yang membangun.

Terimakasih atas kunjungannya. Assalamu 'alaikum Warahmatullah.