Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Label Cloud Style Widget For Blogger

Label Cloud Style Widget For Blogger
Label Cloud Style Widget For Blogger - Label Cloud merupakan modifikasi label pada blog yang memberikan efek animasi berputar mengikuti arah kursor. Agar tampilan label terlihat lebih menarik untuk dilihat oleh penggunjung blog, tentunya perlu menambah sedikit script untuk membuat Label Cloud. Contoh Label Cloud bisa anda lihat pada label blog ini (di sedebar blog). Untuk menerapkan kedalam blog anda, maka berikut adalah Cara Membuat/Memasang Label Cloud di Blog:

1. Login ke blogger.
2. Kemudian klik Template > Edit HTML > Lanjutkan (centang Expand Widget Template).
3. Lalu (gunakan Ctrl+F) cari Kode yang mirip Seperti dibawah ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>
Atau
<b:section class='sidebar' id='sisiatas' preferred='yes'>
(tidak semua template blog sama, jadi di sesuaikan saja dengan template blog anda)   

4. Jika sudah ketemu, Copy Script dibawah ini dan letakkan tepat di bawah kode yang tadi.
<b:widget id='Label99' 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://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Label Cloud<a href='http://mas-andes.blogspot.com/'/></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#1c1c1c&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x00FF00&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>
Keterangan :
Mengganti lebar dan tinggi, ubah kode berwarna merah.
Menganti background, ubah kode berwarna biru.
Mengatur ukuran huruf, ubah kode berwarna ungu.

5. Klik Pratinjau terlebih dahulu, jika sudah sesuai dengan yang diharapkan lalu Simpan Template.

Berlangganan artikel via email

1 Response to "Label Cloud Style Widget For Blogger"

bagaimana cara mengganti model fontnya gan

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Label Cloud Style Widget For Blogger" ini bermanfaat, share ke jejaring sosial.
Konversi Kode