More at BBT

Awesome Working Custom Related Post Thumbnail Widget For Blogger

Socialize It
Related Post Widget was discussed recently and its importance in SEO, I already wrote about easiest way of adding the related post thumbnail widget to blogger , If you use third party related post widgets it would some how increase your page views and increase your ranking in search engines but if you compare it to the widgets that are customized and embeded in your template with some good midifications it will be more effective and significant in achieving good ranking and traffic, 

Wonder how?  If you take some time to notice, You will see that third party "Related post" widget i.e LinkWithin first takes you to a url then immediately redirects you to the post shown as related in the Widget. 

Why it is bad?
It is not that bad after all logically the visitor comes back to your blog immediately, but if you see first the click generated was to another url, In case your blog already has good PageRank then it means it is taking the traffic juice out first then putting it back with less value. 

What to do now?
Now is the time to add a "Related Post Thumbnail Widget" of your own, do some slight customization to your template and you are good to go. Now there will be no redirection involved no juice out and in!

How to do it?
Well in order to learn how to add Related Post Widget with thumbnail into blogger just follow few simple steps below

First of all make a backup of your template just in case if any error or problem occurs later

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML

Step 2. Check the "Expand widgets template" box; 

Step 3. Search (CTRL + F) for </head>

Step 4. Copy and paste the following code just before </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 {
#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;
#related-posts a:hover{
<script type='text/javascript'>
var defaultnoimage=&quot;;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
<script src='' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Step 5. Now find the followingcode <div class='post-footer'> and just above it, place the following 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;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + + &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'>
</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=''><img alt='Blogger Tricks' src=''/></a>
<!-- Related Posts with Thumbnails Code End-->


Change the 6 value from max-results=6 with the number of posts you want to be displayed.
For displaying more than 5 posts, replace 5 value from "var maxresults=5;"

This is it! Now you have this amazing widget on your blog
Hope you like my writing, please share it with your friends and blog about this and waiting for your opinion about this post in comments below :)


Toggle Footer