Wednesday, May 18, 2011

Related Post Widget for Blogger: Working & Updated

Showing a related post is an intelligent way for safekeeping your site visitors everywhere. In addition to you may have observed other Related Posts Widgets out over there... However this one will be Simpler and Smarter.

There are some benefits by attaching related post widget in our blog; the readers will be capable of look for the articles that connect to the article they were reading, and it additionally gives an advantage for the blog owner considering that the subscribers can stay in the blog longer.


The related posts widget will display a latest related posts segment below your blog post. The related posts widget collects the related posts from those blog posts having the equivalent label as the present post.

related post widget proknowliz


To execute the related posts widget you will have to go with following easy understudy steps.


Step 1: Go to: DESIGN>> EDIT HTML>> check “EXPAND WIDGET TEMPLATES”.


Step 2: Find following code,

]]></b:skin>

And exactly below this, paste following code

<style> #related-posts{float:left;width:570px;margin:20px 20px 20px 0px;}#related-posts .widget{list-style-type:none;margin:5px 0;padding:0;}#related-posts .widget h2,#related-posts h2{color:#940f04;font-size:20px;font-weight:400;margin:5px 7px 0;padding:0 0 5px;}#related-posts a{color:#054474;font-size:11px;text-decoration:none;}#related-posts a:hover{color:#054474;text-decoration:none;}#related-posts ul{margin:10px;padding:0;}#related-posts ul li{display:block;background:url(&quot;http://1.bp.blogspot.com/-HzkbuGMTK9k/TdLzH8bhruI/AAAAAAAAAJc/Gv35hbgLIiQ/s400/Proknowliz%2Bbullet%2B.png&quot;) no-repeat 0 0;line-height:2em;border-bottom:1px dotted #ccc;margin:0 0 5px;padding:0 0 1px 22px;}</style>


570px : you may change this according to your post content size.


Step 3: Find following code,

<data:post.body/>

And exactly below this, paste following code

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'><div style='background-color: none; background: url(http://2.bp.blogspot.com/-VHFzGUxmXNU/TdLvdqtzxQI/AAAAAAAAAJE/BghDm2Srocc/s1600/backgrounds-sprite.png) 0 0 repeat-x; font-size: 13px; padding: 10px; border: 1px solid #CCC; border: 1px solid rgba(0, 0, 0, .15); margin: 0 0 1em; max-height: 36px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; line-height: 14px;'><b>See other Posts on <b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop></b></div><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script> </div></b:if>


5: You may change this number for showing total number of post titles in this widget.


You may paste this code according to your requirement of blog template; below post or title.


Step 4: Save Template.

Load disqus comments

4 comments