adfly.468x60.5 Dulang Dollar Melalui ShortURL adf.ly | short URL

20 Januari 2009

Membuat Tag / Label Cloud
Share

Berikut ini adalah kode dan informasi setup untuk menggunakan Label Cloud di Blogger Baru. Pertama jelas Anda harus memiliki sebuah blog di Blogger Baru, dan Anda HARUS menggunakan layout template, (hal ini tidak tersedia untuk template klasik, atau FTP dipublikasikan blog) dan Anda harus memiliki beberapa posting sudah berlabel. (Tidak perlu sedikitnya satu label dengan lebih dari satu entri atau script hit bug - agar memiliki minimal satu label dengan lebih dari satu entri sebelum memulai).

Pastikan Anda cadangan template Anda sebelum membuat perubahan! Masuk ke Blogger dan menuju ke bagian layout. Pada 'Elemen Halaman' Setup halaman pastikan Anda memiliki label widget sudah terpasang di mana Anda menginginkannya (dapat dipindahkan sekitar nanti). Lalu pergi ke Edit HTML dan membiarkan pengaturan widget TIDAK exapanded. Akan memudahkan untuk menangani. Sekarang kode datang dalam 3 bagian. Bagian untuk stylesheet, sebuah bagian konfigurasi, dan kemudian yang sebenarnya widget itu sendiri.

Bagian pertama yang akan dimasukkan ke dalam adalah bagian stylesheet. Kode berikut perlu disalin dan dimasukkan ke dalam stylesheet yang pada layout yang ditandai dengan out tag. termudah untuk dilakukan adalah mencari tag penutup kulit


]]></b:skin>

dan menempatkan kode SEBELUM kanan itu. Di sana, copy dan paste tanpa modifikasi sekarang. Saya akan menjelaskan apa yang dapat tweaked nanti.


/* 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}

Ini adalah bagian berikutnya seksi konfigurasi untuk Cloud. Ia juga berjalan di kepala template, tetapi di luar bagian stylesheet. Termudah untuk dilakukan adalah untuk menemukan kembali penutup stylesheet tag ]]> Tetapi kali ini menempatkan kode yang tepat SETELAH baris, tapi yang SEBELUM tag. Berikut ini :

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

Semua pengaturan ini dapat diubah, tetapi saya akan menjelaskan mereka dalam beberapa waktu. Default akan bekerja untuk saat ini. Sekarang widget itu sendiri. Gulir ke bawah dan menemukan label widget pada sidebar Anda. Seharusnya terlihat seperti ini.

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

Salin kode berikut (dari awal tag widget ke widget berakhir tag) dan ganti dengan baris di atas.

<b:widget id='Label1' locked='false' title='Label Cloud' 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>

Sekarang jika semua telah dengan baik, dan Anda sudah memiliki posting yang diberi label, maka jika anda melihat blog anda akan melihat beberapa bentuk Cloud muncul. Jika tidak muncul, maka sesuatu itu salah. Anda mungkin harus kembali dan coba lagi dari awal.


Cetak

Artikel Lain :


1 komentar:

Aditya Ramadhan mengatakan...
24 Januari 2009 pukul 17.06  
Komentar ini telah dihapus oleh pengarang.

Berlangganan

Berlangganan RSS Feed via Email:


Artikel Populer

Blog Archive

Pengikut

blog-indonesia.com



Recomended Download


Add to Your Blog