Dostlar bugün konumuz ETİKET BULUTU ingilizcesi TAG CLOUD veya LABEL CLOUD. Bu blog da sidebar da TECHNORATİ ve DELİCİOUS sitelerinin ETİKET BULUTU widgetlerini görebilirsiniz. Şimdi diyenleriniz çıkabilir “Nereden çıktı bu ETİKET BULUTU olayı?” ETİKET BULUTU olayını TECHNORATİ veya DELİCİOUS gibi siteler vasıtasıyla oluşturup bu sitelerin verdiği kodları GADGET EKLE araçlarından HTML/JavaScript aracı ile benim yaptığım gibi blogunuzda dilediğiniz yere koyabilirsiniz.
Ama bugün benim burada değineceğim ETİKET BULUTU olayı başka. Yani ETİKET BULUTU üretme özelliğini kullandığınız BLOGGER şablonuna kazandırmak. WORDPRESS kullananlar bilirler. WORDPRESS de bu özellik zaten vardır. BLOGGER da bu özellik yoktur. Şimdi bugün bu özelliği kullandığımız şablona nasıl ekleyebiliriz onu anlatacağım. Bu konuyu bir şablonu kurcalarken phydeaux3 da anlatıldığını gördüm. Bu blog benim sıkça takılıp yararlandığım, epeyce şey öğrendiğim bloglardan biri. Bu konuda ki orijinal İngilizce anlatıma buradan ulaşabilirsiniz.
Yeni Blogger için Tag Cloud / Etiket Bulutu oluşturmak
İşte kod ve kurulum bilgileri:
Yeni Blogger'da Etiket Bulutu oluşturmak için ilk önce yine Yeni Blogger'da bir blog olmalı ve HTML’yi Düzenle bölümü olması gerekiyor, (bu klasik şablonlar veya FTP bloglarında mevcut değildir) ve en önemlisi zaten yazılarınızın etiketlere sahip olması gerekiyor. (En az bir etiket bir veya birden fazla kullanılmalı . Bu yüzden başlamadan önce birden fazla kullanılmış etiket veya en az bir etiketin olduğundan emin olun).
Herhangi bir değişiklik yapmadan önce şablonu yedeklediğinizden emin olun!
Blogger'a giriş yapın ve yerleşim bölümüne gidin. Ve 'Sayfa Öğeleri' kurulum sayfasında (bir etiketler widgeti zaten olması lazım. Bu etiketler widgetinin yüklü olduğundan emin olun yüklü değilse yükleyin). Sonra HTML'yi Düzenle bölümüne gidin. Burada öncelikle şablonunuzu yedekleyin. Daha sonra aşağıda sırasıyla vereceğim kodları tarif edeceğim yerlere kopyala yapıştır yöntemiyle yerleştirin.
Şimdi bu işlemi 3 aşamada gerçekleştireceğiz. Stil, bölümünde bir yapılandırma gerçekleştireceğiz. İlk bölüm için stil (style sheet) bölümünde Aşağıdaki kodu kopyalayıp yapıştırmak gerekiyor. bunun içinde <b:skin> etiketi ile başlayan style (style sheet), bölümünde düzenlemeyi gerçekleştirmek için kapanış etiketi olan bu bu kodları bulacağız.
aşağıdaki kodları bu kapanış etiketinin hemen üst bölümüne kopyalayıp yapıştıracağız.
/* 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}Bu bölüm ETİKET BULUTU yapılandırma bölümüdür. Bu bölümü oluşturmak için stylesheet tag kapanış etiketini bulmamız yeterli olacaktır.
Bu kez ikinci aşamada verilen kodu yukarıdaki kapanış kodundan hemen sonra yani hemen altına veya </ head> etiketinin hemen önüne yani üstüne İşte burada.
aşağıda verdiğim kodları yine kopyalayıp hemen yukarıda tarif ettiğim yere yapıştıracağız.
<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>
Tüm bu ayarlar değiştirilebilir daha sonra bunları açıklayacağım. Şimdilik Varsayılan özellikler çalışacaktır.
Şimdi son aşamada widgetin kendisini gerçekleştireceğiz.. Aşağı gidin ve aşağıdaki kod satırını bulun
aşağıdaki kodu kopyalayın ve daha sonra bulduğumuz satırda dahil olmak üzere </b:widget> kapanış kodunu da bulup onu da dahil ederek aşağıda verdiğimiz kod kümesini yerine yapıştıracağız. Yani yukarıda bulduğumuz kod satırı ile başlayan ve kapanış kodu ile biten kod kümesini seçip üstüne aşağıdaki kod kümesini kopyalayıp yapıştırarak kod kümesini yenisi ile değiştirmiş olacağız.
<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>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 = "<data:label.name/>";
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] < cloudMin){
continue;
}
for (var i=0;3 > 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>
Bu yaptığımız üçüncü aşamadan sonra şablonumuzu kaydedip yeni haline bakabiliriz. Side Bar da Label Cloud adlı widgeti görmemiz lazım. Daha sonra widgeti düzenle linkine tıklayıp Label Cloud başlığını türkçesi yani ETİKET BULUTU olarak düzeltebilirsiniz.
Eğer widgeti göremediyseniz bir şeyler yanlış yapılmış demektir. Şimdi eğer her şeyi doğru olarak yaptıysanız yani her şey yolunda gitti ise ve etiketli yazılar zaten var ise, sonra eğer blogunuzun ön izlemesinde siz Label Cloud u, Etiket Bulutunu bir şekilde görmeniz gerekir. Eğer görünmüyorsa, bir şey ters gitti demektir. Muhtemelen bir yerlerde yanlış yapmışsınız demektir. Daha sonra yukarıda anlattığımız aşamaları sırasıyla yeniden başlayıp tekrar deneyin.
Güncelleme: Eğer, etiket bulutu gösterilmiyorsa ilk kontrol edeceğimiz şeyleri tespit edelim. İlk olarak en az bir etiket için birden fazla girişe sahip olunduğuna emin olun. Herhangi bir etiket için birden fazla kayıt varsa, o zaman her şey uygun olacaktır.Kodlar içindeki işaretlere ( " ) Apostrophes olmamalı ve tek ( ' ) Ticks Tırnak olmalı.
Etiket Bulutu olasılıkla varsayılan ayarlara göre oluşacaktır. Daha sonra bu ayarlar ile oynayarak istediğimiz biçimde Etiket Bulutu oluşmasını sağlayabiliriz. Ama tüm renkleri ve boyutları kendi zevkinize uyacak şekilde ayarlayabilme imkanı vardır. Tabii eğer Etiket Bulutu önizleme yaptığımızda görünüyorsa ki ancak o zaman bir takım bazı değişiklikleri yapmamız mümkün olacaktır.
Değişkenler bölümünde hangi ayarları değiştirirsek en iyi olacak şimdi onu anlatmaya çalışacağım.. Burada kullanılan kodların ne ifade ettiğini öncelikle açıklayalım.
var cloudMin= 1;
Siz etiketlerin gösterilme sayısını sınırlamak için bu ayarı kullanabilirsiniz (örneğin) etiket çok var. 1 ayarı girilen tüm etiketleri gösterir. Eğer daha yüksek bir sayı girilirse, en az bu kayıtların sayısı kadar bulut görünür. Daha sonra sadece etiket girmeniz yeterli olacaktır..
var maxFontSize = 20; var maxColor = [0,0,255]; var minFontSize = 10; var minColor = [0,0,0]; var lcShowCount = false;Bu değerler ise
Yine boyutunu piksel olarak, renginide RGB biçiminde İkisi arasındaki tüm etiketler kendi renkleri / boyutlarına dayalı kaç etiket, nerede ve giriş sayısı, çok istediğiniz Bulutun oluşmasını sağlıyor. Birkaç denemeden sonra birçok faktörlerle oluşan efekt etkisi ile hoş görünümlü bulut oluşuyor.Görünüm etiket sayısına renk / boyut seçimine, ne kadar kayıtları arasında iyi dağıtılırsa etiketlerin burada çalışması o kadar iyi görünen bir bulut oluşturacaktır. Bunu deneyerek zaman içinde takip edip görebiliriz.
ÖNEMLİ NOT: biçimlerinden tutun renklerine kadar ayarları değiştirmekle sağlanır. Arasındaki [In] ve sayılar virgül ile ayrılmış. Varsayılan renk maksimum siyaha dek için mavidir. Herhangi bir geçerli RGB renk kombinasyonu seçebilirsiniz. RGB renk kodları geçerlidir
Endişe etmeyin RGB ifadesi bir renk tanımlaması yoludur. Siz Internet’te var olan bir çok renk tablosunu kullanabilirsiniz, çalışmalarınızda istediğiniz renk için doğru RGB değerini alırız. İşte böylece oldukça iyi olduğunu ancak o zaman görürüz
Unutmayın, eğer doğru olarak girmek için sayı setleri en az 3 harf veya sayıdan oluşmalı.virgül ile ayrılmış olmasına ayrıca dikkat edin.
Farklı yazı tipi boyutları ile de deneyebilirsiniz. Tekrarlanan kayıt sayıları bulut görüntüsü üzerinde dağınık olmasına bağlıdır.
Son bir Değişken vardır.
lcShowCount
Burada (kullanılan varsayılan değerler) doğru veya yanlış olabilir. Genellikle 'geleneksel bulut içinde etiket sayısı, yayınlama tarihi gibi şeyler bulunmaz. Tüm bunlar görsel olarak ifade edilir. Ama eğer 'düz liste' ise söz konusu olan o zaman etiket sayısı tarih gibi şeyler yararlı olabilir.
Style bölümünde de bir çok düzenleme yapabiliriz. Çoğu insan için bu kadar bilgi gerekli değildir. Tüm bu kayıtların ne için olduğunu anlamamız yeterlidir bence. En azından edindiğimiz bilgilerle bir tasarım yapmak için yeterlidir sanırım.
sayfanızın geri kalan öğeleri içinde etiket bulutu sadece bir tanesidir. Ancak birkaçını size uygun şekilde değiştirmek isteyebilirsiniz.
İlk satır
#labelCloud {text-align:center;font-family:arial,sans-serif;}
Eğer Etiket Bulutunu oluşturan yazı biçimi yani font hoşunuza gitmiyorsa gerekli değişikliği buradan yapabilirsiniz. Burada kullanılan Font değişebilir.
Ayrıca, oluşan metin hizalamasını da değiştirilebilirsiniz. Ben varsayılan olarak merkeze ayarladım sizin için ama siz bunu kullanabilirsiniz veya değiştirebilirsiniz.
Grup için daha iyi olanını siz belirleyeceksiniz. Bir sonraki satıra geçebiliriz.
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
Estetik görünüş için CSS yani style sheet bölümündeki kodlara ağırlık vermek gerekir. Bunun önemini anladığınız konusunda bir endişem yok. Gerçekte ilk giriş çok önemlidir.
display:inline;
Bu özelliği de değiştirebilirsiniz
display:block;
Üzerindeki (her giriş için ayrı bir hat) ağırlıklı kayıtların listesinin alfabetik sıralama gibi ayarlarını kendiniz yapabilirsiniz. Sayfa Öğeleri sekmesinden Etiket Bulutu aracının düzenleme linkine tıklayarak gerekli ayarlamaları basit olarak yapabilirsiniz.
Ve son olarak söz edeceğimiz son bitim satırıdır
#labelCloud .label-count
Eğer yazı göstermek için lcShowCount değişken takımını, bu değişiklik sayılır renk / boyut da Giriş sayılarını ifade eder
Hiç yorum yok:
Yorum Gönder