Bloggerda Açıklamalı Etiket Bulutu Yapmak

Merhaba okuyucular. Yine bir Blogger İpucu ile karşınızdayız !Uzun zamandır kaynak kodlarını araştırmakla yetinip nasıl olacağını bilemediğim bir eklentiyi artık blogumda sizlerinde görmüş olduğu gibi kullanmaktayım. Çözümü ise 2007 yılından beri moderatörlüğünü yaptığım Bilişim Rüzgarı Forumu‘ndan arkadaşım elektr10‘nun blogunda buldum. Uzun zamandır aramamın sebebi ise bulutun üstüne geldiğinizde kaç yazı olduğunu bir title ile göstermesi.Ve birde bu bulutu çekici kılan ok işaretinin yapılabiliniyor olması. Uzun uzadıya anlatmaya gerek yok gayet hoş ve açıklamalı bir eklenti. Ben çok aradığımdan olsa gerek şimdi bu yazıyı mutlulukla anlatıyorum sizlere. Her neyse “Laf olsun,torba dolsun” hesabı değil de “Az ama öz” olsun prensibiyle hazırsak eklentinin nasıl yapıldığına geçelim:

Öncelikle blogunuzda Etiket gadgeti yoksa hemen Şablon->Sayfa Ögeleri kısmına gelin ve “Sayfa Öğesi Ekle”den “Etiketler”i seçip etiket gadget’ını ekleyin. Eğer varsa da daha önceden etiket gadgetiniz ve siz bu etiket ismini atıyorum “Havada Bulut,Sen bunu unut” şeklinde kendinize göre düzenlediyseniz bu kısım önemli birazdan anlatacağım kod ile ilgili. Birde arkadaşlar bu eklentiyi yaparken “Widget Şablonlarını Genişlet” kısmını aktif hale getirmeyeceğiz. Şimdi önce CSS kodlarını </b:skin> kodundan önce ekliyoruz:

/* Etiket Bulutu Stil Kodları
----------------------------------------------- */
#labelCloud {text-align:center;font-family:Trebuchet MS;}
#labelCloud .label-cloud li{display:inline;}
#labelCloud ul li {list-style: none; background: url(http://konfor.enesilhan.net/tema/style/okk.gif) no-repeat left center !important; padding-left: 20px;}
!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:-1.1em;font-size:5px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Şimdi de </head> kodundan önce şu kodları ekliyoruz:

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [41,126,185];
var minFontSize = 5;
var minColor = [41,126,185];
var lcShowCount = false;
</script>

Bu kısımda temanıza göre renk seçimi tanımlayabilirsiniz. Yukarıdaki kodda [41,126,185] RGB kodunu değiştirebilirsiniz. Vereceğim adres ile örneğin; #000000 siyah renk kodunu RGB’ye dönüştürebileceksiniz. Bu sayfadan istediğiniz renk kodunu RGB‘ye çevirip kodlarını yukarıdaki rgb koduyla değiştirebilirsiniz.
Daha sonra “HTML’yi Düzenle” kısmında şöyle bir kod satırını bulacağız:

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

Demin yukarıda dediğim etiketler kısmı burası ile alâkalı arkadaşlar. Etiketin ismini farklı bir şey yaptıysanız yukarıdaki kod satırında title ile belirtilen Etiketler kısmını değiştirdiğiniz ad ile aratacaksınız. Eğer değiştirmediyseniz yukarıdaki kod satırını muhtemelen bulacaksınız. Hıh işte bu kodu bulduysanız bu kodun hepsini seçili hale getirip yerine şu kodları ekliyoruz:

<b:widget id='Label1' locked='false' title='Havada Bulut Sen Bunu Yapmayı Unut :)' 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 Önizleme yapıyoruz ve bir hata vermiyorsa başarmışsınız demektir. Olmazsa korkarım ki yeniden denemeniz gerekecek ! Bir eklentinin daha sonuna geldik, başka eklentilerle görüşmek üzere.. Sormak istediğiniz veya yapamadığınız yer olursa İnternetim kapanmadan elimden geldiğince yardımcı olmak isterim, hepinize kolay gelsin..

Bu yazıdan önce yazmış olduğum "Blogger Sayfa Sayaç Eklentisi {Reklamsız}" başlıklı yazımı da okumanızı tavsiye ederim.

Herkese Merhabalar, ben Enes İLHAN. Gaziantep'te doğdum, Adana'da Büro Yönetimi ve Yönetici Asistanlığı bölümünü okudum ve 2012'de mezun oldum. Askerliğimi uzun dönem olarak, { acemiliği Ankara/Mamak'ta , usta birliğini ise Hatay/İskenderun'da } yapıp bitirmiş bulunmaktayım. Şimdi ise hayata atılmanın çabası içerisine girmiş bulunmakta olup iş bulma derdindeyim.

11 yorum

  1. Tunahan   •  

    Teşekkürler.Bir gün Blogger'a geçecek olursam çok işime yarayacak.

  2. Enes İLHAN   •  

    @Tunahan
    Blogger'a geçeceğin gün yakındır 🙂

  3. SonKralice   •  

    tesekkür ederim.
    isime yaricak bu sey 🙂

  4. Enes İLHAN   •  

    SonKralice,
    Rica ederim de çoğu kimse pek ilgi göstermedi. Millet daha yeni şeyler bekliyor kim ne yapacak bu etiket bulutunu 🙂

  5. Anonymous   •  

    I’ve recently started a blog, the information you provide on this site has helped me tremendously. Thank you for all of your time & work.

  6. Haydi mutfağa   •  

    benim blogda yok :((

  7. Miskin Kek   •  

    Merhaba. Bundan hariç bir de bulutlu filan hareketli olanı var. Onu nasıl yapabilceğimiz hakkında bilginiz var mı acaba? 🙂

  8. Enes İLHAN   •  

    @Miskin Kek,
    Evet onu da biliyorum. Bu dediğinizi bir yere not edeyim konu olarak nasıl yapılacağını anlatırım inş. müsait olduğumda. İlginiz için teşekkürler.

  9. Anonymous   •  

    Selam anlatım için sağol ama verdiğin ilk kodda hata var
    verdiğin bu kodları bulduktan sonra önce demişsin yani önce derken bu kodların üstüne mi gelecek altına mı hani böle düzeltirsen daha açık olacak ben şahsen anlamadım yardımcı olursa daha basit ve düz bir anlatımla altına,üstüne,yanına,sağına,soluna gibi biçok yerde farklı kodlaeı bu şekilde anlatılıyor http://bloggerturkiye.org/discussion/136/blogger-facebookta-paylas-butonu-yapmak

  10. sbncr   •  

    @Adsız

    Ben kodlarda bir hata olduğunu düşünmüyorum. İlk yerleştireceğimiz css kodlarını ben /b:skin kodundan önce yerleştirdim ve diğer tüm işlemleri de Enes'in anlattığı şekilde yaptım. İlk denememde sorunsuz çalıştı. İsterseniz sitemden kontrol edebilirsiniz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Güvenlik Sorusu ? * Time limit is exhausted. Please reload the CAPTCHA.