Cara Mudah Membuat Related Post With Thumbnails

Jika sebelumnya Cara Memasang Recent Post With Thumbnails telah saya posting dan masih dalam Kategori Blog Tutorial kali ini saya akan memberikat tips meningkatkan page view pada blog kita melalui Related Post atau artikel terkait, dengan menambahkan related post pada blog anda setiap pengunjung akan mudah menemukan dan membaca artikel terkait yang berhubungan yang disertai dengan gambar supaya lebih menarik. Proses pemasangannya juga sangat mudah sekali berikut trik cara pemasangannya :

• Silahkan login pada blogger anda
• Pilih Layout pada Dashbord
• Klik Edit HTML dan beri centang pada Expand Widget Template
• Selanjutnya carilah kode seperti ini </head>
• Ganti kode ditas dengan kode yang berada di bawah ini :

<!--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: 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 src='http://blogergadgets.googlecode.com/files/relatedthumbs19.js' type='text/javascript'/>

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

</head>

• Kemudian cari kode dibawah ini lagi :

<p class='post-footer-line post-footer-line-1'> atau yang dibawah ini :

<div class='post-footer-line post-footer-line-1'>

• Setelah menemukannya letakkan kode di bawah ini di atas kode tersebut

<!-- 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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle="Related Posts";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

<!-- Related Posts with Thumbnails Code End-->

Catatan :
Untuk menampilkan jumlah post dapat diedit dengan mengganti angka pada

var maxresults=5;.

Untuk mengganti nama "Related Post" dengan "Artikel Yang Terkait" dapat diganti pada

var relatedpoststitle="Related Posts";

Sumber kode script di ambil dari http://www.bloggerplugins.org