Ş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.
taglarıyla sınırlandırılmış olan stylesheet içerisine kopyalanıp eklenmelidir.Bunu yapmanın en kolay yolu kapama tagı olan
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.
<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>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';
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.
Muhtemelen etiket bulutu, varsayılan ayarlarıyla tam istediğiniz gibi olmayacaktır.Fakat tüm renler ve boyutlar zevkinize göre yapılandırılabilir.Önizlemede etiket bulutu görünüyorsa değişkenlerden bazılarını uyumlu hale getirmeye başlayabilirsiniz.
Değişikliklerin çoğunu "Variables" bölümünde yapacaksınız.Burda her ayarın ne işe yaradığını anlatacağım.
var cloudMin= 1;
Bu ayarla gösterilen etiket sayısını sınırlandırabilirsiniz(mesela çok fazla etiketiniz varsa).Tüm etiketleri göstermek için bu rakamı "1" olarak bırakın.Daha büyük bir sayı girerseniz en az o rakam kadar yazıda yer alan etiketler bulutta gözükecektir.
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
"maxFontSize" ve "maxColor" satırları tahmin ettiğiniz işe yarıyor.İlki, en çok gönderide(yazıda) kullanılan etiketin boyutunu piksel cinsinden ayarlıyor."maxColor" da bunun rengini belirler.
Sıradaki ikili
minFontSize
minColor
Bunlar da en az gönderide yer alan etiketler için.Boyut yine piksel, renk de RGB formatında.
Bu ikisi arasındaki etiketler, sayısının kaç olduğuna ve gönderi sayısının azalan sıralamasına göre reklerini/boyutlarını bulacaklar.
ÖNEMLİ:Renk ayarlarını değiştirdiğinizde, onları sağlanan formatta tutunuz.[] arasında ve virgüllerle ayrılmış olarak.Varsayılan renkler maksimum için mavi, minimum için siyahtır.Herhangi bir geçerli RGB kombinasyonunu kullanabilirsiniz.RGB renklerinin ne olduğunu bilmiyorsanız endişe etmeyin.Sadece bir renk tanımlama yoludur.Denemek istediğiniz renk için doğru RGB değerini bulmak için internetteki birçok tabloyu kullanabilirsiniz.
RGB Renk Kodu Tablosu
İsterseniz bulutta kullanılan fontları değiştirebilirsiniz."text-align" ifadesi de değiştirilebilir.Onu varsayılan olarak center(merkez) yaptım ama şunları da kullanabilirsiniz:
text-align:justify;
text-align:right;
text-align:left;
Aralarındaki uyumu sağlayabildiyseniz diğer satır:
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
CSS tutkunu değilseniz bu satırın çoğunu dert etmeyin.Gerçek öneme sahip olan sadece birincisi;
"display:inline;".Ağırlıklı etiketleri 'düz'(her etiket ayrı bir satırda) liste haline getirmek için bunu "display:block;" olarak değiştirebilirsiniz.Genelde bu "block" olarak ayarlanmıştır.Sınıflandırma sırasını alfabetikten sıklığa(sayıya) değiştirmek isteyebilirsiniz.BunuBlogger'daki Sayfa Öğeleri kısmından düzenleyerek yapabilirsiniz.
