How To Add Related Posts Widget To Blogger With Thumbnails

Related posts widget is a great widget to increase your post-views.You can add related posts just below of the every blog post.It also shows thumbnails to attract the users.This widget was designed by bloggerplugins. I customize this widget and brought to you.If you like this then surely add it on your blog.... 

How To Add It On Blogger
1. Go To Blogger Dashboard >Template >Edit HTML.
* Please! download  a copy of your template

2. Check the 'Expand widgets template' check box;

3. Now Search (CTRL + F) for this code: </head>

4. Paste the below code just above: </head>

<!--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: 18PX;

LETTER-SPACING: 2PX;

FONT-WEIGHT: BOLD;

TEXT-TRANSFORM: NONE;

COLOR: #5D5D5D;

FONT-FAMILY: ARIAL NARROW;

MARGIN-BOTTOM: 0.75EM;

MARGIN-TOP: 0EM;

PADDING-TOP: 0EM;

}

#RELATED-POSTS A{

BORDER-RIGHT: 1PX DOTTED #DDDDDD;

COLOR:#5D5D5D;

}

#RELATED-POSTS A:HOVER{

COLOR:BLACK;

BACKGROUND-COLOR:#EDEDEF;

}

</STYLE>

<SCRIPT TYPE='TEXT/JAVASCRIPT'>

VAR DEFAULTNOIMAGE=&QUOT;HTTP://3.BP.BLOGSPOT.COM/-PPJFSSTYSZ0/

UF91FE7RXFI/AAAAAAAACL8/092MMUHSFQ0/S1600/NO_IMAGE.JPG

&QUOT;;

VAR MAXRESULTS=5;

VAR SPLITTERCOLOR=&QUOT;#DDDDDD&QUOT;;

VAR RELATEDPOSTSTITLE=&QUOT;RELATED POSTS&QUOT;;

</SCRIPT>

<SCRIPT SRC='HTTPS://DOCS.GOOGLE.COM/FILE/D/

0B7Q3JXFQN9Y2SLNOWS1BMUTRUGM/EDIT' TYPE='TEXT/JAVASCRIPT'/>

<!-- REMOVE --></B:IF>

<!--RELATED POSTS WITH THUMBNAILS SCRIPTS AND STYLES END-->

Note:

- to change the default picture, replace the URL in pink with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in blue if you want the related posts to be displayed in homepage too
5. Now Search the following code:

<div class='post-footer'>

6. just above it, copy and paste the below code:

<!-- 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://bloggers-hero.blogspot.com/'><img alt='Blogger Tips and Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicDHmeJXKLvUD4JdwvnRxRYYPp4Z_xJcIPFT_X3mHKDuRbO_PhO1ipuzuEp0XKzBnXeNwGKhYDrc-otlXi4KEr4ja92DW4XCWMZsa4w4-HaStmbzUOfaCavGPfL1vIrP_ure02bgGro1NQ/s1600/best+blogger+tips.png'/></a>

</b:if></b:if>

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

Note:
- change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in blue.
7. Save the template.That's it :)

Share this

Share on FacebookPlus on Google+