How To Add Related Posts Widget To Emporio & Other New Blogger 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(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>
<!--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.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
  Want something more Cool? Then let me help you Design/Redesign Your Site

Share:


Comments

  1. Hi Tunde,

    Related post widget is really what all bloggers should have on their blogs.

    You did a good job publishing this, and thank you for the mention.

    ~Emmanuel

    ReplyDelete
    Replies
    1. Hello there Emmanuel!

      Good to see you here and of course yes! I couldn't agree less with you about the importance of Related Post Widgets!

      Delete

Post a Comment