earth

Guestbook

/* Iklan google ads */
Pada dua tulisan sebelumnya saya memaparkan bagaimana cara untuk menambahkan Tag Cloud Non-animasi, baik yang menggunakan gadget blogger maupun javascript. Nah, pada tulisan kali ini saya akan mengupas cara membuat Tag Cloud Animasi. Cara ini saya dapatkan dari situs Bloggerbuster.com. Setelah melakukan sedikit perubahan pada script-nya dan memberikan keterangan tambahan yang agak berbeda dari tulisan aslinya, maka tulisan ini saya persembahkan buat sobat blogger semua.


Untuk membuat Tag Cloud Animasi ini kamu bisa mengikuti langkah-langkah berikut (contoh pada sidebar dapat dilihat pada blog ini):
  • Login ke akun Blogger kamu.
  • Dari halaman Dasbor, klik Tata Letak dan pilih Edit HTML.
  • Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
  • Kopikan script berikut:
    <b:widget id='Label99' locked='false' title='Tag Cloud' 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/ruangsc/enes/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> Distributed by <a href='http://ruangsc.blogspot.com'>SC Community</a></div>
    <script type='text/javascript'>
    var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/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>
    
    Pada script di atas disetting sebagai berikut (lihat yang dicetak tebal):
    » Lebar widget : 240px
    » Tinggi widget : 300px
    » Warna latar (background) : putih atau #ffffff
    » Warna huruf : abu gelap atau 0x333333
    » Ukuran huruf : 12
    Kamu dapat mengubah settingan tersebut disesuaikan dengan latar template dan lebar sidebar blog kamu. Misalnya mengubah warna latar menjadi hitam ditulis #000000 dan mengubah warna huruf menjadi putih ditulis 0xffffff (mengenai kode warna silahkan baca artikel ini).
  • Letakkan script tersebut di bawah kode:
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    
    Untuk memudahkan pencarian, tekan Control F atau F3.
    Jika tidak ditemukan, cari kode id='sidebar' atau id='sidebars'.
  • Lakukan Pratinjau, jika sudah OK, Save hasil kerjaan kamu dan ucapkan Alhamdulillah.....

Dibanding script Tag Cloud Non-animasi, Tag Cloud Animasi ini lebih simple. Hanya saja mengenai background dan warna huruf sebaiknya kamu sesuaikan dengan background template kamu agar kelihatan lebih matching, juga untuk ukuran lebarnya diatur sedemikian sehingga tidak melebihi ukuran lebar sidebar blog kamu.

Ok coy, selamat mencoba....
  • Artikel Terkait Dengan Blog Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    41 komentar

    salam sobat
    wah mau juga mencoba nich
    menambah tag cloud animasinya pada sidebar blog.
    trims sdh diberikan kopasnya,,,

    18 Oktober 2009 10.18  

    Numpang keren di blog ayah nih...
    Bunda juga dah pasang tagcloud ini lho
    Makasih yah... mmmuach.... love U

    18 Oktober 2009 11.14  

    Nuhun bin thanks solusinya, tp blm di coba tu...
    wah aya nu MEJENG, MIUCHH

    sorry, aye bingung. blog t di edit tapi naha tmpilanna di saya sorangan jd aya nu acak2an. asalna pake firefox 3.0 di ganti k 3.5, emang bedanya. komo pake browser nu bedanya, sigana tmbah acak2an

    18 Oktober 2009 21.53  

    thanks before alias nuhun pisan. coba cek...

    masa ada yg ngeHack, si hacker bukannya tukang sol saptu :DDD

    18 Oktober 2009 22.14  

    wah patut dicoba nich..terima kasih atas infonya ya

    18 Oktober 2009 23.48  

    Thanks infonya.. ntar dicoba deh !

    19 Oktober 2009 06.59  

    Sepertinya belum kucoba dan baru tahu istilah ini, ijin copy dan coba!

    15 November 2009 14.40  

    mantep tips sama blognya!

    mau tanya script kupu2 yang ada diatas gimana ya?

    http://ikhsanhafiyudin.blogspot.com

    20 Desember 2009 11.05  

    Nuhun pisan nya kang...tos sulkses ah.
    Kamana wae atuh, meuni aeis tepang, hehe

    25 Desember 2009 21.28  

    Gud banged mass suwun napa ga dari dolo yah gue main sini

    2 Januari 2010 14.41  

    Berhasil unk... Makasih lagi nih kang. Pokona mah tiap mbaca artikel akang dikomenlah. Biasa NB alias numpang beken, he2010x

    5 Januari 2010 15.36  

    Kode id='sidebars' dah ane search gak ketemu juga sob... what wrong>>>?? help me..

    7 Januari 2010 14.52  

    Ooo... dah bisa sob... emang kode HTML punya ane agak beda sama ky contoh yg ente kasih...
    Btw ane udah link site ente ke site ane..
    Link back ya sooob, makasih banyak...

    7 Januari 2010 15.26  

    alhamdulillah...

    sippppp bgt,,,

    berhasil ni hehe...

    thx y...

    20 Maret 2010 17.20  

    kok di template saya gk ada tulisan sidebarnya

    10 April 2010 14.55  

    Thanks atas artikelnya, kira2 kalo widget gak muncul masalahnya apa yah?

    15 April 2010 21.44  

    Thanks infonya numpang copas yyy.... truz bannernya sudah dipasang :)

    19 Mei 2010 23.05  

    terima kasih banyak mas. . .
    artikelnya bagus and lengkap. . .

    salam kenal mas. . .
    sukses selalu. . .
    ^_^

    21 Mei 2010 00.20  

    Wah bos thanks berat, keren content ente !!

    22 Juni 2010 12.47  

    keren blognya,
    sipp mas,
    bnyk ilmu disni,
    jgn lupa mmpir jga y
    :)

    5 Juli 2010 16.09  

    GMNA CARAX BUAT TAG ANIMASI. QW SDH CBA CARA LO TP GA BSA

    17 Juli 2010 10.57  

    tipsna jitu gan...
    udah aku coba and sukses....
    lam kenal..moga jadi amal agan.....

    31 Agustus 2010 08.22  

    <<<< MUMET...... zZz

    blog saya sidebar ny nda ada. adanya bothleftsidebar. adakah kesamaannya. btw, kebetuln blog saya 3 column's & label berada di column yg tengah.

    tlg pencerahannya.

    trims kang.

    3 September 2010 09.30  

    om aku dah edit tuh, berhasil sich.. tapi cuma pas pratinjau aja....
    kalo di gx pratinjau gx berhasil
    tu gmn yach???

    13 September 2010 10.53  

    Htr nhn kang, mantap lah, tos dicobian ... sukses sll kang.

    28 September 2010 00.07  

    wah mau coba ah^^
    salam kenalyah..

    13 November 2010 15.09  

    mantap gan infonya sukses selalu, kunjung juga keblogku,, http://motorheroes.blogspot.com

    3 Februari 2011 19.46  

    udah nyoba dan sukses. alhamdulillah, makasih tips'a.
    benar2 membantu ^^~

    19 Maret 2011 15.59  

    Muantapz gan, dah berhasil di blog aku gan, cihuuuuii, thanks gan

    14 Agustus 2011 04.07  

    makasih kang infonya, sgt bermanfaat

    23 November 2013 16.11  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler