Jun 27, 2008 in ,

Related Posts hack For Blogger includes custom 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 && 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 , etcI hope you liked this related posts widget , see you soon with another widget or hack.

Check Out This Popular Posts

4 Responses So far
gravatar
subagya
on July 31, 2008 at 8:22 PM  

NIce info,

I will try it in my blog.
keep post dude

gravatar
阿厝
on August 24, 2008 at 7:54 AM  

Hi,i just follow your 1 to 3 steps(without css).But my blog didn't show up the effect after changing the code.

Could you help me with my problem?

Cheers
Tsai

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

I have written an article on this topic , please update the code from this post

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

gravatar
The sword
on January 14, 2009 at 4:17 PM  

nice blog thanxxxx
http://egyphoto.blogspot.com/

Post a Comment

Custom Search
Web Analytics