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