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
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;
}
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>Sisipkan tag ramuan sehingga menjadi
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'><h2><data:title/></h2>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>
</b:if>
<div id='Label1'>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
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...Click expand for look example schema coded
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
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/
Macam 'ntuh dah, jadi bisa lebih memberi gaya pada image biar lebih atraktif bro b-) Kerennya lagi kita akan membuatnya full menggunakan CSS. This is time for 
<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>