Installing this widget should help a lot.
Effectiveness of the Blogger Related Posts Gadget
How it Works
There's no special work to it. All you have to do for this widget to work is to create a label or labels, otherwise it wont display at all.
How to Install Widgets
Step 1)
- From your Blogger dashboard
- Click on Template ==> Edit HTML ==> Proceed
- Make sure to Tick the "Expand Widget Template" Box
- We also recommend you Back Up your template before installation.
- On your Keyboard press CTRL + F
- Find </head>
- Paste the code below right under </head>
<!--Related Posts with thumbnails Scripts http://wwsurfers.blogspot.com/-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
background:#cccccc;
padding:1px;
margin:0px;
text-transform:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
.img:border:4px ridge #cccccc;
}
.related-post-footer{
background:#999999;
margin:0;
font-size:11px;
padding:5px 0;
text-transform: none;
}
#related-posts h2{
font-size: 1.8em;
font-weight:;
color: #141414;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
margin-bottom: 0em;
padding-top: 0em;
padding-bottom: 0em;
text-transform;underline;
}
.img{
border:4px ridge #cccccc;
padding:5px
}
#related-posts a{
color:#0000ff;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#999999;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_jM8-wHc3NKY/TPyEXEv34II/AAAAAAAAADE/pgs7crFJ_D4/s1600/no+Image+1.png";
var maxresults=4;
var splittercolor="#d4eaf2"
var relatedpoststitle='See Related Posts'
</script>
<script src='http://olusegun-fapohunda-calculator.googlecode.com/svn/wiki/related-post-with-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts http://wwsurfers.blogspot.com/-->
Important Note:
- If you want the Related Posts widget to display more than just five posts, then you should consider changing the var maxresults=5; in the above code to any number you want. For example; var maxresults=7; to display seven related posts.
Step 2)
- Having done all of that. Go ahead and look for; <data:post.body/>
- Paste the code below right under; ==> <data:post.body/>
<!-- start related posts-->
<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><br/><a href='http://www.worldwebsurfers.com/2012/09/best-blogger-related-posts-widget-with.html' target='_blank'><img alt='Blogger Related Posts Widget' border='0' src='http://sphotos-f.ak.fbcdn.net/hphotos-ak-ash4/185300_352802104803421_399692651_n.jpg' title=''/></a><div style='clear:both'/>
</b:if>
<!-- end related posts-->
- When you're done with that, go Save, reload your page and see how it looks.
Note:
- Your blog theme or template might have more than one of this code (<data:post.body/>) but that shouldn't be a barrier, just try all of them until you get the right spot.
- If a particular post isn't labeled the widget wont display below the posts.
Got any questions or contributions? Kindly use the comment. WorldWebSurfers.com is keen to bring you real value, so make sure to subscribe so you don't miss our updates. Cheers!
That should be all. With this medium, we want to say thank you for your continued liking and sharing. If you haven't liked this post yet, you may do that by hitting the buttons just above.
If you are a blogger and you appreciate the hard work, whether or not you copied this post, we implore you to kindly link back to this post here, you may do it anyhow you can. We consider that a great contribution.
Emmanuel Obarhua
Howdy! I'm a friendly blogger and web designing ardent. I designed this site, here's how it was looking. If you have a blog or a website and wishes to beautify it, or you want a service I render just drop me a line, will get back to you.
6 comments:
Thanks for the great post. I have just installed iton my blog.
Blogger Gadgets, Widgets, Plugins, Templates
Thanks a lot its work on my blog..great!
You're welcome Vines, I am glad it worked for you.
I don't find this line: in my template's html. What should I do for this?
Hi Anonymous, I guess you're either talking about; this < /head > or < data:post.body/ >. I am certain all blogger blogs have those two tags. Make sure to click on the "Expand Widget Template" and try again.
Amazing! I'm genuinely enjoying the layout of your website. Are you using a customized theme or is this readily available to all individuals? If you do not want to say the name of it out in the general public, please email me at: leonida-copley@googlemail.com. I'd really enjoy to get my hands on this template!
Thanks a lot.
Visit my web-site ... stump removal
But please! Do not use;