Bildiğiniz gibi bloggerda etiketler tek satır halinde ve altalta çıkıyor. Sitenizin etiket sayısı arttıkça çok uzun ve görüntüyü bozan bir tablo çkıyor ortaya. İşte araştırmacı ve geliştirmeci arkadaşlar oturmuşlar ve buna bir çözüm üretmişler. Buldukları kodlar sayesinde Blogger sitenizdeki etiketler aynen wordpress teki gibi çıkıyor.

Bunun için yapmanız gereken aşağıda verdiğim kodları blogger sitenizde html düzenleme bölümünden eklemek.

Eklemeleri yaparken dikkatli olun, unutmayın ki yapacağınız en ufak hatalar tekrar baştan başlamanıza neden olacaktır.

Etiketleri Düzenlemek İçin Yapılacak İşlemler

Şablon->Sayfa Ögeleri kısmına gelin ve “Sayfa Öğesi Ekle”den “Etiketler”i seçip etiket widget’ını ekleyin.Daha önceden eklemişseniz onu kullanabilirsiniz.HTML’yi düzenle kısmına gidin fakat “Widget Şablonlarını Genişlet” kutucuğuna işaret koymayın.Bu, uğraşacağımız şeyleri kolaylaştırır.
Etiket kodu 3 parçadan oluşuyor.Stylesheet ve yapılandırma için birer bölüm, esas widget için de bir bölüm.
Yerleştireceğimiz ilk parça stylesheet bölümü.Aşağıdaki kodun, ]]></b:skin> taglarıyla sınırlandırılmış olan sayfa yerleşimindeki stylesheet içerisine kopyalanıp monte edilmelidir.Bunu yapmanın en kolay yolu kapama tagı olan ]]></b:skin> kodunu aratıp bundan hemen ÖNCE yapıştırmaktır.
İşte, hiçbir değişiklik yapmadan kopyalayıp yapıştırın.Nasıl değişiklik yapılabileceğini sonra açıklayacağım.

/* 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}

Bir sonraki bölüm, bulutu yapılandırma bölümü.Bu da temanın başında fakat stylesheet bölümünün dışında yer alır.Yapılacak en kolay şey yine ]]></b:skin> stylesheet kapama tagını bulmaktır.Fakat bu sefer kodu bu satırdan hemen SONRA, </head> tagından önce yapıştırın.İşte.

<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 widget’ın kendisi.Tema kodunda aşağıya doğru inin sidebar’daki etiket widget’ını bulun.Şunun gibi bir şey olması lazım.

Kod:
<b:widget id=’Label1′ locked=’false’ title=’Labels’ type=’Label’/>
Sıradaki kodu baştan sona kadar kopyalayın ve üstteki satırla yer değiştirtin.

<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>

Şimdi her şey yolundaysa ve daha önceden etiketlediğiniz gönderileriniz varsa bloga önizlemeden bakarsanız bir çeşit Bulut stilini görürsünüz.Gözükmezse bir şeyler yanlış gidiyor demektir.Muhtemelen vazgeçip yeniden denemeniz gerekecek.