Senin, 07 November 2011

Related Post Blogger 2011

Now here is wonderful hack for displaying links to related posts under each of your blog posts. The Related are chosen from same categories or labels or tags, and it will help the reader to find some good post that related to your blogpost


Here is The Preview of Related Posts Links:


How to Add Related Posts Widget to Your Blog?

  1. Go to Layout >Edit HTML in your Blogger Dashboard.
  2. Back up your existing Template before making any changes!
  3. Make sure to check the "Expand Widget Templates" box.
  4. Search for the </head> tag.
  5. Add the following code just before the </head> tag.
  6. <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://yourjavascript.com/1511677115/Related_posts_hack.js' type='text/javascript'/>
  7. Than you search for <data:post.body/>. In some of the templates this code may look like different like this
    <div class='post-body>
    or<data:post.body/>
  8. Simply add the following code just beneath the code you just searched.
    <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 != &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> </font>
    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
    </script>
    </div></b:if>
  9. Now Save it and your related post done!

Extras

  • If you want to change the maximum number of related post below your post, just change the"5" to any desired number from the code given above.
  • max-results=5
Enjoy The Trick
/wahaha
Awtian 

0 komentar:

Posting Komentar

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More