Announcement:

  Hello, We Changed Our Cloth, How It Is Looking? Leave Your Feedback At Our Page.

Thursday, April 19, 2012

Simple And Stylish "Related Posts" Text Widget For Blogspot

This Article Was Live On: Thursday, April 19, 2012 And Till Now Have48 comments.
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.

(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 Article Using...




Don't Forget To Read This Also...



48 comments :

  1. 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

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

      Delete
    2. 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.

      Delete
    3. To @Anonymous
      Yes, You Are Right...!!!
      It's Simply Decrease Your Bounce Rate That Is Good For Your SEO...

      Delete
  2. Thanks for the coding but how do I make it appear on all postings - ie those on the homepage of my blog 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?

    ReplyDelete
    Replies
    1. 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...
      :-)

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

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

    ReplyDelete
  5. 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

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

    ReplyDelete
  7. 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

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

    ReplyDelete
    Replies
    1. You Are Welcome To Visit Us Regularly, We Will Try To Make It More...

      Delete
  9. 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

    ReplyDelete
    Replies
    1. Thanks For Visiting, Be With Us To Get More...

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

    ReplyDelete
    Replies
    1. You Are Welcome, Be With Us To Get More...

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

    ReplyDelete
  12. 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

    ReplyDelete
    Replies
    1. 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...

      Delete
  13. 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.

    ReplyDelete
    Replies
    1. 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...

      Delete
  14. not working. its showing only 6 posts

    ReplyDelete
    Replies
    1. Increase 5 To Your Desire And Wait For Few Hour To Get These Post Updated...

      Delete
  15. 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

    ReplyDelete
    Replies
    1. 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?

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

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

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

    ReplyDelete
    Replies
    1. 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...

      Delete
  17. 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

    ReplyDelete
    Replies
    1. Welcome Here And Thanks For Liking Our Widget And Thanks For Using It. Its Looking Awesome On Your Blog. Happy Blogging.

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.