Membuat Related Post Seperti LinkWithin Dengan Thumbnails

Kepolover - Halo sobat Kepolover, kali ini admin akan memposting sebuah cara yang cukup menarik untuk mempercantik tampilan blog kita. Cara itu adalah dengan menaruh sebuah widget related post yang sebetulnya sudah pernah saya bahas pada postingan Cara Membuat Related Post Keren Dibawah Postingan, namun yang berbeda disini adalah tampilannya yang disertai thumbnails yang elegan dipandang. Widget ini dari sisi tampilannya sangat mirip dengan widget LinkWithin yang banyak dipakai oleh para blogger. Bedanya, kita disini menggunakan widget yang telah dibuat oleh Aneesh dimana ia telah berbaik hati dengan sharing kode script related post hasil kresinya tersebut di bloggerpluggin.org. Kelebihan related post ini dengan widget link within menurut saya adalah tidak adanya backlink dari si-pembuatnya sehingga terkesan lebih professional apabila nantinya dipasang pada blog kita. Lihat Gambar..

Suatu keuntungan bagi kita apabila memasang related post pada blog adalah dapat menambah page views yang dilakukan visitor pada sehingga dapat memperbesar kemungkinan klik Adsense yang terjadi. Oke, biar lebih jelasnya langsungsung saja kita praktik Membuat Related Post Seperti Link Within Dengan Thumbnails:

1. Pertama, masuk ke akun Blogger, buka Template > Edit HTML dan centang "Expand Widget Templates"
2. Cari kode </head> dengan CTRL+F
3. Ganti tersebut dengan kode berikut

<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/AVvXsEh_oM5GeGbwvwIwB54ivdvx9I-UbrzN85yWr53NmjbVrNV4hGrI0gbfPuPjiPiHHQhLn9ONhsdD38M221jT08Bs6x2MSsv2jwY_fDjzy6UFuC9eP5rlShQwNKJVmJEHTjpdmH7UwnyTZHA/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>

</head>

4. lalu cari kode ini..

5. Bila nggak ketemu maka cari kode ini.

6. Apabila salah satu kode diatas ketemu maka tingga copas kode berikut tepat dibawahnya.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>

7. Klik SAVE
8. Untuk mengatur jumlah kotak yang ditampilkan kita ubah value dari kode berikut.

var maxresults=5;

9. Untuk mengubah jumlah post yang ditampilkan tiap label kita harus mengubah kode berikut.

max-results=6

10. Untuk mengubah title "Related Post" maka editlah kode berikut.

var relatedpoststitle="Related Posts";

11. Untuk mengubah warna splitter/pembatas ubahlah kode berikut.

var splittercolor="#d4eaf2";

12. Untuk mengganti tampilan gambar kosong bisa mengubah URL dari kode berikut.

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_oM5GeGbwvwIwB54ivdvx9I-UbrzN85yWr53NmjbVrNV4hGrI0gbfPuPjiPiHHQhLn9ONhsdD38M221jT08Bs6x2MSsv2jwY_fDjzy6UFuC9eP5rlShQwNKJVmJEHTjpdmH7UwnyTZHA/s400/noimage.png";

Selesai, selamat mencoba..