Enes İLHAN\ Bloggerda Açıklamalı Etiket Bulutu Yapmak

Blogger İpuçları 11 yorum 5.896 20 Aralık 2010

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.

Yorumlar ;

Tunahan
21 Aralık 2010 - 12:47:17

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

Enes İLHAN
22 Aralık 2010 - 13:32:40

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

SonKralice
23 Aralık 2010 - 16:26:57

tesekkür ederim.
isime yaricak bu sey 🙂

Enes İLHAN
25 Aralık 2010 - 13:55:22

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

Anonymous
29 Aralık 2010 - 21:26:17

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.

ByCakko
6 Ocak 2011 - 20:19:58

Hocam;

Aşağıda linkte bulunan konuyu okursanız memnun olurum.

http://bycakko.blogspot.com/2011/01/2010un-en-iyi-bloglar.html

Haydi mutfağa
4 Şubat 2011 - 09:02:32

benim blogda yok :((

Miskin Kek
20 Şubat 2011 - 17:01:32

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

Enes İLHAN
20 Şubat 2011 - 23:39:11

@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.

Anonymous
7 Mayıs 2011 - 13:36:26

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

sbncr
19 Temmuz 2011 - 12:03:00

@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.