How To Add Related Posts Widget To Emporio Blogger Themes & Other New Themes

Related Post Widget is a very important widget for every blogger as it does not only help to reduce a blog’s bounce rate but also increases the blog’s traffic! Furthermore, below is what a Nigerian blogger had to say about Related Posts Widget;

    “If you’re not using a Related Posts Widget On Your Blog, You’re Losing x2 Of Your Blog’s Traffic” – Emmanuel Ekanem

Hence because of the importance, i’ll be sharing with you how you can easily add Related Posts Widget To Emporio, Soho, Notable, Contempo New Blogger Themes!

[Read also: How To Upgrade Emporio Blogger Template to The Latest Version]

To cut  the long story short, below is How To Add Related Posts to the New Blogger Themes?
Credit: Thanks to Aireshalili for the providing the script

How To Add Related Posts Widget To Emporio, Soho and Other New Blogger Themes

Step 1:  Login to your blog dashboard, Click on Template > HTML. Now press then Ctrl+F on your keyboard to search for </head>

Step 2: Copy the below JAVASCRIPT CODE

<!–NSB 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(https://2.bp.blogspot.com/-1Go6ez45KLA/VRSl96jFQPI/AAAAAAAAAwM/nIFxL71PTrA/s1600/Arrow.png).2em 1em no-repeat;}
#related-posts li:hover {background: url(https://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>
<!–NSB Related Post–>

And paste it directly before the closing </head> section of your template HTML (see picture below)

Step 3: To display the Related Posts widget; Simply Copy Below Script for the Related Post Widget to your Notepad

<!– NSB 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=”https://www.netsocialblog.com/2017/07/add-related-posts-widget-to-emporio-soho-new-blogger-themes.html” rel=”no follow” target=’blank’>Related Posts Widget</a></small>]</div> </b:if> <!– NSB Related Post End –>

Step 4: Then Ctrl+F <data:post.body/> and paste the code from the Notepad directly below it! (as shown in picture below)

Step 5: Now click on Save changes and view one of your post to see it working!

NOTE: The above method is exactly the way you’ll follow to add the Related Posts Widgets to Other New Blogger Themes

You can also: Download Custom Emporio Blogger Theme With Awesome Features Here

UPDATE – THE CODE IS NO LONGER WORKING>> KINDLY Use Linkwithin Widget Instead