Blogger (Blogspot) İçin Etiket Bulutu Oluşturmak

Hemen söylemek lazım ki, Etiket Bulutu'nun orijinal yazısını hazırlayan phydeaux, şurada işi güzel ve basitçe anlatmış. Oradan uygulayıp, kolayca siteme ekleyebildiğim için, ben de yazıyı tercüme edip basitçe anlatmaya çalışacağım.

Başlıyoruz...

Öncelikle hiçbirşeye dokunmadan her ihtimale karşı blogunuzun yedeğini alın ki ters birşey olursa tekrar eski haline geri dönebilesiniz. (Yerleşim=>HTML'yi Düzenle=>Tam Şablonu Yükle)

Şimdi HTML üzerinde 3 parçalık kod ekleyeceğiz. Ama bundan önce blogunuzda zaten bir "Etiket" öğesinin bulunması gerekiyor. Yoksa ekleyin. "Widget Şablonlarını Genişlet" bölümü kapalı haldeyken operasyona geçiyoruz.

Evvela,

]]></b:skin> kodunu bulun ve öncesine Kod 1 dosyasındaki kodları yapıştırın.

Yine,

]]></b:skin> kodunu bulup bu sefer sonrasına Kod 2 dosyasındaki kodları yapıştırın. Ama </head> kısmından önce olmalı dikkat edin.

Yani kısaca özetlemek gerekirse şöyle bir kronoloji olacak:

KOD 1

]]></b:skin>

KOD 2

</head>

Şimdi de Etiket öğemiz üzerinde değişiklik yapacağız. Bunun için,

<b:widget id="Label1" title="Labels" type="Label" locked="false"></b:widget>

satırını bulmalısınız. title='Labels' değişik olabilir. (Etiketler, Kategoriler, ne isim vermişseniz...)

Bu satırı da bulduktan sonra, bulduğumuzu satır da dahil olmak üzere silip, Kod 3'teki kodları aynen yerine kopyalıyoruz.

Hepsi bu kadar. Şimdi kaydedip, blogunuzu görüntüleyebilirsiniz. 2 tane bilinen sorun var yaptığımız kodlarla ilgili. Bunlardan biri 1'den fazla yazıya sahip hiç etiketinizin henüz olmaması. Yani 2, 3 yazılı etiketleriniz varsa dert etmeyin. Diğer bir sorun da etiketlerin tırnak işareti (") içeriyor olması.

Peki herşey tamam ama blogunuzun temasına göre renk değişiklikleri veya ayarlamaları nasıl yapacaksınız?

Tabii ki yapıştırdığımız kodlar içerisinde hepsini ayarlayan bölümler var. Bunları yazalım:

var cloudMin= 1;

Bir etiketin gözükmesi için gerekli asgari mesaj sayısı. Eğer tüm etiketlerin gözükmesini istiyorsanız 1'de bırakın. Örneğin, etiketlerin 3 yazıya sahip olduktan sonra gözükmesini istiyorsanız, 3 yapmalısınız.

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;

İşte bu bölümler etiketlerin yazı büyüklüklerinin en küçük ve en büyük halleriyle, renk aralığını belirlediğimiz yer. En büyük yazı için maxFontSize, en küçük yazı için minFontSize, renk ayarlamaları için de maxColor ve minColor üzerinde oynamalar yapabilirsiniz. Renklerin kodlarını bilmiyorsanız buradan veya şuradan yardım alabilirsiniz. Dikkat edilmesi gereken bir nokta, renkleri yukarıda olduğu gibi [x,x,x] formatında yazmalısınız.

var lcShowCount = false;

Kısmına gelelim. Bulutunuzdaki etiketlerin kaç yazıya sahip olduğunun görünmesini istiyorsanız = true yapın, istemiyorsanız = false kalmalı.

#labelCloud {text-align:center;font-family:arial,sans-serif;}

Bölümünden buluttaki etiketlerin yazı tipleriyle oynayabilirsiniz.

#labelCloud .label-count

Satırı ile de eğer yazı sayısını açtıysanız, sayıların görünüşüyle oynamalar yapabilirsiniz.

Tebrik ederim, artık blogunuzun bir Etiket Bulutu var. Yapanların veya yapamayanların görüşlerini, yorumlarını bekliyorum. Unutmadan .txt halinde verdiğim kod (Kod 1, 2, 3) dosyalarını IE'de açtığınızda boş bir ekranla karşılaşabilirsiniz, bunun için dosyaları hedefi farklı kaydet diyerek indirip görüntüleyin veya açılan boş ekrandan kaynağı görüntüleyin.

Eğer bu yazıyı beğendiyseniz, altugkoc.com'un e-posta abonesi olun ve yeni yayınlanan yazılar e-postanıza gelsin! Veya yazıları RSS bağlantısıyla takip edin!