Advanced Search Module

Close Search
 

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{
c
ol
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.

Related posts:

  1. Add yahoo Smileys on Blogger Posts – Blogger hack
  2. Social Bookmarking widget for blogger
 
 

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

  • danzyworld September 23, 20081:24 pm

    xan you tell me how to post related post by labels

    http://danzyworld.blogspot.com

  • Blogger September 23, 20085:36 pm

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

  • dcloud October 8, 20081:15 pm

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

  • Mohamed Rias October 8, 20082:06 pm

    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

  • Mr. I October 14, 200810:28 am

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

  • Praveen October 30, 20086:13 pm

    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.

  • deluxe November 25, 20086:04 am

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

  • Shaid December 7, 200810: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

  • "Patrick Bateman" January 10, 200910:36 pm

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

  • Shafar January 21, 20095:02 pm

    Great work dude. Added to my blog!

    Tips Blogger dot Com

  • Markco January 27, 20096:51 am

    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!

  • 300allpctips January 27, 20095:23 pm

    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

  • RSG February 8, 20092:49 am

    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.

  • taint February 9, 20098: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

  • KMc February 10, 200912:52 am

    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

  • adsformoney.info February 19, 20095:43 am

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

  • Fa.Topeng March 28, 200910:08 am

    oh my God

  • ????????? April 23, 20096:03 pm

    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 :) )

  • Love4All1080 May 8, 200910:05 am

    not work…

 
 

19 Responses to "Related Posts Widget For Blogger with CSS"