Related Posts Widget For Blogger with CSS

25. Jun, 2008 28 Comments


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.
ph56102524 Related Posts Widget For Blogger with CSS

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

Related Posts Widget For Blogger with CSS
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.

Mohamed Rias - has written 94 posts on Techie Blogger

I am Mohamed Rias , admin of Techieblogger.com. Basically I am Engineering student but still blogging is my passion. My areas of interest are HTML , CSS , Jquery , Javascript and PHP.

Visit Authors Website  |  All Articles From This Author
0
hits

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

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

  1. danzyworld Reply 23. Sep, 2008 at 6:24 am

    xan you tell me how to post related post by labels

    http://danzyworld.blogspot.com

  2. Blogger Reply 23. Sep, 2008 at 10:36 am

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

  3. dcloud Reply 08. Oct, 2008 at 6:15 am

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

  4. Mohamed Rias Reply 08. Oct, 2008 at 7:06 am

    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. Mr. I Reply 14. Oct, 2008 at 3:28 am

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

  6. Praveen Reply 30. Oct, 2008 at 11:13 am

    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. deluxe Reply 24. Nov, 2008 at 11:04 pm

    Nice Info… I learned a lot
    http://experiencedelux.blogspot.com/

  8. Shaid Reply 07. Dec, 2008 at 3:01 am

    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

  9. "Patrick Bateman" Reply 10. Jan, 2009 at 3:36 pm

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

  10. Shafar Reply 21. Jan, 2009 at 10:02 am

    Great work dude. Added to my blog!

  11. Markco Reply 26. Jan, 2009 at 11:51 pm

    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!

  12. 300allpctips Reply 27. Jan, 2009 at 10:23 am

    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

  13. RSG Reply 07. Feb, 2009 at 7:49 pm

    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.

  14. taint Reply 09. Feb, 2009 at 1:32 pm

    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

  15. KMc Reply 09. Feb, 2009 at 5:52 pm

    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

  16. adsformoney.info Reply 18. Feb, 2009 at 10:43 pm

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

  17. Fa.Topeng Reply 28. Mar, 2009 at 3:08 am

    oh my God

  18. الـطـالـب Reply 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 :) )

  19. Love4All1080 Reply 08. May, 2009 at 3:05 am

    not work…

  20. koms Reply 18. Jun, 2009 at 4:16 am

    Nice info. useful for me

  21. GAMA Reply 20. Jun, 2009 at 5:39 am

    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 !

  22. Yogesh Reply 28. Jun, 2009 at 3:01 am

    Thanks for Tips
    Its nice !!

  23. Taufiq Hasan Reply 14. Jul, 2009 at 8:25 am

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

  24. adau Reply 15. Aug, 2009 at 6:18 pm

    Just title, no post… :P

  25. Salman Reply 05. Sep, 2009 at 4:39 pm

    Very nice I will try this but very lengthy procedure

    Blogging Tips

  26. Some random guy Reply 24. Sep, 2009 at 1:34 pm

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

  27. fot Dype Reply 23. Oct, 2009 at 11:36 pm

    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

  28. jdsans Reply 17. Jan, 2010 at 1:10 am

    Its a basic related post widget.basic things rock

Blogger Hack, Blogger widget, blogger