Bloggera (Blogspot) Wordpressteki gibi Etiket Bulutu Eklemek

Blogundaki etiket bulutundan sıkılan ve değiştirmek isteyenler için Wordpress'teki gibi bir etiket bulutu nasıl eklenir aşağıda kısaca anlttık. (Anlattık derken bu yazıyı okuduğum forum'a haksızlık etmeyeleim http://alemforum.net/bloggera-blogspot-wordpressteki-gibi-etiket-bulutu-eklemek.html burada anlatılmış okuduğumu sizlerle paylaşıyorum) Tabii ki bazı şeyleri uygulamadan yazmamak lazım, ben denedim sorunsuz çalıştı, doğru yapabilirseniz sizde çalışacaktır.

Başlamadan önce her zamanki önerimizi tekrarlıyoruz, "ŞABLONUNUZ MUTLAKA YEDEKLEYİN" sorumluluk tamamen size ait.

Maalesef bloggerda etiketler tek satır halinde, alt alta ve basit bir görünümde çıkıyor. Bu görünümü biraz olsun değiştirmek ve daha aktif bir yapı elde etmek istiyorsanız aşağıdaki uygulamayı denemenizi öneririz.

Bunun için yapmamız gereken aşağıda verilen kodları blogger sitenizde html'yi düzenleme bölümünden eklemek.

Şablonunuzda değişiklik yaparken unutmamanız gereken ilk şey yanlış yaptığınız takdirde blogunuza ciddi zarar verebileceğiniz ihtimali, bu yüzden ne yapıyoruz "ŞABLONUMUZDA DEĞİŞİKLİK YAPMADAN ÖNCE YEDEKLİYORUZ" ve dikkatli çalışıyoruz.

Etiketlerimizi Düzenlemek İçin Yapılacak İşlemler:

Şablon -> Sayfa Ögeleri (widget ekle) kısmına gelin ve “Sayfa Öğesi Ekle”den “Etiketler”i seçip etiket widget’ını ekleyin. (zaten bir etiket bölümü ekli ise bunu yapmanıza gerek yok) 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, şekilde çalışmak işimizi biraz daha kolaylaştıracak.

Etiket kodu 3 parçadan oluşuyor.

Stylesheet içib bir bölüm
Yapılandırma için bir bölüm
Esas widget için de bir bölüm

Yerleştireceğimiz ilk parça stylesheet bölümü olacak.

Aşağıda verdiğimiz kod, ]]> 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 ]]> kodunu aratıp (browserımızdaki aratma özelliği genelde Ctrl + F tuşlarına birlikte basınca açılır) bundan hemen ÖNCE yapıştırmaktır.

İşte, hiçbir değişiklik yapmadan kopyalayıp yapıştırın.

/* 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 ]]> stylesheet kapama tagını bulmaktır.(Ctrl +F müracaat edebilirsiniz) Fakat bu sefer kodu bu satırdan hemen SONRA, </head> tagından önce yapıştırın.

<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 de widget’ın kendisi.Tema kodunda aşağıya doğru inin sidebar’daki etiket widget’ını bulun. (Eski dost Ctrl + F sizi bekliyor) Şunun gibi bir şey olması lazım.

Kod:

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>

Yukarıda verdiğimiz son kod bloğunun hemen başında yer alan (title='Label Cloud') kısmını türkçe yapmak isterseniz Label Cloud cümlesini Etiket Bulutu olarak değiştirmeniz yetecektir.