Related Posts Widget with Thumbnail for Blogger
Free Related Post Widget Bergambar untuk Blogspot
This widget very important that every blog needs. It will increase your blog page view and also your blog rank. So, i do recommend you to put this widget into your blog. This is custom code made by Bloggerplugins.org and no more Linkwithin codes.
Lets begin,
1) Login Blogger > Design > Page Elements > Edit HTML > Expand Widget Templates
2) Press Ctrl+F and find this </head>
3) Replace with the code below.
<!--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/AVvXsEhq-VmO9kMpifJqeOlA9e3_fz2xCFaLYLmEnOk9pA9qyo51KluHZr9FZCxS3dL6yGtmTugn8YS7GeDXgIjyaZX7iNEBYDSuuyyM4PAyrSdkuO9HsCJfIDjtPGoKVx5_Nmhv1HcfKpy6s_s/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-->
</head>
4) Now Press Ctrl+F and find the code below.
<div class='post-footer-line post-footer-line-1'>
or if the code above can't found, just try code below.
<p class='post-footer-line post-footer-line-1'>
5) Now copy code below and paste it after(below) the line.
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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'/>
<!-- 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) Then, SAVE TEMPLATE.
