Jun 23, 2012

How to Add Related Posts On Sidebar?

Leave a Comment
In most of the blogs we have seen Related Posts displayed below Post. What will we discuss now? That's How to Add Related Posts on Sidebar. Actually the function are similar with them. But, in this case the related posts are in sidebar. So, it can contain more articles and have a good look. 
Just follow the steps below!

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Backup first your template, because we'll make some changes.
4. Click on "Expand Widget Templates"
5. Copy and paste the following code above </head> tag

6. Find (Ctrl + F) some code which looks like this



,


7. Then change with this code
<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if

Customize:

  • max-results=10 is the number of related posts will be display, you can change the number.

8. Click Save Template
9. Then, go to Design --> Page Elements --> Add Gadget, then choose "HTML/Java Script". Add the following code.

10. Write Related Posts as the name of the widget. Click "SAVE" if you finished.

Trouble Shooting:
11. If the code mentioned under Step-6 not available in your blogger template, now search for this line,
Code:
<div class='post-header-line-1'/>

12. Once you find this, paste the code under Step-7 just above this line.
13. Click "Save Template".

That's it :)
 

If you feel this is helpful or you like it, Please share this using share buttons available on page.

0 comments :

Post a Comment