Monday, March 19, 2012

ப்ளாக்கர் : புதுமையான 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------------->

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

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

10 comments:

  1. வித்தியாசமான பயனுள்ள பதிவு ! நன்றி நண்பரே !

    ReplyDelete
  2. அருமையான பதிவு.
    வாழ்த்துகள்.

    ReplyDelete
  3. தேவையான பதிவு நண்பா.

    ReplyDelete
  4. பயனுள்ள தகவல்.....பகிர்வுக்கு நன்றி தோழா,,

    ReplyDelete
  5. நண்பா அருமையான பதிவு நன்றி...முதலாவதாக கொடுத்துள்ள codeing எங்கு பேஸ்ட் செய்வது...

    ReplyDelete
  6. @ R.CHINNAMALAI said..

    முதல் கோடிங் -க்கு முன்னால் இருக்கிறது பாருங்கள்

    ReplyDelete
  7. எழுத்தின் அளவை சிரியதாக்குவதட்க்கு ஏதாவது வழி இருக்கா நண்பா? எழுத்து ரெம்ப பெரிசா உள்ளதால் தலைப்பு சரியாக விளங்குது இல்ல அரை வாசி மறைந்து விடுத்தது எழுத்தை சிறியதாக்க வழி சொல்லுங்கள் http"//farhanforyou.blogspot.com

    ReplyDelete
  8. farhan said...

    நண்பா நீங்கள் கீழே உள்ள கோடிங்கை கண்டறிந்து

    அதை அழித்து விட்டால் உங்கள் பதிவின் தலைப்பு தெளிவாக தெரியும்

    .post_bg {
    background: url(http://2.bp.blogspot.com/-SXT-pQvfC-Y/T005NURkjVI/AAAAAAAACCI/ec8jF9toB_w/s000/post_bg.png) center 60px repeat-y;
    }
    .post_top {
    background: url(http://3.bp.blogspot.com/-TKX0ONhJgGA/T005Nbu-F_I/AAAAAAAACCQ/8ZLQ0gXsBAQ/s000/post_top.png) center top no-repeat;
    }
    .post_bottom {
    background: url(http://2.bp.blogspot.com/-cYffJSu6FtY/T005NqCUpMI/AAAAAAAACCY/bO24LnrR7s8/s000/post_bottom.png) center top no-repeat;
    height: 57px;
    }

    மேலும் விவரங்களை பெற

    என்னை தொடர்பு கொள்ளவும்

    Contact me

    ReplyDelete
  9. இந்த ரிலேடட் போஸ்ட் விட்கேட் இன் எழுத்து மிகவும் பெரியதாக இருக்கிறது. இ இதனை சிறியதாக்குவது எப்படி நண்பா?கூறுங்களேன்

    ReplyDelete
  10. என்னை தொடர்பு கொள்ளுங்கள் உங்களுக்கு கோடிங்கை(Font சிறிதாக மாற்ற ) அனுப்பி வைக்கிறேன் ..

    ReplyDelete