Create a Related Post for your Blog

Do you want to put a “Related Post” (Demo) just like the one shown above at the bottom of every articles in your blog? Then follow this simple steps in adding your previous articles at the bottom of every post.

Why placing Related Posts' Important?

• Get More Click Through Ratio (CTR) for your Pages
• Get More CTR = More Adsense Impressions.
• Gives Readers easy Navigation (about what to read next )
• Makes your Posts Sticky

Please note that your articles must have Label or Tag for related topics to be displayed. Also, don’t forget to “Download Full Template” of your blog before making any changes.

The BLOGSPOT window will be opened on the box below when you click the login button in Step #1. You can always open a new browser window if you want a larger view of the BlogSpot window..

To follow the step by step procedure, Just hover your mouse on the menu provided beneath this box.

Step #1 Login to Blogspot.com by clicking this button -> Locate the blog you want to edit then Click Layout. Note: If the options to the right of the "New Post" button are "Edit Post, Settings, Template" then you are using Blogger Classic, which is currently unsupported. Step #2 Select Edit HTML in the sub-menu at the top. Click Expand Widget Templates on the right side of Edit HTML window Step #3 Search for the </head> tag in your template. Select all text from the Code window #1 on the right. Right click and copy the selected text. Then paste the code just above the </head> tag you just searched. Step #4 The next step is to locate <data:post.body/> in your template. This time, paste the code from Code Window #2 on the right just beneath the text you just searched. Step #5 To test the code click at the bottom of the "Edit HTML" window. If there is no error you may now press the . Step #6 Congratulations! Please don't forget to comment. If possible include your website so I could drop your site a visit.

Code window #1 <!-- Related Post START --> <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 { color : #940f04; font-size : 20px; font-weight : normal; 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 { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYeJcy-icGRbgBspP-cT4jCOHrtG9kyhjpM7TIAfORcsRXa2tMlp3b-hMIRCoyGrtepfOaoYLCyvyD8jmzLYZcIfp38LuaSQWRnShQ1vHJ4vV8VShVCtO6-JUAKItv12nWlx974pXZBbdf/&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 16px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://www.pooxie.net/javascripts/relatedpost.js' type='text/javascript'/> <!-- Related Post END --> Code window #2 <!-- Related Post START --> <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&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/> </b:if> </b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </b:if> <!-- Related Post END -->