Related Posts Widget For Blogger with CSS

26. Jun, 2008 18 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.


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.

   

- has written 98 posts on Techie Blogger


Visit Authors Website  |  All Articles From This Author
0
hits

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

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

  1. The Latino Insurgent 14. Aug, 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.

  2. Mohamed Rias 14. Aug, 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

  3. The Latino Insurgent 14. Aug, 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.

  4. weblifer 20. Aug, 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

  5. PenCuri Kode 22. Aug, 2008 at 7:14 am

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

  6. Mohamed Rias 22. Aug, 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

  7. Amílcar 22. Aug, 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!

  8. Sheik 22. Aug, 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

  9. Amílcar 22. Aug, 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!

  10. Mohamed Rias 24. Aug, 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

  11. Mizwar 29. Dec, 2008 at 9:34 am

    Thanks for the hack….

  12. Stu 11. Mar, 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!

  13. Stu 11. Mar, 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?

  14. Uc1l3l3k 17. May, 2009 at 5:48 pm

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

    Earn Money Online

  15. Top Pet 24. May, 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

  16. Catherine 07. Jul, 2009 at 4:53 pm

    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. Catherine 07. Jul, 2009 at 5:14 pm

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

  18. king 23. Jul, 2009 at 4:27 am

    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.

Blogger Hack, blogger tutorials, Blogger widget