Hello Readers, in this article we will see how you can add a customized Related post Widget in your blogger blog. Related post Widget is very important for any website and if widget is related animation then it always gives a very good impression to any blog and also your visitor like to play it and they also also want to see it many times but as we know about it, animated widget is hard to implement via html but we have a new and very fresh widget with animation.
Displaying related posts is a smart way for
keeping your site visitors around and with thumbnails it is even smarter!This
widgets is one of most popular way to increase to show related post to
blogger.After you will add this widget it will start above comment section.The
related articles are chosen from other posts in that same
category/label/tag.Related post widget help you to show visitor your past and
previous stories.It also help to increase page and make readers engaged on
reading your blog post.
FEATURES
·
Responsive Design
·
Fast Loading And SEO Friendly.
·
Shows Post of same
category/label/tag.
·
Blog Post Title with Thumbnail.
·
Easy to Install.
Steps adding the
Related Posts Widget to Blogger/Blogspot
Step 2. Check the "Expand widgets template"
box;
Step 3. Search (CTRL + F) for this piece of code:
</head>
Step 4. Copy and paste the below code just before/above </head>
<!--Related Posts with thumbnails Scripts and Styles Start by
www.the-geek-guru.blogspot.com-->
<!-- remove --><b:if cond='data:blog.pageType ==
"item"'>
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2zo2zcnpPJlbI_aDcgiCREwXKsYTyfGhnqwTnkIOC_KHLtD8TcVxlYlky65gU24__L60QwAgCPEAx0f98rGyEjUw0kn5Z7csGmzHs6t716bRZ-X4OyhFTMaa7Gu5TcwhSS9LY94SeHCQx/s1600/no_image.jpg";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</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
Step 5. Now find the following code: ( Skip 1st found - code
will be paste after 2nd search )
<div class='post-footer'>
Step 6. And just above it, copy
and paste the below code:
<!-- Related Posts with Thumbnails
Code Start-->
<!-- remove --><b:if cond='data:blog.pageType ==
"item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" +
data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"'
type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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://helplogger.blogspot.com'><img alt='Blogger Tricks'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpD0yqZY7N_vCcCL-djjRnAWvwvoPBgZMCpAOAZLIF3j9Y7lj4LJpBl8b6bAuGNmBlgl6-zr8DUgaUNAY-Qy9olg42Ob3Jg9xl7n69PwvrVS7IsiQdEdiLfZFAqewboj7DpHXAip0sjzyp/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End by www.the-geek-guru.blogspot.com-->
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 violet.
Save your Widget.
You have customized the Related post widget in your blogger blog and given it a new look. You can make more adjustments in the CSS style rules according to your blog. If you need any help or have any doubt you can comment here. You can also suggest improvements so that we can create more user friendly widgets.
If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumbleupon or giving us a link back via the links below. Stay tuned for more updates.
Posts
