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 == "item"'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'></b:if><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop><script type='text/javascript'>var currentposturl="<data:post.url/>";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):-
#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):-
#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):-
#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;}
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
Can You Explain Me Briefly?
I Think That This Will Keep Your Visitor Engage To Read More Hot Post & Increase Your Blog’s Views.
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.
To @Anonymous
Yes, You Are Right…!!!
It’s Simply Decrease Your Bounce Rate That Is Good For Your SEO…
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?
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…
🙂
nice post..thanks!
You Are Welcome…
I love this Muhammad, works perfect on all the browsers. Thank you.
You Are Welcome…
nice..thanks for sharing..hopefully it will increase my pageviews.
You Are Welcome…
cool widget..luved it.
Thanks…
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
Thanks…
widgets are more important for the blog, the steps which you had given are really good. web designing company bangalore
Thanks…
Thanks…
You Are Welcome…
Amazing! Thanks.
You Are Welcome…
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
You Are Welcome To Visiting Us…
The blog is absolutely fantastic. Lots of great information and inspiration, both of which we all need. Thanks.
You Are Welcome To Visit Us Regularly, We Will Try To Make It More…
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
Thanks For Visiting, Be With Us To Get More…
Thanks for allowing me to post comment on your site. Your work is very
good.
You Are Welcome To Visit…
Really very stylish blog. Hopping for some more informative blogs. Thanks
You Are Welcome, Be With Us To Get More…
Nice Posting Thanks for share with us
Web Developer Bangalore
You Are Welcome To Visit Us…
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
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…
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.
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…
not working. its showing only 6 posts
Increase 5 To Your Desire And Wait For Few Hour To Get These Post Updated…
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
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?
Simple. Everybody is able to read his country extension in address bar and edit his code snippet
I Know But What If I Add It In My Related Post Code. Which Countries Extension I Should Use?
What you read in your homepage? blogspot.fr, blogspot.en?: Change consequently your code
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…
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
Welcome Here And Thanks For Liking Our Widget And Thanks For Using It. Its Looking Awesome On Your Blog. Happy Blogging.
I regard something really interesting about your web blog so I saved to my bookmarks .
Welcome here and thanks for liking our blog.
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
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.
Thanks for sharing the blog..i really liked it!!!
Welcome here and thanks for reading our article and sharing your view.
Great Content & Thanks For Sharing.
Welcome here and thanks for reading our article and sharing your view.