twitter
    See You (Soon)...

2009/03/12

Mempercantik Penampilan Blog Dengan Flash Label Cloud



Teman-teman blogger mungkin acapkali menemui label / kategori yang bisa bergerak (seperti pada kategori di samping kanan blog ini) yang sudah kerap digunakan para blogger di dalam blog mereka. Nah pada pembahasan kali ini saya ingin menjelaskan bagaimana cara membuat yang disebut dengan flash label cloud tersebut.

Label dengan tipe seperti ini ada 2 macam, yakni yang dapat bergerak dan tidak bergerak. Namun di sini saya akan membahas yang bergerak / animasi dulu (kalo pengen yang tidak bergerak sabar dulu bro..!! Lain kali saya jelaskan..ok??!). Caranya cukup mudah, ikuti saja langkah-langkah di bawah ini.


1. Sign in dulu ke Blogger, pada Dashboard, klik Tata Letak.


2. Setelah itu klik Edit HTML.


3. Jangan lupa beri tanda centang pada Expand Template Widget, kalau perlu backup dulu.


4. Cari kode di bawah ini (paling tidak mirip)

<b:section class='sidebar' id='sidebar' preferred='yes'>

5. Kemudian masukkan script di bawah ini tepat di bawah kode 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://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
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'/>
</div>
</b:includable>
</b:widget>



6. Klik Simpan Perubahan, selesai.


Sedikit tambahan, Anda juga bisa merubah ukuran tinggi (warna merah) dan lebar (warna biru) yang ada di script di atas sesuai keinginan Anda. Terakhir jika mungkin Anda memiliki uneg-uneg, saran, komentar, keluh kesah, atau yang lainnya silahkan saja dikeluarkan dengan mengisi form komentar di bawah. Terimakasih!




Dapatkan update hacking tutorial, tips dan trik menarik seputar teknologi, download full software, belajar bisnis internet, dan masih banyak lagi langsung ke email Anda sekarang juga!


Related Post



12 komentar:

  1. okehh..
    sya cb dlu..

    BalasHapus
  2. Good posting! more professional web templates at itemplatez.com... its a easy download.

    BalasHapus
  3. bro..!!! cara rubah warnanya gmna ..??????

    BalasHapus
  4. nice gan
    http://sail-7ocean.blogspot.com

    BalasHapus
  5. informasi yang sangat menarik gan...

    BalasHapus
  6. Gembel ni. kasih tutor yang langsung dong

    BalasHapus
  7. ajiiieeeppp broo...

    kunjungi http://egi-sevenfoldism.blogspot.com/
    thank'zz

    BalasHapus
  8. nice posting gan, saya masih newbie nih masalah blogger, artikel agan sangat membantu saya sekali. jangan lupa kunjungi blog saya ya gan Connectify ppro 6 crack

    BalasHapus
  9. terimakasih untuk artikelnya, saya lagi butuh buat blog saya

    BalasHapus

Every of your opinion would be very valuable for me...

So write your comment, please... :)