LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Related Posts » Simple And Stylish “Related Posts” Text Widget For Blogspot

Simple And Stylish “Related Posts” Text Widget For Blogspot

Simple And Stylish "Related Posts" Text Widget For Blogspot

I am going to post three awesome styled Text only related post widget for blogger. Actually, related posts widget increase your blog’s bounce rate. Also many related posts widget for blogger look boring and ugly. An those having images will increase up your blog loading time.So, hope you like all of the three.

Features:
1.) Simple With 3-Stylish Design.
2.) Page Counter.Dark And Light Effect.
3.) Only Text To Remain Your Blog Loading Speed Fast.

How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To HTML.
4.) Click “Edit HTML”
5.) Check On “Expand Widget Template”
6.) Now Do As I Did.

7.) Find This Line Using (CTRL+F) Function.
</head>
And Copy The Below JavaScript Code And Paste It Before/Above It.

    <!--RelatedPostsStarts-->
    <script language='JavaScript'>
    //<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;
    break;
    }
    }
    }
    }
    function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; 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 = 0; 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 = 0;
    document.write('<ul>');
    while (i < relatedTitles.length && i < 6) {
    document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
    if (r < relatedTitles.length - 1) {
    r++;
    } else {
    r = 0;
    }
    i++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>

8.) Now Copy The Below HTML Code And Paste It Where You Want To Show Related Posts Widget.
Like I Suggest To Find These Line Using (CTRL+F) Function.
<div class=’post-footer-line post-footer-line-2’/>
<div class=’post-footer-line post-footer-line-3’/>
</div>
</div>
And Edit The Below HTML Code Then Copy It And Paste It Below/After It.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<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 currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5<!-- Increase To Show More Then 5 Related Post -->
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

9.) Next, Find The Below Line Using (CTRL+F) Function:
</b:skin>
Final, Choose Any One Style, And Insert The Corresponding CSS Code Above It.

Recommended For You:
Fetch Data From Blogger Feed Using Pure JavaScript

(Style 1):-

Simple And Stylish "Related Posts" Text Widget For Blogspot

#related-posts {clear: both;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #222;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;}

(Style 2):-

Simple And Stylish "Related Posts" Text Widget For Blogspot
#related-posts {clear: both;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;background: #111;}

(Style 3):-

Simple And Stylish "Related Posts" Text Widget For Blogspot
#related-posts {clear: both;}
#related-posts h2{color: #fff;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;background: #111;}

You Like It, Please Share This Recipe With Your Friends Using...

56 Responses to “Simple And Stylish “Related Posts” Text Widget For Blogspot”

  1. iTechColumn says:

    Hey nice one..

    But you are saying that “Actually, related posts widget increase your blog’s bounce rate.”

    Related post widget will actually reduce blog’s bounce rate.

    Thanks

    • EXEIdeas says:

      Can You Explain Me Briefly?
      I Think That This Will Keep Your Visitor Engage To Read More Hot Post & Increase Your Blog’s Views.

    • Anonymous says:

      Because the bounce rate is the rate of how quickly readers come and leave your blog. The related posts widget will make them stay longer on the blog and, therefore, will reduce the bounce rate.

    • EXEIdeas says:

      To @Anonymous
      Yes, You Are Right…!!!
      It’s Simply Decrease Your Bounce Rate That Is Good For Your SEO…

  2. Gareth says:

    Thanks for the coding but how do I make it appear on all postings – ie those on the homepage of my blog http://www.kirkbymoorside.info – they only get listed on individual pages which many regular readers won’t look at as they just read postings via the home page?

    • EXEIdeas says:

      You Are Welcome…
      If You Want To Show This Widget On All Places, You Have To Remove The Given Lines From The HTML Code…

      (From Top)

      (From Bottom)

      Still Having Problem, Feel Free To Ask…
      🙂

  3. Online Income Tips says:

    nice post..thanks!

  4. Antoxwoman says:

    I love this Muhammad, works perfect on all the browsers. Thank you.

  5. Fileice Survey Tips says:

    nice..thanks for sharing..hopefully it will increase my pageviews.

  6. microsoft points generator says:

    cool widget..luved it.

  7. danish siddique says:

    widgets brings traffic to blog, and optimizing the widgets to blog or adding the widgets to blog should be careful and should follow steps, the blog is really awesome. cheap printer cartridges

  8. vidya shree says:

    widgets are more important for the blog, the steps which you had given are really good. web designing company bangalore

  9. Debjyoti Das says:

    Thanks…

  10. Isaias says:

    Amazing! Thanks.

  11. jain teq says:

    Thanks boss this code useful for me, I am so glad to leave comment on this blog

    Website Development Company in India | SEO Company India

  12. The blog is absolutely fantastic. Lots of great information and inspiration, both of which we all need. Thanks.

  13. Umar Naseem says:

    Hi everyone, it’s my first pay a quick visit at this site, and paragraph is in fact fruitful in support of me, keep up posting such content.AIHL

  14. Free Web Directories says:

    Thanks for allowing me to post comment on your site. Your work is very
    good.

  15. Really very stylish blog. Hopping for some more informative blogs. Thanks

  16. Sinelogix says:

    Nice Posting Thanks for share with us
    Web Developer Bangalore

  17. Rohan Mod says:

    Thanks i believe that related post widget plays an important role in engaging the user and also to increase traffic.even those posts that did not get good amount of traffic gets clicked because of the same labels and hence hardwork of admins and writer gets rewarded.so i will say it is like a traffic booster.Related post widget for blogger

    • EXEIdeas says:

      You Are Welcome Here And Thanks For Your Positive Views, It’s Best For Both, For Visitor To Get More Awesome And Rekated Post And For SEO, Decreasing The Bounce Rate Too That’t Why Every Big And Small Blogger Must Have It…

  18. shayari says:

    this is awesome..related post widget helps too much for getting more and more traffic for numb posts.it is like making burning stones out from the mouth of volcano.there are lots of posts which user does not pay attention so here related post widget will help like engaging user for some amount of posts .thanks for sharing.

    • EXEIdeas says:

      Thankls For Liking This And Visiting Our Blog, As I Mentioned Aboved That It’s Best For Two Uses And Also You Agree With That But Still Are Some Newbies Who Don’t Know The Benefits Of This, We Have To Explain That All Too…

  19. Pradip Patil says:

    not working. its showing only 6 posts

  20. Giovanni S says:

    Thank you for this post. This widget works pretty well. But there was a problem: often in the related posts was present the title of the current post, a duplicate. I changed slightly the printRelatedLabels() javascript function this way:
    function printRelatedLabels() {
    var str=window.location.href;
    var r = Math.floor((relatedTitles.length – 1) * Math.random());
    var i = 0;
    document.write(‘<ul>’);
    while (i < relatedTitles.length && i < 4) {
    var str1=relatedUrls[r];
    var str2=str1.replace(“blogspot.com”,”blogspot.it”);
    if (str2!=str){

    document.write(‘<li><a href=”‘ + relatedUrls[r] + ‘”>’ + relatedTitles[r] + ‘</a></li>’);

    }
    else
    i–;
    if (r < relatedTitles.length – 1) {
    r++;
    } else {
    r = 0;
    }
    i++;
    }
    document.write(‘</ul>’);
    }

    and the problem is gone
    N.B. In this code you need change the ‘it’ extension with the one of your country
    Cheers

    • EXEIdeas says:

      Nice Editing But What About Other Countries. The User Will Be There From All Over The World And Blogspot.com Have Many Different Extension For Different Countries So From You Code, We Can Only Fix It For A Country Domain On. What About To Add All Extensions?

    • Giovanni S says:

      Simple. Everybody is able to read his country extension in address bar and edit his code snippet

    • EXEIdeas says:

      I Know But What If I Add It In My Related Post Code. Which Countries Extension I Should Use?

  21. Giovanni S says:

    What you read in your homepage? blogspot.fr, blogspot.en?: Change consequently your code

    • EXEIdeas says:

      If I Will Set It With Mu Country Extension But What When Other Country User Will Read My Blog. The Blogspot Automatically Change The Extension To There Country. For This Purpose, I Have To Add All Blogspot Extension In The Script…

  22. Naqash Khan says:

    I looked for so many related post widgets but this one looks very nice its very clean and looks very elegant. I like it alot. Thanks for the effort. Muhammad Hassan and nice blog. I have added it to my blog. A working demo can be seen Techzondo

  23. I regard something really interesting about your web blog so I saved to my bookmarks .

  24. sriramd says:

    It is really good looking and impressive. But few problems.

    1) It displays current post url, which is unnecessary
    2) After increasing max results 10. it only displays 6 max. please fix

    Thanks

    • EXEIdeas says:

      Welcome here and thanks for using our code. Its all because of you have less post in that category so it will not show posts from the rest of your blog categories and also will show itself if there are less in count in that category to try to complete counter.

  25. Thanks for sharing the blog..i really liked it!!!

  26. Mr Rahman says:

    Great Content & Thanks For Sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *