Bloggerda Açıklamalı Etiket Bulutu Yapmak

Merhaba okuyucular. Yine bir Blogger İpucu ile karşınızdayız !Uzun zamandır kaynak kodlarını araştırmakla yetinip nasıl olacağını bilemediğim bir eklentiyi artık blogumda sizlerinde görmüş olduğu gibi kullanmaktayım. Çözümü ise 2007 yılından beri moderatörlüğünü yaptığım Bilişim Rüzgarı Forumu'ndan arkadaşım elektr10'nun blogunda buldum. Uzun zamandır aramamın sebebi ise bulutun üstüne geldiğinizde kaç yazı olduğunu bir title ile göstermesi.Ve birde bu bulutu çekici kılan ok işaretinin yapılabiliniyor olması. Uzun uzadıya anlatmaya gerek yok gayet hoş ve açıklamalı bir eklenti. Ben çok aradığımdan olsa gerek şimdi bu yazıyı mutlulukla anlatıyorum sizlere. Her neyse "Laf olsun,torba dolsun" hesabı değil de "Az ama öz" olsun prensibiyle hazırsak eklentinin nasıl yapıldığına geçelim:
Öncelikle blogunuzda Etiket gadgeti yoksa hemen Şablon->Sayfa Ögeleri kısmına gelin ve “Sayfa Öğesi Ekle”den “Etiketler”i seçip etiket gadget'ını ekleyin. Eğer varsa da daha önceden etiket gadgetiniz ve siz bu etiket ismini atıyorum "Havada Bulut,Sen bunu unut" şeklinde kendinize göre düzenlediyseniz bu kısım önemli birazdan anlatacağım kod ile ilgili. Birde arkadaşlar bu eklentiyi yaparken “Widget Şablonlarını Genişlet” kısmını aktif hale getirmeyeceğiz. Şimdi önce CSS kodlarını </b:skin> kodundan önce ekliyoruz:

/* Etiket Bulutu Stil Kodları
----------------------------------------------- */
#labelCloud {text-align:center;font-family:Trebuchet MS;}
#labelCloud .label-cloud li{display:inline;}
#labelCloud ul li {list-style: none; background: url(http://konfor.enesilhan.net/tema/style/okk.gif) no-repeat left center !important; padding-left: 20px;}
!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:-1.1em;font-size:5px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Şimdi de </head> kodundan önce şu kodları ekliyoruz:

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [41,126,185];
var minFontSize = 5;
var minColor = [41,126,185];
var lcShowCount = false;
</script>

Bu kısımda temanıza göre renk seçimi tanımlayabilirsiniz. Yukarıdaki kodda [41,126,185] RGB kodunu değiştirebilirsiniz. Vereceğim adres ile örneğin; #000000 siyah renk kodunu RGB'ye dönüştürebileceksiniz. Bu sayfadan istediğiniz renk kodunu RGB'ye çevirip kodlarını yukarıdaki rgb koduyla değiştirebilirsiniz.

Daha sonra "HTML'yi Düzenle" kısmında şöyle bir kod satırını bulacağız:

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

Demin yukarıda dediğim etiketler kısmı burası ile alâkalı arkadaşlar. Etiketin ismini farklı bir şey yaptıysanız yukarıdaki kod satırında title ile belirtilen Etiketler kısmını değiştirdiğiniz ad ile aratacaksınız. Eğer değiştirmediyseniz yukarıdaki kod satırını muhtemelen bulacaksınız. Hıh işte bu kodu bulduysanız bu kodun hepsini seçili hale getirip yerine şu kodları ekliyoruz:

<b:widget id='Label1' locked='false' title='Havada Bulut Sen Bunu Yapmayı Unut :)' 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>

Şimdi Önizleme yapıyoruz ve bir hata vermiyorsa başarmışsınız demektir. Olmazsa korkarım ki yeniden denemeniz gerekecek ! Bir eklentinin daha sonuna geldik, başka eklentilerle görüşmek üzere.. Sormak istediğiniz veya yapamadığınız yer olursa İnternetim kapanmadan elimden geldiğince yardımcı olmak isterim, hepinize kolay gelsin..