Rabu, 31 Oktober 2012

Membuat Label / Tag Cloud / Kategori Animasi Keren (Cumulus)

Cara Memasang Tag Cloud atau Label Animasi Berjalan (Cumulus)

Membuat Label / Tag Cloud / Kategori Animasi Keren (Cumulus) - sebenarnya artikel ini telah dipubllikasikan para blogger sekitar 5 tahun yang lalu.
Masih ingatkah sobat dengan artikel pertama dari blog sederhana ini?
Yup adalah membuat tag clouds.

Hanya saja,tag clouds yang dulu kami sharing belum memiliki variasi maupun efek animasi yang sedang marak belakangan ini.
Adalah cumulus tag clouds,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:

membuat tag cloud berjalan bergerak memutar.

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 baca artikel Membuat Label / Kategori.

Atau jika belum paham ikuti langkah berikut (ilustrasi gambar aja ya):

cumulus tag clouds

membuat tag cloud keren

cara membuat tag cloud keren

cara memasang kategori berjalan animasi memutar

cara membuat tag cloud cumulus blogger.

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:

cara membuat label kategori beranimasi.

Selanjutnya,pilih Edit Html:

membuat tagclouds

Setelah itu,pilih Proceed:

cara memasang tag cloud animasi

Setelah itu contreng 'Expand Widget Template':

trik cara membuat kategori efek memutar

Dan cari kode berikut (jika sobat telah menerapkan widget label,pasti ada kode berikut pent-):
<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='Label786' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<script src='http://bloggerblogwidgets.googlecode.com/files/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Flash Labels by <a href='http://www.way2blogging.org'>Way2Blogging</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://bloggerblogwidgets.googlecode.com/svn/trunk/way2blogging_tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;250&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#FFFFFF&quot;);
so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x000000&quot;);
so.addVariable(&quot;hicolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&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'/>
</div>
</b:includable>
</b:widget>
Lalu simpan.

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)

Tidak ada komentar:

Posting Komentar