Cara Membuat dan Memasang Widget Related Post Tumbnail di Blog

Posting terkait atau yang lebih akrab disebut dengan artikel terkait mempunyai peran yang sangat penting bagi jumlah pageview blog (Baca: Cara Meningkatkan Pageview Blog dengan Mudah). Hal itu dikarenakan dengan memasang related post diakhir postingan, akan menarik minat baca para visitor kita. Apalagi bila tampilan artikel terkait berbentuk gambar (tumbnail), tentu visitor akan semakin penasaran ingin membacanya lebih lanjut. Oleh karena itu eksistensi widget posting terkait menjadi sangat penting bagi kemajuan suatu blog.

Pada beberapa waktu yang lalu, saya sudah memposting tata Cara Membuat Artikel Terkait Tanpa Tumbnail yang mana widget tersebut berupa judul-judul artikel saja disetiap akhir postingan, dalam kesempatan kali ini saya ingin membahas tentang tata Cara Membuat dan Memasang Widget Related Post Tumbnail di Blog. Hal tersebut dimaksudkan agar anda tidak membuat Artikel Terkait secara manual di blog. Dengan menerapkan cara yang saya berikan ini, posting terkait akan muncul dengan sendirinya (otomatis) disetiap akhir postingan. Berikut langkah-langkahnya.

Cara Membuat dan Memasang Widget Related Post Tumbnail di Blog

1. Silahkan anda Log In ke blog anda masing-masing dengan menggunakan username dan pasword anda. Setelah itu, pilih menu tab Template, kemudian pilih Edit HTML.

2. Setelah masuk ke Edit HTML, silahkan anda cari kode </head>. Untuk mencari kode tersebut, silahkan Klik Control F pada keybord komputer anda, nanti akan muncul Kotak Pencarian di Pojok Kanan Atas. Silahkan masukkan kode </head> pada kotak pencarian, dan kemudian Klik Enter.

3. Setelah kode </head> sudah anda temukan, silahkan letakkan Kode Berikut ini tepat diatas kode </head>.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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, Times New Roman , 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/AVvXsEjOpugJv9UWcgpr0VYH66Ug8oFIswM3KjGBCQ05HEkOM7KsTgMmAKdEArv1FlEu_QSTQAOKQfMYXNsas9Gj_SopoZ1X8Po-q37w7NB4lgKyE4cAKNi24POD_pYNpJRKqADZsfk59juCndU/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.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-->

Keterangan:

var maxresults=5 adalah jumlah artikel yang ditampilkan dalam posting terkait

var relatedpoststitle="Related Posts" adalah tampilan tulisan artikel terkait

4. Untuk selanjutnya, silahkan anda cari kode <data:post.body/>. Biasanya jumlah kode <data:post.body/> itu lebih dari satu. Silahkan pilih kode yang kedua atau yang ketiga. Setelah ketemu, silahkan Letakkan Kode Berikut ini tepat dibawah kode <data:post.body/>.

<!-- 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>
<!-- Related Posts with Thumbnails Code End-->

5. Setelah itu, Klik Save dan lihat hasilnya. Apabila sudah berhasil, hasilnya akan terlihat seperti gambar dibawah ini.

Demikian panduan tentang bagaimana Cara Membuat dan Memasang Widget Related Post Tumbnail di Blog. Apabila ada kekeliruan dalam tata tulis maupun substansi, saya mohon maaf yang sebesar-besarnya. Atas atensinya saya sampaikan ucapan terimakasih. Salam. Jangan lewatkan posting menarik lainnya di Ririn's Blog tentang Cara Memasang Iklan di Bawah Judul Postingan Blog.

Share artikel ke: Facebook Twitter Google+ Linkedin Technorati Digg