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:

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







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:


Setelah itu,pilih Proceed:


Setelah itu contreng 'Expand Widget Template':


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.

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)

Read more > Membuat Label / Tag Cloud / Kategori Animasi Keren (Cumulus)

Membuat Tag Clouds: "

Tag Clouds ... Untuk membuat tag clouds,anda harus sudah membuat label pada situs anda. Pilih bagian Dashboard ke Pengaturan lalu pada Page Element tambah halaman baru add widget, pilih Label. Setelah itu Edit HTML kemudian beri tanda centang pada Expand Widget Templates. Cari kode : ]]></b:skin> Klo dah ketemu,lalu copy paste kode di bawah ini diatasnya : /* Label Cloud Styles ----------------------------------------------- */ #labelCloud {text-align:center;font-family:arial,sans-serif;} #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;} #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0} #labelCloud a{text-decoration:none} #labelCloud a:hover{text-decoration:underline} #labelCloud li a{} #labelCloud .label-cloud {} #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000} #labelCloud .label-cloud li:before{content:'' !important} Setelah itu,tepat di bawah kode : ]]></b:skin> copy paste kode di bawah ini : <script type='text/javascript'> // Label Cloud User Variables var cloudMin = 1; var maxFontSize = 20; var maxColor = [0,0,255]; var minFontSize = 10; var minColor = [0,0,0]; var lcShowCount = false; </script> Lalu simpan template. Langkah terakhir,masih pada Edit HTML cari kode di bawah ini : <b:widget id='Label1' locked='false' title='cloud' type='Label'> &lt b:includable id='main'> <b:if cond='data:title'> <h2></h2> </b:if> <div class='widget-content'> <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> <span dir='ltr'>(<data:label.count/>)</span> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> Kalau dah ketemu,ganti kode diatas dengan kode di bawah ini : Alangkah baiknya backup terlebih dahulu template ke komputer anda,Tapi klo dah percaya,ya langsung ganti aja. Akurat koq :) <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='labelCloud'/> <script type='text/javascript'> // Don't change anything past this point ----------------- // Cloud function s() ripped from del.icio.us function s(a,b,i,x){ if(a&gt;b){ var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m) } else{ var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a) } return v } var c=[]; var labelCount = new Array(); var ts = new Object; <b:loop values='data:labels' var='label'> var theName = &quot;<data:label.name/>&quot;; ts[theName] = <data:label.count/>; </b:loop> for (t in ts){ if (!labelCount[ts[t]]){ labelCount[ts[t]] = new Array(ts[t]) } } var ta=cloudMin-1; tz = labelCount.length - cloudMin; lc2 = document.getElementById('labelCloud'); ul = document.createElement('ul'); ul.className = 'label-cloud'; for(var t in ts){ if(ts[t] &lt; cloudMin){ continue; } for (var i=0;3 &gt; i;i++) { c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz) } var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz); li = document.createElement('li'); li.style.fontSize = fs+'px'; li.style.lineHeight = '1'; a = document.createElement('a'); a.title = ts[t]+' Posts in '+t; a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')'; a.href = '/search/label/'+encodeURIComponent(t); if (lcShowCount){ span = document.createElement('span'); span.innerHTML = '('+ts[t]+') '; span.className = 'label-count'; a.appendChild(document.createTextNode(t)); li.appendChild(a); li.appendChild(span); } else { a.appendChild(document.createTextNode(t)); li.appendChild(a); } ul.appendChild(li); abnk = document.createTextNode(' '); ul.appendChild(abnk); } lc2.appendChild(ul); </script> <noscript> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> </noscript> <b:include name='quickedit'/> </div> </b:includable> </b:widget> Simpan Template! Selesai ! Baca Juga Yang Ini.. Membuat Label/Kategori Menghilangkan Angka Pada Label Membuat Meta y_key

Read more > Tag Clouds

Membuat Tag Cloud Di Blogger

Cara simple/singkat membuat tag cloud pada blogger Pertama saya mengenal blog,banyak sekali istilah-istilah widget blogger yang ingin saya ketahui. Seperti halnya ‘Tag Cloud’yang akan kita bahas kali ini. Dulu,saya mengerti dan pernah menjumpai widget seperti ini,namun karena tidak mengerti apa namanya,maka saya googling dengan berbagai kata kunci. Seperti;'cara membuat tulisan besar dan kecil pada blogger',atau 'cara membuat widget tulisan tebal dan tipis',dll. Bahkan saya sempat bertanya langsung pada masternya,sampai saya tahu itu namanya Tag Cloud. Beberapa waktu lalu saya sempat memposting juga tentang cara membuat tag clouds untuk blogspot,namun masih manual bukan wyswyg seperti fitur blogger saat ini. Karena,seiring berkembangnya fitur instant blogger,blogger sudah memberikan langkah mudah untuk membuat label berbentuk awan ini. Nah,untuk contoh tag cloud,anda bisa lihat ilustrasi gambar di atas,atau bisa kunjungi langsung blog teman saya di mendengarkan musik mp3 gratis. Langkah Sederhana Membuat Tag Cloud Untuk Blogger Seperti biasa,untuk membuat tag cloud ini,pertama pergilah ke Tata Letak,lalu add new widget atau klik tulisan Tambah Gadget untuk blog berbahasa indonesia. Setelah itu muncul dialog box,pilih Label. Kemudian akan muncul jendela baru lagi,lalu pada option pilihlah Tag Cloud,lalu klik tulisan Simpan. Selesai,anda sudah berhasil membuat tag cloud di blogger,dan silakan lihat hasilnya. Semoga bermanfaat ya :D Baca Juga Yang Ini.. Membuat Tag Clouds di Blogspot Membuat Label / Kategori Menghilangkan Angkan Pada Label Blog

Read more > Membuat Tag Cloud Di Blogger