Don't miss

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.

About Will Green

A student in England studying Automotive Engineering with Motorsport, Will created Ask Will Online back in 2010 to help students revise and bloggers make money. You can follow AskWillOnline via @AskWillOnline.

8 comments so far:

  1. thanks a lot :) works perfect

    ReplyDelete
  2. Not worked for me :(
    What may be the reason?

    ReplyDelete
  3. Are you sure you placed the HTML scripts in the exact right places?

    ReplyDelete
  4. Thanks Great Hack Its working and looking too cool Awesome work.

    ReplyDelete
  5. Make sure you have placed the right HTMlL in the right places on your script.

    ReplyDelete
  6. tried it and it is not working fo me, check it out here--- dailyschoolinfo.com

    ReplyDelete