A related posts widget is important in every blog, and why is that?
what is related posts?
Related posts widget is a widget shown below every blog posts, it is the collection of posts that relate to the post the a blog visitor is reading.
The related post widget in the mobile version of your blogger blog can increase your blog’s page views especially if a higher number of visitor/readers access your blog from their phone. Since this blogger widget displays related posts without the images, it does not affect page load time of your blog. It can also reduce your blog’s bounce rate because there is interlinking of one post to other and your visitors don’t leave immediately without checking out any other post on your blog.
now let’s follow this steps.



Step 1

From your blogger dashboard,
Go to Template.
Make sure you backup your template
Make sure you change your blog’s mobile view from Default to Custom, to do that click here, don’t worry it will open in a new tab.

Step 2

click on Edit Html
press ctrl + F, in that search box that appears,
type: </head> and enter
right above </head> copy and paste the below code:

Copy This

  • <!--Related Posts Scripts and Styles Start-->
    #related-posts {
    float : left;
    width : 350px;
    margin-left : 5px;
    font : 11px Verdana;
    #related-posts .widget {
    list-style-type : none;
    margin : 5px  5px ;
    padding : ;
    #related-posts .widget h2, #related-posts h2 {
    font-size : 20px;
    font-weight : normal;
    margin : 5px 7px ;
    padding :   5px;
    #related-posts a {
    text-decoration : none;
    #related-posts a:hover {
    text-decoration : none;
    #related-posts ul {
    border : medium none;
    margin : 10px;
    padding : ;
    #related-posts ul li {
    display : block;
    background : url(&quot;http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png&quot;) no-repeat  ;
    margin : ;
    padding-top : ;
    padding-right : ;
    padding-bottom : 1px;
    padding-left : 21px;
    margin-bottom : 5px;
    line-height : 2em;
    border-bottom:1px dotted #cccccc;
    <script type='text/javascript'>
    var relatedTitles = new Array();
    var relatedTitlesNum = ;
    var relatedUrls = new Array();
    function related_results_labels(json) {
    for (var i = ; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = ; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    function removeRelatedDuplicates() {
    var tmp = new Array();
    var tmp2 = new Array();
    for(var i = ; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
    tmp.length += 1;
    tmp[tmp.length - 1] = relatedUrls[i];
    tmp2.length += 1;
    tmp2[tmp2.length - 1] = relatedTitles[i];
    relatedTitles = tmp2;
    relatedUrls = tmp;
    function contains(a, e) {
    for(var j = ; j < a.length; j++) if (a[j]==e) return true;
    return false;
    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = ;
    while (i < relatedTitles.length && i < 20) {
    document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
    if (r < relatedTitles.length - 1) {
    } else {
    r = ;
    document.write('<a href="http://www.gurusblend.com/2016/12/how-to-add-related-posts-widget-to.html" target="_blank" rel="dofollow"><font size="1" color="black">[Get This Related Posts Widget]</font></a>');
    <!--Related Posts Scripts and Styles End-->


ALSO READ:  How to Make Money On YouTube Without Tons Of Subscribers And Views

Step 3

in your template, press ctrl + F and search for:

Copy This

  • <div class='post-footer-line post-footer-line-1'> 

or search for this:

Copy This

  • <p class='post-footer-line post-footer-line-1'>

Copy the code below and paste below any of the lines of code above which you could find in your template:

Copy This

  • <!-- Related Posts with Thumbnails Code Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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> </font>
    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
    <!-- Related Posts with Thumbnails Code End-->

Now save your template, and view your blog, you now have a related posts widget in your blog..
hope it helps? drop your comment..


  1. Nice Blog. Tokenized members on the crypto platform will enjoy a pioneering concept of security insurance which will constantly shield the market environment.


Please enter your comment!
Please enter your name here