Related Posts Widget For Blogger with CSS

Related Posts Widget for blogger is what everybody is looking for, In Most of the sites we will find only javascript code and HTML tag for related posts widget. After adding the code to your blog , you can see just a list of related posts without any arrows or style css. So i wanted to embed both in order to make the widget links looks beautiful.

First let’s see the usual javascript and HTML Tag. Step 1 : Add the following Javascript code below ]]></b:skin> , thats between ]]></b:skin> and </head> .

<script type=”‘text/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 &amp;&amp; i < 20) {
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>

Step 2 : Check expand widgets and search for <b:loop values=’data:post.labels’ var=’label’> , Now copy and paste the following code in blue between <b:loop values=’data:post.labels’ var=’label’> and </b:loop>

<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><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>

customize the text in green to show as many links you want.

Step 3 : Now paste the following script the code just below <p><data:post.body/></p> .

code :

<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script>

Thats it , now look at the page , it will look like this


You can see there is no styling , I wanted to make it look beautiful . So i made the following changes . Both step 1 and 2 are same , just in step three make some changes .

<div id=’related-posts’>
<h2>Other Recommended Posts on This Category</h2>
<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script></div>

now its time to add css part for this div section .

/*– (Related posts widget -below posts) –*/
#related-posts {
float:center;
width:450px;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
background-color:#fff
}

#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #0000FF;

font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;

}

#related-posts a{
color:#A10000;
}

#related-posts a:hover{
col
or:#A10000
}

#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}

#related-posts ul li{
background:transparent url(http://img152.imageshack.us/img152/3756/bulletzc2.gif) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;

padding-left: 30px;
padding-top:0px;}

Now look at the page again ,

You can even customize the link color , arrow style , font-size , etc I hope you liked this related posts widget , see you soon with another widget or hack.




If you like this article , then please help us by bookmarking

32 Responses to “Related Posts Widget For Blogger with CSS”

  1. xan you tell me how to post related post by labels

    http://danzyworld.blogspot.com

  2. thanx budd… it worked for me…. the way shown in bloggingtips.com was wrong … it isnt working… you rock

  3. Didn’t work very well. It doubled a lot of my tags so I had to remove it.

  4. Hi Dcloud ,

    Welcome to Blogger Accessories. Please visit this post http://rias-techno-wizard.blogspot.com/2008/08/related-posts-widget-for-blogger-bugs.html .

    If you still have problem , let me know .Send me your template I can implement his hack on your blog template.

    Regards,
    Blogger Accessories

  5. Does this widget show all the posts from same category or only specific number of posts?

  6. Hi Rias,

    I have included this Widget.But how to make the text in Bold ? .
    Is there any way to include this wigdet within the post instead of placing it down?

    Say for example,
    http://praveenkumarg.blogspot.com/2008/07/how-to-remove-funny-ust-scandalaviexe.html

    here it would be more better if the Texts are bold and placed inside the Post itself.

  7. Hello…
    Thanks for this nice post…

    I added it in my blog http://scholarshipsme.blogspot.com
    but currently it is showing the title that is viewing without another related post…I think it is bcoz it is not finding any other post related to it…
    And thus i think it should show “no related post found” like this…
    Thank you.
    Best of the best video

  8. 0 for 3… guess I need more html training..

  9. Great work dude. Added to my blog!

  10. It did nothing :(

    I’m an experienced coder but I’ve never tried hacking widgets. I did exactly what was written on this page. Does my blog layout have something to do with it?
    Justmytwocopper.blogspot.com

    Thanks!

  11. Thanks for the tips
    i implemented it on my blog
    http://300allpctips.blogspot.com
    using step 2 method
    and is now having it but the colour of the links in the widget shown is not visible properly

    so can u give me a code to change the colour of that widget to attractive colour of my blog

    pls send the code to me at
    300allpctips@gmail.com

  12. I’m sorry but it didn’t work on me. I’ve tried it many times. I was able to complete steps 1, 2 and 3. Nothing happened. I tried your changes to step 3 but couldn’t find
    div id=’related-posts’
    so I tried replacing the whole of the insertions in step 3 of method 1 and below that is the css in step 4 but I cannot save my template as it it not well parsed.
    pls. check my site http://architectureoverload.blogspot.com.
    For the meantime I will remove the insertions I made in the first method.

  13. I think I used this hack found here and now on my related posts I get a UPGRADE TO PRO image with my links. whats up with that and how do I fix it? get at me my blog is http://mexican-taint.blogspot.com

  14. Searchles just came out with a contextual Related Posts widget for blogger that actually analyzes your text to match related posts. Has SEO benefits too and is real easy to install. You just add a gadget to your layout and embed the code and it’s up and running. You guys should have a look: http://searchles.com/misc/platform

  15. Hello there! The related posts doesn’t seem to show up. Any help pls? :)

  16. الـطـالـب 23. Apr, 2009 at 11:03 am

    salam alaykum akhi Muhammad
    baraka allah fik for this widget ,,,
    i got a problem that i got just the title ‘Other Recommended Posts on This Category’
    waiting for your help bro
    +excuse me to add you on my friends list blog(if u dont mind :) )

  17. not work…

  18. Nice info. useful for me

  19. How i can remove the current title in related articles ??

    example, my post :

    Hello ! where are you??

    [content]

    related articles:

    .rsrs
    .now !!
    .hello ! where are you <— remove this related
    .nothing
    .WWOOOOw !

  20. Thanks for Tips
    Its nice !!

  21. Hmm..thank you.. i will try it on my blogger. :D

  22. Just title, no post… :P

  23. Very nice I will try this but very lengthy procedure

    Blogging Tips

  24. sorry man but this doesn’t work, guess I’ll have to keep searching in google for another one that works…

  25. I used this site to get information for that i had in my class. This is an excellent site for this inofrmation
    I am find your source via http://google.com

  26. Its a basic related post widget.basic things rock

  27. Get Genuine Fresh NOD32 Usernames & Passwords * Daily Update * and Download ALL FULL NOD32 Versions AND Kaspersky Antivirus 2011 Keys.

    http://eset-nod32keys.blogspot.com/

  28. nice tutorial, very useful
    thank’s

    Today Infolicious

Leave a Reply

You must be logged in to post a comment.