How To Add Blogger Related Posts With Thumbnails Widgets
We've shared a lot of useful blogger widgets here on BlogStable.com, and today we're bringing to you another awesome hack on how to add blogger related posts with thumbnails to your blogger blog. This hack display all the related posts with thumbnails (images) below each an every posts of your blog. This related posts with thumbnails select all the related posts according to the labels or category they're tag to.
What Are The Benefit? You definitely benefit from adding this hack to your blog. It would gives more exposure to other related articles by displaying them just beneath your blog posts, thus keeping your readers more engaged in reading other important and related stuffs, therefore increasing your blog traffic tremendously. So, this widget really worth trying it out to see how it goes in converting your visitors to regular readers.
9. You can now view your blog to see the new installed blogger related posts widget.
What Are The Benefit? You definitely benefit from adding this hack to your blog. It would gives more exposure to other related articles by displaying them just beneath your blog posts, thus keeping your readers more engaged in reading other important and related stuffs, therefore increasing your blog traffic tremendously. So, this widget really worth trying it out to see how it goes in converting your visitors to regular readers.
- Must Read:- How To Add Related Posts Widget To Blogger
Add Related Posts Widget To Blogger With Thumbnails?
1. Go to Blogger Dashboard => Template => Edit HTML
2. Click on Format Template button
3. Click anywhere inside the Template Editor
4. Press Ctrl + F and search for this code:
</head>
5. Copy and paste the below codes just above the </head> tag.
<!--Related Posts with thumbnails Scripts and Styles Start Here-->6. Now find the following piece of code:
<!-- 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/AVvXsEiOucSDd7BzPl0PczrskWgXve1BvniQmMJmL3KUk1mMt6qvIuIlXiMuqo0m-X49HibQZq9o2ag9SaVXaPWn6cekLmBwd1FoPpYP5Db25sNv4fdEAzXxCiyVXphZKdxEdbnYhYvpUhS2dD8Z/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-->
<div class='post-footer'>7. And just above it, copy and paste the codes given below:
<!-- Related Posts with Thumbnails Code Start-->8. Once you're done with the above steps, Save your template. You're done!
<!-- 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='BlogStable.com' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wHPGWgDY-AQDeYeWaPHTyonb3h4LL3JC1IcbFTOn7zLO2ar9kCH5hpAaqy0SbDArsLXYg_bnkFrCBRT7gtGoMmea7hoGoRqzuUgximcHXSwGpSQVOba-di9Xfy_kCllwV5KiRzFuvQgO/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
9. You can now view your blog to see the new installed blogger related posts widget.
Conclusion:
These was today's tutorial on how to add related posts widget with thumbnails to blogger. These hack would definitely increase your blog's traffic. If you don't have these widget installed in your blog just consider giving it a try.
Do you experienced any technical difficulties adding these widget to your blog? Just leave you query through comment, and we'll get back to you as soon as possible.
Don't just read and work away. Appreciate our work by leaving a useful comment below. We appreciate your feedback! Also do well to share these to your social networking friends using the share buttons below.
You don't want to missed any of our future updates? Make sure you subscribe to our rss feeds in order to get our latest posts delivered directly to your email inbox.
Happy blogging dudes...
Categories:
SEO
.gif)
.gif)
.jpg)
.jpg)
0 comments:
Post a Comment