Blogger’da etiket bulutu göstermek

Etiketlerin en güzel özelliği her hangi bir sınıra sahip olmamalarıdır, kategori mantığının tersine bir yazı, birden fazla etikete sahip olabilir, o yazı için yeni etiketler eklenebilir. Etiketler ayrıca arama sırasında da oldukça yardımcı olurlar, kullanıcı, ilgisini çekecek yazılara etiketler aracılığıyla daha kolay erişebilir.

bulut-resim

Ancak blogunuzdaki etiket sayısı arttıkça bunları düz bir liste ile göstermek pek kullanışlı olmaz ayrıca yazı yazdıkça göreceksiniz ki bazı etiketleri daha sık kullanırsınız bazılarını ise daha az (belki 1 kere…) Bu durumda yapılabilecek en iyi şey, etiketlerinizi bir “bulut şeklinde göstermektir ki biz buna “etiket bulutu” diyoruz! Bunu blogger/blogspot bloglarında nasıl yapacağınız ise bu yazıda…

Adım 1

(Eğer blogunuzda etiketler zaten listeleniyorsa bu adımı atlayınız.)

Şu anda blogumuzda etiketler listelenmiyorsa blogger kontrol paneline gidiyoruz, “şablon”a tıklıyoruz, karşımıza gelen ekrandan “sayfa ögesi ekle” bağlantısına tıklıyoruz. Karşımıza gelen yeni pencereden blogumuza etiket gösterme seçeneğini ekliyoruz. Artık blogumuzda etiketler gösterilir durumda. (normal liste şeklinde)

Adım 2

Blogger şablon düzenleme panelinden “HTML düzenle” bağlantısına tıklıyoruz ve “widget şablonlarını genişlet” seçeneği seçili değilse onu seçili hale getiriyoruz.

Adım 3

Şablonumuzun kodları arasından şu kodu buluyoruz:

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

Muhtemelen sonlara doğru olmalı. Bunu bulmak biraz zamanınızı alabilir, pes etmeyin!

Adım 4

Yukarıda bulduğumuz kod bölümünü siliyoruz ve yerine aşağıdaki kodu yapıştırıyoruz:

<b:widget id='TagCloud' locked='false' title='Etiketler' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
  <h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
 <script type="text/javascript">
/*
Blogger için Etiket Bulutu eklentisi
Hazırlayan: Raymond May Jr.
Sitesi: http://www.compender.com
Not: Released to the Public Domain
Türkçe olarak kullanıma sunan: İsa Engiz
Sitesi: http://www.koodla.com/
*/
 
/* ****************************************************************************************
Start: Bu bolumu isteginize göre degistiriniz */
var max = 150; //maksimum css boyutu (yüzde olarak)
var min = 50; //minimum css boyutu (yüzde olarak)
var showCount = 1;  // Etiket yaninda o etikete sahip yazi sayisi gösterilsin mi? (evet = 1)
var minCount = 1;  // Bir etiketin gösterilmesi için gereken minimum deger (hepsi = 1)
/* end: degistirilebilir bolum
*************************************************************************************** */
 
//kod baslangici
var range = max - min;
 
//etiket bulutunun diziye yüklenmesi
var labels = new Array();
 <b:loop values='data:labels' var='label'>
   labels.push("<data:label.name/>");
 </b:loop>
 
//adreslerin diziye yüklenmesi
var urls = new Array();
 <b:loop values='data:labels' var='label'>
   urls.push("<data:label.url/>");
 </b:loop>
 
//etiketin sayisi
var counts = new Array();
 <b:loop values='data:labels' var='label'>
   counts.push("<data:label.count/>");
 </b:loop>
 
//siralama fonksiyonu (kucukten buyuge)
function sortNumber(a, b)
{
 return b - a;
}
 
//Make an independant copy of counts for sorting
var sorted = counts.slice();
 
//En cok tekrarlanan etiketi bul
var most = sorted.sort(sortNumber)[0];
 
//HTML ciktisi basşangici
for (x in labels)
{
 if(x != "peek" &amp;&amp; x != "forEach" &amp;&amp; counts[x] >= minCount)
 {
  //textSize hesaplanmasi
  var textSize = min + Math.floor((counts[x]/most) * range);
  //etiket sayisi gösterilsin mi?
  if(showCount == 1)
  {
   var count = "(" + counts[x] + ")";
  }else{
   var count = "";
  }
  //cikti
  document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "'>" + labels[x] + count + "</a></span> " );
 }
}
</script>
</div>
</b:includable>
</b:widget>

Opsiyonel adım 5

Şu anda blogunuza baktığınızda bir etiket bulutunu görüyor olmanız lazım. Eğer bulutun içerisindeki etiketlerin font büyüklüğünden ya da küçüklüğünden şikayetçiyseniz, kodun içerisindeki değiştirilebilir alanları değiştirebilirsiniz. Bunun için yapmanız gerekenleri kodun içerisine yorum olarak ekledim. Ayrıca o bölümden bir etiketin gösterilmesi için gereken alt limiti veya o etikete sahip yazı sayısının etiketin yanında parantez içerisinde gösterilip gösterilemeyeceğini de ayarlayabilirsiniz.

Sonuç

Bu eklentiyi hazırlayan geliştirici ise Raymond May Jr. Web sitesi ise http://www.compender.com Benim yaptığım ise başlığı ve yorumları Türkçeleştirip, kullanıcının değiştirebileceği alanları biraz daha öne çıkarmak oldu.

İyi günlerde kullanın!

Not:
Resim, wikipedia dan alınmıştır.

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!

Blogger’da etiket bulutu göstermek yazısına 9 Yorum yapılmış.

  • faruk 14 Mayıs 2008, 07:35

    Güzel anlatmışsınız, teşekkürler. Benm ilgi alanım olmasa da bloggercılar için faydalı olur, bloggercılar için zaten güzel yazılar var burada, umarım zamanla artar :)

  • ComeBack 25 Temmuz 2008, 12:39

    Peki şu yazımızdaki etiketleri nasıl sileceğiz her yazının altında labels filan var.

  • ComeBack 25 Temmuz 2008, 12:48

    çok sinir bozucu da şu labellar

  • hüseyin 30 Eylül 2008, 00:55

    blogger’da kontrol panelinde yerleşim var.. yerleşim de blog yazıları kısmını düzenlerken etiketler kutucuğundaki işareti kaldırın etiketler gider.. labels yani..

    bu arada kategori bulutu için tşkler.. çok işe yaradı

  • mirc 09 Ocak 2009, 11:33

    tskler..

  • gamze 23 Ocak 2009, 13:01

    teşekkürler sağolun.
    bloğumda uyguladım
    sizin sitenizi kaynak göstererek yazınızı bloğuma ekleyebilir miyim?

    iyi günler

  • Senay 02 Mart 2009, 16:19

    Lütfen aşağıdaki hatayı düzeltin ve şablonunuzu tekrar gönderin.
    Yeni widget kimliği “TagCloud” şu tür için geçersiz: Label

    Bu hatayı verıp durdu :( olmadı

  • mirckeyfi 07 Mart 2009, 00:51

    biraz kafa kariştirici :)

  • meraklı 04 Haziran 2009, 17:25

    verdiğiniz kodu aynen yapıştırıp değişiklikleri kaydettim ama anasayfa çıkan etiketler alt alta sıralanıyor ve çok uzunnn :’(

Arama


E-Posta Aboneliği


RSS Aboneliği

En Çok Yorumlanan Yazılar

Etiketler

404 ajax apache arama butonu as astrofizik açık kaynak banner blogger blogger/blogspot Blogger / Blogspot blogspot case chmod css date dosya yükleme editör etiket etkinlik favicon featured form ftp galeri Genel gimp hata sayfası header htaccess htpasswd ilişkisel veritabanı index innodb javascript join JQuery kategori koodla linux mysql opacity php resim url

Son Yorumlar

  • Fatih: Açıkçası sitenizi yeni keşfettim ve gerçekten beğendim. Kaynak ve tutorial ihtiyacı olduğunda yabancı blog...
  • beyo: emeğine sağlık, temiz bir anlatım olmuş
  • gokhan: güzel bir anlatım yapmışsın.. devamını bekleriz.. kolay gelsin
  • web yazılım şirketi: google blog araması ile .net üzerinden hizmet veren web yazılım şirketi ararken tesadüfen bu web...
  • Codderol: çok teşekkürler bu çalışma bana çok yardımcı oldu….

Sayfalar


Faydalı Bağlantılar