Related Post With Thumbnails Untuk Blogger

Fungsi ini dapat membantu meningkatkan kadar page view per user..Pengunjung blog akan tertarik dan terdorong untuk 'Klik" pada post yang berkaitan kalau dihias dengan Thumbnail yang menarik.. Bila aku pergi blog lain pon selalu klik ape yang ade dekat situ.. Lagipun fungsi ni lebih bagus daripada widget LinkWithin.. Kalau guna widget LinkWithin, macam serabut gitu la bagi aku, nampak tak kemas.. Kalau guna cara ni baru nampak kemas..

1- Log in - Dashborad - Template - Edit Html
2- Kemudian Cari

</head>

3- Copy kod di bawah dan paste di atas kod yang korang cari tadi.

<!--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: #000000;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000000;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielJ2vGEYn4qO8a7V22JzmkmInpoF78xl8zjiDaAPuyIRneJ-7ef-VlqZ_2UQHjM_rngsJjxI8Nf7h8OWdENiTKWnvtSE9tZswsOsQgPf86TowbxlxW3IRZRufiv8Xh9fDi-JNbnJNoY0/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'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Selepas itu, cari pula kod di bawah

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

Kalau korang tak jumpa, korang cari kod di bawah ni pula

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

tak jumpa juga? Kalau gitu cari kod ni pula..

<data:post.body>

5- Dah jumpa kod tu? Ok, step seterusnya, korang copy kod di bawah dan paste di bawah mana-mana kod (yang korang jumpa) tadi..

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

6- Tukarkan nilai pada var maxresults=5; untuk mengubah jumlah post berkaitan yang korang nak letak..Kod ni Boleh didapati dalam Step No 3.

7- Tukarkan Related Posts Untuk mangubah tajuk widget, var relatedpoststitle="Related Posts";

8- Untuk menetapkan gambar default sekiranya post korang tidak mempunyai gambar, boleh ubah line ini..

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielJ2vGEYn4qO8a7V22JzmkmInpoF78xl8zjiDaAPuyIRneJ-7ef-VlqZ_2UQHjM_rngsJjxI8Nf7h8OWdENiTKWnvtSE9tZswsOsQgPf86TowbxlxW3IRZRufiv8Xh9fDi-JNbnJNoY0/s400/noimage.png";

9- Untuk ubah warna cari kod yang ada "Color" dan tukarkan kod warna (cth: #000000) kepada kod warna yang korang nak..