Thursday, 12 February 2015

How To Add Related Posts Widget To Blogger with Thumbnails

How To Add Related Posts Widget To Blogger with Thumbnails
Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest. Today topic is "Add Related Posts Widget For Blogger With Thumbnails".When you add this widget your blog looks beautiful. It helps your readers to go through the similar posts they were reading and so This widget helps to decrease your bounce rate by increasing page views.I hope that you like This.
In this post we will go through the steps of adding the Related Posts Widget with thumbnails for Blogger. Ready to add to your template? Go through the steps by steps  below.Lets sarts:
  1. Go to Blogger Dashboard >Template >Edit HTML
  2. Click anywhere inside the template's code and press the CTRL + F keys
  3. Search for this piece of code by typing it inside the search box (hit Enter to find it)
</head>
   4. Copy and paste the below code just before/above </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='https://harunzoki.googlecode.com/svn/trunk/Related-Posts.js' />
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Note:
  • To change the width and height of thumbnails, modify the 100 px value in red.
  • To change the color and size of related posts titles, change the value in blue.
  • Remove the line violetif you want the related posts to be displayed in homepage too.
   5. Now find the following code (you might find it twice, stop at the second one) 
<div class='post-footer'>
   6. And just above it, copy and paste the below code. 
<!-- Related Posts with Thumbnails Code Start-->
<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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://harunzoki.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 5 value from max-results=5 with the number of posts you want to be displayed.
  • If you want the related posts to be displayed on homepage too, then remove the lines violet.
Update! If you are unable to see the related posts widget after saving the template, add the code (step 5) just above the </b:includable> tag which can be found above this line (CTRL + F to find it)
<b:includable id='postQuickEdit' var='post'>
   7. Save the Template & you are almost done.
Previous Post
Next Post

post written by: