Label/Catefory Cloud for Blogger with jQuery

Kalau Beben Koben si bloglang anu ganteng kalem tea suruh acak-acak sebuah web/blog, maka sampai tuntas baca artikel yang ada disana. Karena pasti unik, full stylish, funky, cool, etc. Postingan sebelumnya menu oh menu itu blog punya artikel menarik punya.
Kalau sobat mengacaknya pasti akan menemukan artikel dengan title fast moving tag cloud for bloggers :-/ Menampilkan link dengan gaya tag clouds :-bd Efek berputar-putar menambah dongkrak style kalau cursor didekati maka akan melambatkan perputaran yang terjadi (pusing mungkin yah) :D Pokoknya gitu deh my broo dan kali ini Beben akan mencoba menerapkannya pada label/kategori blog. TERTARIK!!!

Langkah pertama yang musti dilakukan Download Full Template sobat terlebih dahulu. Takut beleduk kalau error ditengah-tengah proses ;))
Lakukan tindakan berikut: Expand Widget Templates
Lihat pada dalaman template sobat, diberi judul apakah disana! Bisa Label, Kategori, Category or something else. Kode label akan tampak sbb:<b:widget id='Label1' locked='false' title='Labels' type='Label'/>Lihat ID UNIQUE yg diberi warna 'Label1'
Perasaan sama sih kalau ID Unique yg dipakai dalam label/category blogspot (siapa tau berbeda) :D Masukan coded CSS berikut

#Label1 {
margin: 0 auto;
height: 300px;
width: 100%;
overflow: hidden;
position: relative;
background: transparent;
}
#Label1 a {
line-height: 1;
position: absolute;
text-decoration: none;
color: #000;
}
#Label1 a:hover {
color: red;
font-weight: bold;
text-shadow: 1px 1px 3px #333;
}

Khusus variabel width sesuaikan dengan lebar dari template masing². Kalau mau menambahkan variabel CSS silahkan saja, yg ini kode pokoknya saja kok ;)

Dalam keadaan di centang (Expand Widget Templates) cari kode<b:widget id='Label1' locked='false' title='Labels' type='Label'>Tengok sedikit kebawah terdapat code berikut<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>Sisipkan tag ramuan sehingga menjadi<h2><data:title/></h2>
</b:if>
<div id='Label1'>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>Tarik nafas terlebih dahulu...hufth. Scroll lagi kebawah dikit masih di area tersebut, dan temukan tag penutup </b:includable> lalu tepat diatasnya buat satu tag penutup </div>
Save dulu deh takut kepanjangan :))

Jika tidak terjadi beleduk error sampai langkah ini, saatnya melanjutkan ke sesi pemasukan jQuery plugins. Cari tag penutup </body> dan injeksi script berikut

<script type='text/javascript'>/*<![CDATA[*/
$(document).ready(function(){
var element = $('#Label1 a');;
var offset = 0;
var stepping = 0.3;
var kategori = $('#Label1');
var $kategori = $(kategori)
$kategori.mousemove(function(e){
var topOfkategori = $kategori.eq(0).offset().top
var kategoriHeight = $kategori.height()
stepping = (e.clientY - topOfkategori) / kategoriHeight * 0.2 - 0.1;
});
for (var i = element.length - 1; i >= 0; i--)
{
element[i].elemAngle = i * Math.PI * 2 / element.length;
}
setInterval(render, 400);
function render(){
for (var i = element.length - 1; i >= 0; i--){
var angle = element[i].elemAngle + offset;
x = 125 + Math.sin(angle) * 30;
y = 45 + Math.cos(angle) * 40;
size = Math.round(15 - Math.sin(angle) * 15);
var elementCenter = $(element[i]).width() / 2;
var leftValue = (($kategori.width()/2) * x / 100 - elementCenter) + "px"
$(element[i]).css("fontSize", size + "px");
$(element[i]).css("opacity",size/50);
$(element[i]).css("zIndex" ,size);
$(element[i]).css("left" ,leftValue);
$(element[i]).css("top", y + "%");
}
offset += stepping;
}
});
/*]]>*/
</script>

Save

Finis it, and good luck :) Jika mau lihat demonya ada pada blog dummie sayah (jika belom di delete) :D Lihat sebelah kanan dgn title Labels.
Tambahan:

Jika pada label/kategori sobat masih ada angkanya. Maka hilangkan coded...
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>

Click expand for look example schema coded

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div id='Label1'>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display =="list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>

<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>

</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Setelah ditelusuri ternyata artikel ini kayaknya bersumber dari sini http://hendro-prayitno.blogspot.com/2011/02/membuat-tag-cloud-menggunakan-text.html Apa ini link sumbernya yah ???
Ini lebih keren http://www.noupe.com/ajax/jquery-hover-sub-tag-cloud.html
Bye \m/