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.




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

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

  1. 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.

  2. 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

  3. 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.

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

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

  6. 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

  7. 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!

  8. 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

  9. 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!

  10. 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

  11. Thanks for the hack….

  12. 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!

  13. 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?

  14. yeah… i can’t include on my template, i have an error message..

    Earn Money Online

  15. 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

  16. Hey, I tried this, and it works great, except it’s showing “No related posts found” on some posts. But I know that there are other posts under the same labels of those posts.

    This also happened when I tried RealTrix’s hack, on the exact same posts.

    Why is this? Is there any way to fix it?

  17. Wait, nevermind, I just realized I hadnt removed his hack from my template. Now I have, and it’s not working at all???

  18. rias,what happened to your website? where is the download link to this template? where is all those comments?

Leave a Reply

You must be logged in to post a comment.