BLOGGER ETİKET BULUTU NASIL YAPILIR?

Blogger için etiket bulutu oluşturmak pek de zor bir şey değil. Her zaman dediğim gibi kod bilginiz olmasa bile internet alemindeki çılgın geliştirici arkadaşlarımız sayesinde kopyala+yapıştır mantığıyla bir şeyleri değerli kılmanız günümüzde çok kolay. Etiketleme adına etiket bulutu oluşturmak internet aleminde oldukça popüler. Bu konuda birçok çalışma yapılmış durumda. Ben de bu konu hakkında sizler için bir şeyler ayarladım. Umarım beğenirsiniz.



Eğer aktif değilse Şablon>Şablon Öğeleri kısmına gelip "Widget Ekle" yoluyla Etiketler 'i seçip etkinleştirin. Daha sonra Şablon sekmesine girip Html Düzenle ve Widget Şablonlarını Genişlet yolunu takip ederek şablonunuzun (temanızın) kodları üzerinde oynamaya başlayın.


Etiket bulutu kodunu üç aşamada gerçekleştireceğiz. Bunlardan ilki stilini (stylesheet) oluşturmak, ikincisi yapılandırma ( configuration ) ve üçüncüsü eklenti (widget) yi oluşturmaktır. Aşama aşama gidelim.


Blog kodlamasında stylesheet işlerini <b:skin> koduyla başlayıp ]]></b:skin> koduyla biten kısım üzerinde yaparız. (Temel mantık şu: Bloga koyacağınız ya da kendi yazacağınız kodlamada her zaman için temanın başında yani bu iki kod arasında biçimlendirme işlemi öncelik kazanır. O yüzden bir eklentinin stil özellikleriyle oynamak istiyorsanız bakacağınız yer temanın başı olmalıdır. Ctrl+F kısayolu zaten sizler için epey yardımcıdır.)Dolayısıyla ]]></b:skin> kodundan hemen önce aşağıdaki kodları ekliyoruz;

/* Label Cloud Styles
----------------------------------------------- */
#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}

Stil işini hallettik sayılır. Şimdi sıra yapılandırmada. Bu işlemleri de temanın başında yapacağız ancak buradaki fark stil yerine eklentiyi configura edeceğimiz için yapılandırma işlemini  ]]></b:skin>kodundan sonra ve </head>kodundan hemen önce koyarak gerçekleştirmenizdir. Aşağıdaki kodları da söylediğim kodlar arasına koyun;

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Şimdi son aşamaya girdik. Widgetimizi ekleyeceğiz ama bunu da tema kodları arasında <b:widget id='Label1' locked='false' title='Labels' type='Label'/>kodunu bularak yapacağız. bu kodu silip aynı yere aşağıdaki kodları ekleyin ve işi bitirin.

 <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'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;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 = &quot;<data:label.name/>&quot;;
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] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; 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';
li.style.lineHeight = '1';
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>
<b:include name='quickedit'/>
</div>

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

Kodlar üzerinde dilediğiniz değişikliği yapabilir ve kendi stilinizi etiket bulutunuza yansıtabilirsiniz. Ama hatırlatmamda fayda var, bu işlemleri lütfen temanızı yedekledikten sonra yapın! Aksi halde temanız bozulup eski görünümünden tamamen kaybolmaz, ancak sizi biraz uğraştıracaktır. Hele ki tema kodlarından hiç anlamıyorsanız..


Kolay gelsin :)