Cara Membuat Animasi Awan Label

Posted by Nicki Hermanto Putro On Sunday, 13 January 2013 0 komentar
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:

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







trik membuat label cumulus blogspot.

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'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<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='&quot;label-size label-size-&quot; + 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>
Nah,HAPUS! kode barisan kode tersebut dan gantilah dengan kode berikut:
<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(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;185&quot;, &quot;185&quot;, &quot;7&quot;, &quot;#000000&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x33FF00&quot;);
so.addVariable(&quot;hicolor&quot;, &quot
;0xFFFFFF&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;125&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
<script type='text/javascript'>
</script>
</div>
</b:includable>
</b:widget>
Lalu simpan.



Ket:

185          = Lebar Widget dalam px
185          = Tinggi Widget dalam px

#000000   = Warna Background (Hitam)
0x
33FF00 = Warna Huruf
12            = Ukuran Font
0xFFFFFF  = Warna Link


Nanti akan ada konfirmasi seperti ini,maka pilih 'Delete Widgets',dan lihat hasilnya.


cara membuat atau memasang label kategori tag cloud dengan efek bergerak memutar animasi.
Penting:
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 :
  1.  http://pelajaran-blog.blogspot.com/2012/10/membuat-label-tag-cloud-kategori.html  diakses hari Minggu, 13 Januari 2013, 15:49 WIB
  2. 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.