Blogger Blogspot Blog: How to Add a Related Post widget
By almirah
The Best Related Post Widget for Blogger Blogspot Blog
As a blogger using blogspot platform, you will do enything to make your blogger blog popular and loved by many people. When a reader is visiting your blog and reading your blog posts, you will want to make the reader feels convenient with your blog appearance and blog posts. Beside posting articles that are valuable to your readers, you will also need to help your readers how to easily find your valuable blog posts.
One way to do this is to install related post widget. Related post will appear underneath each of your current full post showing all related posts to the post that they are currently reading. So if you have many posts within the same category, chances are very high for your readers to read some of those related posts. Remember that there is no other way in Blogger to find related posts, apart from clicking category having some posts. It is not so wise to let your readers do this, just to find what other posts are maybe related. It is better to show them directly all other related posts under the current post they are reading. That is why there is a related post widget.
Here you will see a code of the best related widget available around and steps how to install it in Blogger blogspot blogs. First, have a look the image below how this related post widget looks like. This image is taken from a post of a blog implementing this related post widget.
Code1
<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>How to Install Related Post Widget
Follow these steps:
- Log in to your dashboard
- Select Design and HTML
- Back up your template by clicking Download Full Template (in case something funny happens or you change your mind)
- Select the box next to Expand Widget Template
- Search for </head> code
- Place the following Code1 shown on the right just underneath the </head> code in your template
- Search for any of these code present in your template: <data:post.body/> or <div class='post-body> or<data:post.body/>
- Add the following Code2 beneath whichever the code in #7 you find
- Save you template. Preview the related post in action by selecting one post in a category or label having other posts
Code2
<b:if cond='data:blog.pageType == "item"'> <div id="related-posts"> <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if>
Other Blogger Blogspot Blog Tips
- Best google adsense placements for blogspot blogger blog post
This is a very important question to answer to get the best results of your Google adsense. As a income generating tools, where you put your Google adsense in your blogs will have a significant affect to the... - Blogger Blogspot Blog: How to Add a Breadcrumb
Breadcrumb is a tools that you can apply to your blogger blogspot blog. This tools is an assistance to your blog readers so they feel more convenient in reading you blog posts. As a blogger, one of your goals... - Blogger Blogspot Blog: How to Adjust Widget Distance in Sidebar
Once question often raised by many bloggers who are beginners is that how to adjust the distance between widgets added to sidebar. This is a very reasonable question since this issue has a general effect on... - Blogger Blogspot Blog: How to Add a Floating Social Bookmark Share Button
Many bloggers using blogspot blogging platform recommend to use social bookmark button in our blogs. Reason for this is that social bookmark will help to increase you blog post popularity and traffic to your...
Reynold Jay 13 months ago
Thaks for all the great tips. I'm now fully prepared to Blog as never before! I enjoyed this very much. You have this laid out beautifully and it is easy to understand. Keep up the great HUBS. Up one and Useful. Hey! I'm now your fan! RJ