Add Related Posts Widgets to the end of every Blogger Post without thumbnails

By adding related posts to the end of every blogger post will help keep visitors on your website, as they will get to the end of the post and then click on a related post. It increases traffic and is relevant to the visitor. You have to have it! Therefore, here’s a easy way to add related posts to the end of every blogger post that doesn’t got thumbnails included next to every link.


Firstly, lets open up Blogger and click on ‘Design’ then ‘Edit HTML‘ and be sure to check the ‘Expand Widgets‘ button. Search using ‘Control = F’ to find:

</head>

Now replace that with this:

<!–Related Posts Scripts and Styles Start–><!–Remove–><b:if cond=’data:blog.pageType == &quot;item&quot;’><style type=”text/css”>#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}#related-posts .widget{padding-left:6px;margin-bottom:10px; }#related-posts .widget h2, #related-posts h2{font-size: 1.6em;font-weight: bold;color: black;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{color:blue;}#related-posts a:hover{color:blue;}#related-posts ul{list-style-type:none;margin:0 0 0px 0;padding:0px;text-decoration:bold;font-size:15px;text-color:#000000}#related-posts ul li{background:transparent url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) no-repeat ;display:block;list-style-type:none;margin-bottom: 13px;padding-left: 30px;padding-top:0px;}</style> <script type=’text/javascript’>var relatedpoststitle=”Related Posts“;</script><script src=’http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js’ type=’text/javascript’/> <!–Remove–></b:if><!–Related Posts Scripts and Styles End–> 

</head> 

By changing var relatedpoststitle=”Related Posts” will change the name of your related posts.

Now search for the code:

<div class='post-footer-line post-footer-line-1'>

or 

<p class=’post-footer-line post-footer-line-1′>

And place this next code directly after any of these lines above:

<!– Related Posts Code Start–> <!–Remove–><b:if cond=’data:blog.pageType == &quot;item&quot;’><div id=’related-posts’><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=6&quot;’ type=’text/javascript’/></b:if></b:loop><a href=’http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html’><img style=”border: 0″ alt=”Related Posts Widget for Blogger” src=”http://image.bloggerplugins.org/blogger-widgets.png” /></a> <script type=‘text/javascript’>var maxresults=5;removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);</script></div> <!–Remove–></b:if

<!– Related Posts Code End–>

 You can change the amount of links you want to show through changing maxresults=5; number to what you want.

And your done! Check out your new related posts and you can customize it even more through CSS in template designer.

8 Comments

  1. Anonymous May 1, 2011
  2. Abid khan September 24, 2011
  3. Will Green September 24, 2011
  4. Varinder Pal Singh January 4, 2012
  5. Admin InfoIndiaBank March 8, 2012
  6. Will Green March 8, 2012
  7. university of Nigeria March 15, 2012

Leave a Reply