SHOW RELATED POSTS WITH THUMBNAILS FOR BLOGGER

Related Posts dengan Gambar untuk Blogger/Blogspot - Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views. Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

This is another first release from me. This one also uses the media thumbnails generated by blogger for each post.

For displaying the thumbnails this widget will use the images uploaded for the post using the blogger image uploader(from the post editor)

Related Posts Widget with Thumbnails for Blogger

Here are the detailed installation steps

1.First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and Click on Expand Widget Templates

2.Now look for

</head>

and replace it with

<!--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 h4{

font-size: 1.2em;

font-weight: bold;

color: black;

font-family: Tahoma, arial, Verdana, sans-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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie8N_j4hpyW6etZ_WtH2Fc7oQdxRz1PFIVfDrRRGaJ0MnYkpcPxRiKjIorn-6pSjCVG6VJGqiHKx21gE8UmC_3aywnZJP1pM9eW3ewkRyqOoSTepga_mGbevpJFaFojDFqrURUrqVZrkg/s400/noimage.png&quot;;

var maxresults=5;

var splittercolor=&quot;#d4eaf2&quot;;

var relatedpoststitle=&quot;Related Posts&quot;;

</script>

<script src='http://dns.ocimnews.com/js_xxx/related-posts-with-thumbnails.js' type='text/javascript'/>

<!-- remove --></b:if>

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

3. Now Find

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

If you cant find it then try finding this one

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

Now immediately after any of these lines(whichever you could find) place this code snippet

<!-- 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-->

4.You can adjust the maximum number of related posts being displayed by editing this line in the code.

var maxresults=5;

5.To edit the title of the widget you can change this line of code

var relatedpoststitle="Related Posts";

To change the colors and all you will have to modify the CSS, If you need a demo just check the related post thumbnails here.