ब्लोगर होस्टेड ब्लोगस में वर्डप्रेस जैसा टैग (लेबल) क्लाउड कैसे बनायें

अगर आप अपने ब्लोग में लेबलस को लंबी लिस्ट के बजाय टैग क्लाउड की तरह देखना चाहते हैं तो ये पोस्ट समझ लीजिये आपके लिये ही है।

टैग क्लाउड बनाने के दो आसान तरीके हैं, पहला किसी दूसरे का बनाया हुआ विजेट उपयोग में लाया जाय और दूसरा अपने टैंपलेट के कोड में बदलाव किया जाय।

टैक्नोरेटि विजेट
पहला तरीका दूसरे वाले से आसान है लेकिन इस तरीके के लिये आपका ब्लोग टैक्नोरेटि की साईड में Add होना चाहिये, और दूसरा ये ब्लोगर के लेबल को नही दिखाता है। अगर आपका ब्लोग टैक्नोरेटि में जुड़ा है और आप इसी के टैग इस्तेमाल करते हैं तो आप इसे इस्तेमाल कर सकते हैं। अन्यथा दूसरे वाला तरीका इस्तेमाल करके टैग क्लाउडस बना सकते हैं।

आसान वाले तरीके के लिये आप टैक्नोरेटि का बनाया विजेट ईस्तेमाल कर सकते हैं, इसे प्रयोग में लाने के लिये नीचे दिये कोड को अपने ब्लोग के जावास्क्रिप (HTML/JavaScript) वाले विजेट में कापी करें और फिर {URL} की जगह पर अपने ब्लोग का लिंक दे दें।

<script src="http://widgets.technorati.com/t.js" type="text/javascript"></script>
       <a href="http://technorati.com/blogs/{URL}?sub=tr_tagcloud_t_ns" class="tr_tagcloud_t_js" style="color:#4261DF">View blog top tags</a>

कुछ समय बाद आपको अपने ब्लोग में भी टैग क्लाउड दिखने लगेंगे। चाहें तो नीचे दिये गये फार्म का इस्तेमाल करके भी लगा सकते हैं -

ब्लोगर लेबल विजेट में बदलाव करके
ये तरीका भी आसान है, बस आपको कापी पेस्ट करना है टैंपलेट के कोड में। सबसे पहला और जरूरी काम है टैंपलेट का बैकअप, तो उसे ले लें। उसके बाद अपने ब्लोगर के ब्लोग में Layout>Page Elements पेज में जाकर एक Labels Widget को Add कर लें। पूछे जाने पर Alphabetically sort का आप्शन सलेक्ट करें। (अगर आपके ब्लोग में पहले से ही लेबल दिखाने के लिये ये विजेट लगा है तो आपको ये करने की जरूरत नही)।

इसके बाद टैंपलेट बदलाव के लिये Layout>Edit Html पर क्लिक करें लेकिन ध्यान रखें और expand the widget templates सलेक्ट ना करें। इससे कुछ होगा नही बस आपको लेबल का कोड ज्यादा कोड के बीच ढूँढना पड़ेगा।

अब अपने टैंपलेट के कोड में नीचे दिया गया लेबल विजेट का कोड ढूँढें (टिपः अगर आप इस लेबल को जोड़ रहे हैं तो इसके नाम में ऐसा कुछ दें जिसे आसानी से ढूँढ सकें जैसे “Look this for tag cloud”, उसके बाद टैंपलेट के कोड में इसी को ढूँढें)

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

अब इस एक लाईन के कोड को नीचे दिये गये कोड से बदल लें,

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>

</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<p align='center'>
<script type='text/javascript'>
var cloudMin = 1;
var maxFontSize = 25;
var maxColor = [0,255,0];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
// Don’t change anything past this point —————–
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array(); 
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
} 
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';

a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul); 
</script>


<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>

</b:loop>
</ul>

</noscript>
<br/><small>विजेट सौजन्य से:<a href='http://www.bloggerplugins.org'>Blogger Widgets</a>,मार्फत <a href='http://www.readers-cafe.net/controlpanel/2009/04/13/how-to-add-wordpress-style-tag-label-clouds-in-bloggers-blog/'>कंट्रोल पैनल</a></small>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

अब इसको थोड़ा श्रृंगार की जरूरत है उसके लिये टैंपलेट के कोड में नीचे दी गई लाईन ढूँढें।

]]></b:skin>

ऊपर दी गई लाईन मिलने पर, इस लाईन को नीचे दिये गये कोड से बदल लें (replace)।

#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
]]></b:skin>

अब इसे save कर लें, (टिपः अगर आपने Expand वाला बॉक्स सलेक्ट नही किया है तो आपको ऊपर दिया गया सारा कोड नजर नही आयेगा)। अब ब्लोग में जाकर अपने इस नये लेबल क्लाउड का नजारा देखें।

अगर कोई समस्या आये तो संपर्क कीजिये, मदद की हर संभव कोशिश की जायेगी।