Pages

Friday, March 22, 2013

How To Add Related Posts Widget with Thumbnail To Blogger

Now here is a wonderful Trick for displaying related posts beneath each of your blog posts, along with thumbnails.  With this Trick many of your readers will remain on your site for longer periods of time when they see related posts of interest.
How to add Recent Posts Widget to Blogger  
Go To Blogger Dashboard.

1. Next, go to Template, and click on the Edit HTML button:
2. Check the "Expand Widget Templates" box:
3. Search (using CTRL + F) for the following code :
</head>
4. Copy and paste the below code just before/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='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

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

5. Now find the following code:


    <div class='post-footer'>
6. And 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://pinkusays.blogspot.com'><img alt='Blogger Tricks' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Note:
- change the 6 value from max-results=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 violet.
  


How To Add Related Posts Widget with Thumbnail To Blogger
9out of 10 based on 10 ratings. 9 user reviews.
Posted by: Mayor Botaks Updated at: 11:35 AM

4 comments:

  1. Great post!!

    Earn while you enjoy time with your Family & Loved ones!
    Join us today visit http://www.unemployedpinoys.com

    Unemployed is Brave and a choice to be a Freeman.
    To get a form visit http://www.nheipersonalblog.tk/2014/03/online-work-data-encoder-job.html
    HAPPY WORKING AT HOME :)

    ReplyDelete
  2. Join the finest minds in consumer research. Share your unique opinion and get paid for doing online surveys for money. You can share your opinion and earn per survey by making Money Online Now!

    Earn Per Survey
    Paid Survey Website
    Paid Survey Websites in India
    Survey Websites in India
    Earn Per Survey
    Free Online Surveys
    Free Online Surveys Websites

    ReplyDelete
  3. Great Post.
    Join the finest minds in consumer research. Share your unique opinion and get paid for doing online surveys for money. You can share your opinion and earn per survey by making Money Online Now!

    Online Survey Website
    Free Survey Website
    Survey Websites in Canada
    Survey Websites in India
    Earn Money from Home
    Free Online Surveys

    ReplyDelete