Skip to content

ADDING RELATED POST WIDGET WITH THUMBNAIL TO YOUR BLOGGER BLOG

Blogger blog is one of the best blogging platforms which you all know but they don’t have much plugins or gadget as most would say. They have limited plugins which makes work a little bit hard, right? Well that is not our issue; our issue today is how to add related post to our blogger blog.

In the blogging world you need to make your readers stay with your blog for a longer period of time but how can you make them really stay with your blog? Good content and something to keep them reading like your recommended post and related post. When you have a related post widget on your blog, it gives the reader more options and more ways to stay glued to your blog. Since the blogger blog don’t have a widget for this, we are going to create a related post like the image below our selves.

how to insert related post

How to add a post related widget to your blogger blog

Don’t worry! We are going to make this tutorial as simple as possible so put your worries to rest. Lol…

Are you ready to proceed? If you are! Go to your blogger dashboard and click “design” go to your Edit HTML

Are you at the Edit HTML now? If you’re there click the “Expand widget templates” box.

In the codes search for </head> tag, If you’d want to make it more easy simultaneously press the “ctrl + f” key to bring out a search box below your browser. In the provided search box type </head>

Now copy and paste the below code above the </head> tag

[php]<!–Related Posts with thumbnails 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;

}

&nbsp;

#related-posts h2{

font-size: 18px;

letter-spacing: 2px;

font-weight: bold;

text-transform: none;

color: #5D5D5D;

font-family: Arial Narrow;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

border-right: 1px dotted #DDDDDD;

color:#5D5D5D;

}

#related-posts a:hover{

color:black;

background-color:#EDEDEF;

}

</style>

<script type=’text/javascript’>

var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;

var maxresults=5;

var splittercolor=&quot;#DDDDDD&quot;;

var relatedpoststitle=&quot;Related Posts&quot;;

</script>

<script src=’http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js’ type=’text/javascript’/>

<!– remove –></b:if>

<!–Related Posts with thumbnails Scripts and Styles End–>[/php]

Have you successfully input the code? Then we have successfully done the first half of the show, now let’s move to the second half of the show shall we.

Now find/search for the below code

[php]<div class=’post-footer’>[/php]

Have you seen it? If you have seen it, paste the below codes just above it

[php]<!– Related Posts with Thumbnails 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>

<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;’ type=’text/javascript’/></b:loop>

<script type=’text/javascript’>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

</script>

</div><div style=’clear:both’/>

<!– remove –></b:if>

<b:if cond=’data:blog.url == data:blog.homepageUrl’><b:if cond=’data:post.isFirstPost’>

<a href=’http://onenaijablog.com’><img alt=’Blogger Tricks’ src=’http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png’/></a>

</b:if></b:if>

<!– Related Posts with Thumbnails Code End–>[/php]

Save your Template and you have done. Go check your blog and you will see your related post with thumbnail. Now your readers have more reasons to stay on your blog.

Do you enjoy the post and want to drop your thoughts or just want to make a comment? Then please do using the comment box below. Remember that your comments are very precious and important to us.

Do you like or love the post? Then do click the like button, share us and recommend us with friends and do not forget to subscribe to our feed for latest updates on the go…

7 thoughts on “ADDING RELATED POST WIDGET WITH THUMBNAIL TO YOUR BLOGGER BLOG”

  1. This is once of the best and informative post i have read, some people are posting articles without knowing the basic step of communication and writing skills.
    You have the ability and know the way of how to convince your reader to read the whole article, very creative post, just keep it going.
    Thank you 🙂

    1. Hello Mohammad,
      Thanks for the complement, i’m just communication as though i’m talking to my friends so there is nothing to it. Thanks for the comment and hope you’ll stop by again!

  2. Well… Thanks a ton!!!

    I have a problem. When adding the code I get an error message “&nsb” in line 1219. Error parsing XML, line 1219, column 7: The entity “nbsp” was referenced, but not declared.

    What does this mean. I couldn’t save it.

  3. Thanks for this widget bro,,,,,Will definitely try it out…

    I’m also glad this nice widget is coming from a Nigerian……

    We are definitely going to reach our Peak soon. Thumbs.

Leave a Reply to babanature Cancel reply

Your email address will not be published. Required fields are marked *