How To Add Related Post Widget To Blogger Blog on Both New and Old Themes (Mobile & Desktop)


Related Post Widget for blogger is a widget that displays posts related to a particular post by label. That is, if your blog post is labeled with a particular title, you will sell enabled to display more posts from the same label. Adding related posts widget has also been a tatic adopted by bloggers to make their reader view more posts under a particular label.

There are many related Post widget thumbnails out there but this one here i will say is the best. This one is responsive, in the sense that once it gives an automatic size, it is different from those widget that enlarge blog page width. If you check my below my blog posts, there you will find the related Post widget there.

What else does if offer?, Related Post widget can increase your blog audience, Pageviews or traffics, CTR (Click through rate) which can however boost your ads earnings *Wink*. Now, I am convincing you to use this widget.

In this, tutorial, I will teach you how to add related post widget to your blogger blog it you are using : New blogger theme (Emporio, Soha, Notable Contemplo) or old blogger theme (Awesome).

How To Get Started

Sign in your Blogger Dashboard

In the left menu, click "Theme" >> "Edit HTML"

Let the code area load completely. Same on the code area, click CTRL+F on your keyboard to open your search box. (Use CMD+F for Mac PC)

Search for </head> and paste the following code right above it.

<!--OgbongeTechs Related Post-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
.related-post-title{font-size:0.8em;margin: 5px 0px;}
#related-posts {margin: 0px 5px;}
#related-posts a {font-size: 0.7em;color:#970E0E;text-transform: capitalize;}
#related-posts a:hover {text-decoration: none;color: #555;}
#related-posts ul {list-style-type: none;padding: 0px;color: #000000;}
#related-posts li {  padding: 0.7em 1.2em;border-bottom: 1px solid #E2E2E2;background: url(http://2.bp.blogspot.com/-1Go6ez45KLA/VRSl96jFQPI/AAAAAAAAAwM/nIFxL71PTrA/s1600/Arrow.png).2em 1em no-repeat;}
#related-posts li:hover {background: url(http://2.bp.blogspot.com/-1Go6ez45KLA/VRSl96jFQPI/AAAAAAAAAwM/nIFxL71PTrA/s1600/Arrow.png).2em 1em no-repeat #E7F0FF;}
</style>
   <script src='http://aireshalili.github.io/internetsmash/simple-related-post.js' type='text/javascript'/>
</b:if>
<!--OgbongeTechs Related Post-->

How To Add Related Post Widget To Blogger Blog on Both New and Old Themes (Mobile & Desktop)

Save the theme.

Now, the next code i am going to give is the one that will display your related posts. Now, you have to choose where you want the related post widget will display. I recommend users to display this related post at the end of their blog post after any other code be it as code or others.

If you are using new blogger themes (Emporio, Soha, Notable or Contempo) search this code :
<b:includable id='postBodySnippet' var='post'>

Then paste the following code right above it

<!-- OgbongeTechs Related post Start --> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'><h4 class='related-post-title'>Recommended Posts:</h4><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=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script>[<small><a href="http://www.ogbongetechs.com/2017/07/responsive-related-post-widget-for-blogger-blog.html" rel="no follow" target='blank'>Related Posts Widget</a></small>]</div> </b:if> 
<!-- OgbongeTechs Related Post End -->


Now save your theme and preview your blog. Your related Post will display at the end of your blog post page on both mobile and desktop view.

If you are using old blogger themes (Awesome, Travel, watermark, simple, ethereal, picture window, dynamic view) search this code :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

You might find this code twice. One is for mobile and the other is for desktop. Then place the related post widget thumbnail right above it at the two codes you found.

For other themes that are not blogger recommended, you can paste the related post widget below <data:file.body/> .

I hope this helps...

Cheers! 





Subscribe To Our Newsletter
Follow Us On Twitter and Instagram

Comments