Jun 25, 2008 in ,

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{
color:#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.

Check Out This Popular Posts

19 Responses So far
gravatar
danzyworld
on September 23, 2008 at 6:24 AM  

xan you tell me how to post related post by labels

http://danzyworld.blogspot.com

gravatar
Blogger
on September 23, 2008 at 10:36 AM  

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

gravatar
dcloud
on October 8, 2008 at 6:15 AM  

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

gravatar
Mohamed Rias
on October 8, 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

gravatar
Mr. I
on October 14, 2008 at 3:28 AM  

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

gravatar
Praveen
on October 30, 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.

gravatar
deluxe
on November 24, 2008 at 10:04 PM  

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

gravatar
Shaid
on December 7, 2008 at 2: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

gravatar
"Patrick Bateman"
on January 10, 2009 at 2:36 PM  

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

gravatar
Shafar
on January 21, 2009 at 9:02 AM  

Great work dude. Added to my blog!

Tips Blogger dot Com

gravatar
Markco
on January 26, 2009 at 10: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!

gravatar
300allpctips
on January 27, 2009 at 9: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

gravatar
RSG
on February 7, 2009 at 6: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.

gravatar
taint
on February 9, 2009 at 12: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

gravatar
KMc
on February 9, 2009 at 4: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

gravatar
adsformoney.info
on February 18, 2009 at 9:43 PM  

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

gravatar
Fa.Topeng
on March 28, 2009 at 3:08 AM  

oh my God

gravatar
الـطـالـب
on April 23, 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 :) )

gravatar
Love4All1080
on May 8, 2009 at 3:05 AM  

not work...

Post a Comment

Custom Search
Web Analytics