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

Do you like this Blogger Theme? You can Download Here

Do you like this NetSocialBlog Blogger Emporio Theme?
With all of its designs, share buttons, related posts, gadgets, Adsense Middle ads Codes, SEO tags, Social Card and More! You can download this Custom emporio NetSocialBlog theme by >>Making One-Time Payment Here via Debit Card >>

Share this Post:

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJWZon3HzONRAABFK_t9y0C3uETgtr-XhuwG-eBrrKNDUzknsfn_Uy2lODhTMWGq5yqxD_aI8Je3DoGviQMOt-cJJ6w9s0yhm-7-0FLHPG65sLmBb5MPYXMsnMZ669J0RVNpxm4ABwO9E/s1600/Arrow.png).2em 1em no-repeat;}
#related-posts li:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJWZon3HzONRAABFK_t9y0C3uETgtr-XhuwG-eBrrKNDUzknsfn_Uy2lODhTMWGq5yqxD_aI8Je3DoGviQMOt-cJJ6w9s0yhm-7-0FLHPG65sLmBb5MPYXMsnMZ669J0RVNpxm4ABwO9E/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="http://www.netsocialblog.blogspot.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.

Did you Know?

The above related post was culled from Custom Emporio Theme. You can also: Download the FULL Custom Emporio THEME PaCKAGE HERE

Share with friends:

• Share
• Tweet
• Share
• Pin It
• Share