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 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 == "item"’>

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#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>

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

var maxresults=5;

var splittercolor="#DDDDDD";

var relatedpoststitle="Related Posts";

</script>

<!– 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 == "item"’>

<b:loop values=’data:post.labels’ var=’label’>

<b:if cond=’data:label.isLast != "true"’>

</b:if>

removeRelatedDuplicates_thumbs();

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

</script>

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

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

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

</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…