Membuat Label / Tag Cloud / Kategori Animasi Keren (Cumulus)
Bagi anda yang belum mengetahui apa itu cumulus tag clouds, merupakan sebuah tampilan 'label' pada blogger yang memiliki variasi tebal dan tipis pada huruf serta animasi yang memperlihatkan seolah label dapat bergerak memutar.
Seperti pada gambar berikut:
Bagi anda yang belum mengetahui apa itu cumulus tag clouds, merupakan sebuah tampilan 'label' pada blogger yang memiliki variasi tebal dan tipis pada huruf serta animasi yang memperlihatkan seolah label dapat bergerak memutar.
Seperti pada gambar berikut:
Langkah dan Cara Membuat Tag Cloud atau Label Animasi Berjalan (Cumulus)
Pertama,sobat harus memasang / membuat / menerapkan label pada blog milik sobat terlebih dahulu, caranya silakan ikuti langkah berikut (ilustrasi gambar aja ya):Nah,setelah sobat sudah memiliki widget label,kini kita rubah menjadi cumulus tag cloud seperti pada pembahasan malam hari ini.
Pertama,sobat pergi ke Dashboard lalu pilih Template:
Selanjutnya,pilih Edit Html:
Dan cari kode berikut (jika sobat telah menerapkan widget label):
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
Jika sudah ketemu,highlight (tandai / blok) barisan kode dibawahnya,termasuk kode tersebut,kode yang sobat tandai kurang lebih seperti ini:
<b:widget id='Label1' locked='false' title='Labels' type='Label'>Nah,HAPUS! kode barisan kode tersebut dan gantilah dengan kode berikut:
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<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>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Lalu simpan.<b:widget id='Label50' locked='false' title='tag' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/jetzblogs/tag-cloud/jetztagcloud.js' type='text/javascript'/>
<div id='flashcontent'/>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "185", "185", "7", "#000000");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x33FF00");
so.addVariable("hicolor", "0xFFFFFF");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "125");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
<script type='text/javascript'>
</script>
</div>
</b:includable>
</b:widget>
Ket:
185 = Lebar Widget dalam px
185 = Tinggi Widget dalam px
#000000 = Warna Background (Hitam)
0x33FF00 = Warna Huruf
12 = Ukuran Font185 = Tinggi Widget dalam px
#000000 = Warna Background (Hitam)
0x33FF00 = Warna Huruf
0xFFFFFF = Warna Link
Nanti akan ada konfirmasi seperti ini,maka pilih 'Delete Widgets',dan lihat hasilnya.
Untuk modifikasi,silakan sobat atur pada situs sumbernya,adalah di:
way2blogging.org.
Semoga berhasil ya gan. Maaf artikel usang, hihihi (buat isi posting sob :( hehe)
Sumber :
- http://pelajaran-blog.blogspot.com/2012/10/membuat-label-tag-cloud-kategori.html diakses hari Minggu, 13 Januari 2013, 15:49 WIB
- http://sigli-cyber.blogspot.com/2012/08/cara-membuat-label-cloud-animasi.html diakses hari Minggu, 13 Januari 2013, 15:40 WIB
0 komentar:
Post a Comment
Silahkan isi komentar dengan baik dan sopan, tidak mengandung unsur SARA, provokatif, dan tanpa SPAM / iklan. Pesan / Komentar yang tidak layak akan dihapus. Terimakasih.