ப்ளாக்கர் : புதுமையான Related Post Widget

பிளாக்கர் தளத்தில் பலரும் பல தொடர்புடைய இடுகைகள் பக்க உறுப்பை பார்திருப்பீர்கள் . ஒரு பதிவை படிக்கும் போது அந்த பதிவு தொடர்பான இடுகைகளை காண்பிப்பது தான் தொடர்புடைய இடுகைகள் பக்க உறுப்பு (Related Post Widget ) ... படத்துடன் கூடிய தொடர்புடைய இடுகைகள் ... படம் இல்லாமல் உள்ள Related Post widget போன்ற வற்றை பார்த்திருப்போம் ...

இன்று நாம் பார்க்க போகும் Related Post widget கொஞ்சம் வித்தியாசமான முறையில் உருவாக்கப் பட்டது ...

நீங்கள் ஒவ்வொரு முறை பதிவிடும் போதும் Labels என்ற பகுதியில் பதிவுகளுக்கேற்ற குறிச்சொற்களை பயன்படுத்துங்கள். அப்படி குறிச்சொற்களை பயன்படுத்தியிருந்தால் தான் இது பயனளிக்கும்.

அந்த விட்ஜெட் -ஐ கொண்டு வர நாம் செய்ய வேண்டியது :

என்பதை தேடி அதற்கு முன்னால்

கீழே வரும் கோடிங்கை PASTE செய்யவும் ...

]]></b:skin>

#related-posts{float:left}
#related-posts h2{background: none repeat scroll 0 0 transparent;
color: #666666;
font-size: 14px;
text-align: left;
}
#related-posts ul{margin:5px 0;width:524px;padding:0;list-style-type:none}
#related-posts ul li{position:relative;float:left;border:0 none;margin-right:18px;width:76px}
#related-posts ul li:hover{z-index:98}
#related-posts ul li:hover img{border:3px solid #BBB}
#related-posts ul li:hover div{position:absolute;top:40px;left:10px;margin-left:0;width:200px}
#related-posts ul li img{border:3px solid #DDD;width:70px;height:70px;background:#FFF}
#related-posts ul li div{position:absolute;z-index:99;margin-left:-999em}
#related-posts ul li .title{border:1px solid #CCC;background:#FFF;padding:5px 10px}

2. <data:post.body/> (இதற்கு பின்னால் )

அல்லது

<div class='post-footer'> (இதற்கு முன்னால் )

என்பதை தேடி அதற்கு பின்னால் கீழே வரும் கோடிங்கை PASTE செய்யவும்

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both'/>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h2>Related Posts</h2>&#39;;rn=&#39;<h2>No Related Posts</h2>&#39;;rcomment=&#39;Comment&#39;;rdisable=&#39;Comment off&#39;;commentYN=&#39;yes&#39;;</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><a href="'+urls[c]+'" rel="nofollow"><h3>'+titles[c]+'</h3></a><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div style='clear:both'/>
</b:if>

SAVE TEMPLATE அல்லது PREVIEW

பார்த்து SAVE செய்யவும் ...

சரி எப்படி இருக்கும் இந்த விட்ஜெட் :

<----------DEMO ------DEMO--------DEMO------------->

இங்கே செல்லவும்

படங்களை தொட்டு பார்க்கவும்

சந்தேகம் இருந்தால் கேட்கலாம் ... சமூக தளங்களில் பகிர்ந்து கொள்ளுங்கள்


நன்றி....