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 .

<b:if cond='data:blog.pageType == "item"'>
&lt;div id=&quot;related-posts&quot;&gt;
<h2>Other Recommended Posts</h2>


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

</div></b:if>



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

16 Responses So far
gravatar
The Latino Insurgent
on August 14, 2008 at 7:45 AM  

Your script is exactly what I've been looking for... but its not working for me. Just doesn't list the related posts. I've gone through it a few times and something is not working right. Would appreciate any help.

gravatar
Mohamed Rias
on August 14, 2008 at 9:04 AM  

Hi Latino Insurgent !

send me your template I will upload this hack for you . Or Very soon I will upload a video tutorial for this hack , So wait for some time.

email : mohamedrias1103@gmail.com

regards,
Blogger Accessories

gravatar
The Latino Insurgent
on August 14, 2008 at 3:52 PM  

Thanx Rias, no need anymore. There was a conflict between this hack and another that I had running. Took me a little while to figure it out but all is well now. I appreciate the offer. Good work by the way.

gravatar
weblifer
on August 20, 2008 at 10:18 AM  

my script is also can't work like your demo,
only can seen a lot of labels
thanks for your response

gravatar
PenCuri Kode
on August 22, 2008 at 7:14 AM  

Sorry I could not to hack this one was still requesting his guidance???
i am blog http://kangnoval.com

gravatar
Mohamed Rias
on August 22, 2008 at 9:07 AM  

Hi PenCuri Kode,

Please send me your template code so that i can add this hack in your template for free.

email : mohamedrias1103@gmail.com

regards,
Blogger Accessories

gravatar
Amílcar
on August 22, 2008 at 12:42 PM  

Hi Mohamed,

I suspect there is something wrong with my template.

I followed the first three steps of your tutorial but the related posts are not being listed.

I suspect the problem is with my template because when I insert Adsense adds between posts (via blogger panel), they are accepted but not exibhited as well.

Any Tips?

I just found your blog and it is really excellent.

Thanks!

gravatar
Sheik
on August 22, 2008 at 8:55 PM  

Hi Amilcar ,

I need more informations to help you . Tell me which template your are using . if you send me your template , it will be very useful to check errors. If the XHTML is not valid then also problems occur.

regards.
Blogger Accessories

gravatar
Amílcar
on August 22, 2008 at 9:27 PM  

Hi Sheik,

My template was converted from WP theme. This is my particular template: http://www.direitointegral.com/


Here is where I picked it from: http://templatesparanovoblogger.blogspot.com/2008/08/template-dfmarine-para-blogger.html
(blog and web converted it as well, but this is a different conversion)

And here is the demo blog: http://dfmarine.blogspot.com/

I suspect the problem is with my template because the adsense ads between posts are not showed as well.

I will send the template file to Mohamed Rias email right away.

Please let me know if you need any other information.

Thanks a lot and keep up the good work!

gravatar
Mohamed Rias
on August 24, 2008 at 9:55 AM  

Hi Everyone ,

All those who got error while adding this related posts widget , please see this post. I have explained thoroughly how to add Related Posts Widget on this post.

http://rias-techno-wizard.blogspot.com/2008/08/related-posts-widget-for-blogger-bugs.html

regards,
Blogger Accessories

gravatar
Praveen
on November 8, 2008 at 1:27 AM  
This comment has been removed by the author.
gravatar
Mizwar
on December 29, 2008 at 8:34 AM  

Thanks for the hack....

gravatar
Stu
on March 11, 2009 at 5:43 AM  

Finally got it working on http://resourcebasedliving.blogspot.com using method 2. However, the max-results seems not to be working, it shows 12 when it's set to 5, 9 when it's set to 3 and 5 when it's set to 2.

But I'm happy with it showing 5 so I've set it to 2...

Thanks for this!

gravatar
Stu
on March 11, 2009 at 5:45 AM  

Actually those numbers aren't always the number shown for some reason.

And why is the actual post itself shown in its own Related Blogs list?

gravatar
Uc1l3l3k
on May 17, 2009 at 5:48 PM  

yeah... i can't include on my template, i have an error message..

Earn Money Online

gravatar
Top Pet
on May 24, 2009 at 10:55 PM  

Salam Muhammad...i want this widget..i cant make it..so i need your help...i will send my template code to your email...

Thanks

Post a Comment

Custom Search
Web Analytics