Membuat Label Cloud Berputar

blogumulus Label adalah pengelompokkan artikel blog dalam satu kategori, dan kemudian biasa di pasang di sidebar atau mungkin di bagian bawah template. Saat ini model atau bentuk label ada 3, label umum atau yang biasa (standard), label cloud, dan label cloud berputar. Yang akan kita bahas sekarang adalah memasang label cloud berputar di blog


Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.

Sebenarnya untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template sobat, jadi saran saya nanti sebelum mengedit template, ada baiknya backup terlebih dahulu template sobat.


I. Langkah Pertama

 

  1. Login ke Blogger dengan ID sobat.

     

  2. Klik Tata Letak

     

  3. Klik tab Edit HTML

     

  4. Download dahulu template sobat dengan mengklik Download Template Lengkap

     

  5. Kemudian klik button Expand Template Widget dan cari kode yg seperti ini : 

     

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

     

  6. Copy kode berikut ini setelah kode diatas :

     

    <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'>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(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
    // uncomment next line to enable transparency
    //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
    so.addVariable(&quot;tcolor&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>

     

  7. Kemudian Simpan Template.


II. Langkah Kedua 

  • Mengubah lebar dan tinggi kolom serta warna background 

     

    Angka "240" adalah lebar kolom

    Angka "300" adalah tinggi kolom

    Sedangkan #ffffff adalah kode untuk backgroud

     

  • Merubah warna font, untuk kode warna bisa sobat lihat disini

     

    so.addVariable("tcolor", "0x333333");

     

  • Merubah ukuran font

     

    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>");

 

Jika dalam membuat label cloud ini tidak berfungsi, silahkan sobat ganti label text menjadi label cloud. Perhatikan gambar dibawah ini :

 

image

 

Hanya itu ilmu yang bisa saya bagi-bagi, terima kasih buat roytanck dan amanda fazani yang telah menyediakan javascript untuk label cloud ini. Jika ada pertanyaan silahkan isi di kolom komentar.

Berlangganan artikel terbaru via Email
Artikel Lainnya :

65 comments

1 Juni 2009 18.11

Thanks tutorialnya

26 Juni 2009 10.32

Thank's yaw bwt artikelnya... :)

28 Juni 2009 19.45

~x( gagaL maning ... :D

Love your tutor bosss..:)

6 Juli 2009 00.33

mas aku udah pasang label cloudnya, tp skrg aku mau menghapusnya. gmn caranya???

wah tipsnya selalu menarik nih,,,

5 Agustus 2009 02.11

Thank's........:)]

5 Agustus 2009 02.12

Makasih banyak atas trik'n.

24 September 2009 02.51

kalo tampilannya kayak bola yg berputar gmana mas??

24 September 2009 07.25

@Facebook hacker : lah ini kan tutorial bt label cloud berputar seperti bola bos..

24 Oktober 2009 17.21

makasih infonya mas ..

maen" ke sini ya ..
http://banuutomo.blogspot.com
http://ptc92.blogspot.com ( berita terupdate tentang ptc )

10 November 2009 20.55

Thank aku lagi cari - cari ini

6 Februari 2010 11.51

nice :D

7 Maret 2010 21.40

sip... udah bisa bos... makasih ya

7 Maret 2010 22.22

oke sama2 bul

8 Maret 2010 07.01

mantab gan tambah rapi dan bagus tampilan blogku,,, trim udah mau berbagi ilmu,,,,

8 Maret 2010 20.51

Semoga anda makin sadar akan pentingnya berbagi ilmu... Sehingga anda mendapatkan balasan yang lebih... Amin...

11 Maret 2010 18.12

ops..iya/..udah siap nih..thanks y..

12 Maret 2010 13.38

ups ...om... Buat nentuin width ama height dimana ? agak nyamping neh kaya yg sakit pinggang

12 Maret 2010 15.43

@ achuy : coba cek di langkah ke-2 disitu ada keterangan angka 300 u/ tinggi dan 240 u/ lebarnya, disesuaikan saja ya

28 Maret 2010 18.11

hehhe .. iya mas .. gak tau kenapa
waktu itu masih bisa .. mungkin hostingan orang itu udah ga aktif kali ..

makasi ya infonya mas ..

sharingtime .. shatiring terus dan kumpulan tips dan trik :D

10 April 2010 15.38

Maz Dody, aq cari kode

kok gk ketemu2 ya? dah pake ctrl+f ni maz. tp gk nemu2 jg! jgn lupa backlink ya maz. logo pny Pean dah tak pasang tuch. tlg ksh kritik n saran ya buat bloQ, tlg maklum coz msh anak baru. ni br utak atik blog blm 2 bln. jd msh sering bingung......... O:)

18 Agustus 2010 23.34

kq dicari2 ga da ya codenya...

22 Agustus 2010 19.42

mas , ko labelnya g muter yah???
mohon di bantu

26 Agustus 2010 14.35

ko ga muter-muter mas?

26 Agustus 2010 16.10

@rendt : coba di copy sekali lg, mungkin ada kode yg tertinggal

26 Agustus 2010 16.16

@atha andriana : buat atha, coba lagi ya, saya berhasil menerapkannya di template worika, bs dicek disini

6 September 2010 13.23

Naah... Ini dia yang ane cari.. makasih nih infonya! Keren!

15 September 2010 21.56

ia sptnya ini yang saya cari saya baca2 dulu... mau dipraktekkan...habis agak rumit Gan

20 September 2010 12.57

Info mangstaf.. langsung dicoba...

10 Oktober 2010 09.08

koq gag bisa?

6 November 2010 02.29

sekarang udah gak bisa sob. knp ya?mohon bantuannya. thanks

6 November 2010 08.45

@priagoenks : bkn ga bs, mgkn ada yg salah copynya sob, coba cek disini demonya

12 November 2010 01.17

Mlm Mas Dody, salam knal dr ku di Pdlmn Papua, skalian ku ucapn thx bgt, sudh hmpir 1,5jam(maklum,ane bru bljr nge blog...heheehee), nyobain otak- atik, alhmdulillh brhasil jg,& wrna,size,font nya jg bs di set/ubah. Oyauw, klo smpat, singgah" di gubuk ane. Ditggu y.
Maturnuwun.

17 November 2010 09.09

Salam Sahabat
Berkunjung untuk silaturrahim sekalian Mengucapkan Hari Raya Idul Adha

Anonim
21 November 2010 20.24

Ternyata Semuanya DI kerjain .....HAHAHAHAHA

Voe kalimantan
10 Desember 2010 18.56

kalau dimasukkan di Java script kog ga bisa ya..
gimana caranya supaya bisa dipasang dg java script.. saya udh mecoba caplok sini, caplok sana.. tapi tetep ga bisa, mohon bantuannya & mari kita pecahkn bersama...
balas yah...

19 Desember 2010 05.04

kalau cara membuat border untuk label cloud ini gimana...

24 Desember 2010 13.15

mantab abiez....saya sudah bisa bang...makasih ya...bang kalau merubah warna font link bgmna caranya....makasih

29 Desember 2010 22.45

Mantab gann thanks yea dah bisa nih

jgn lupa kunjungi
Toko Cheat Game On & Off Line Gratis

====================================
||~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~||
||~ http://scd-blogs.blogspot.com ~||
||~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~||
==================================

Dari Berbagai Sumber,Menyertakan Link,Sehari Update 3 - 10 Kali

6 Februari 2011 16.44

mantabs

24 April 2011 15.22

Sukses gan =))hahay XD

bagi yang mau lihat hasilnya bisa disini

http://todojishikari.blogspot.com/

5 Juni 2011 04.31

mas..sya ga nemu kode sidebar'y..gmn donk??

13 Juni 2011 22.44

ta seperti yg q harapkan...

19 Juni 2011 14.06

sip pollll!

2 Juli 2011 15.49

thanks bos...sepp

3 Juli 2011 23.11

Wah Saya suka sama blog ini,,,, Backlink saya,,ya,,,,n tukeran link yukk.....

21 Juli 2011 21.02

template blog saya ga ada text itu apakah ada similiar text"a

mohon bantuannya thanks

25 Agustus 2011 11.30

ga ketemu kode



udah hamppir 1 jam nyari kode ginian doang :(

26 Agustus 2011 22.26

makasih atas infonya !

16 September 2011 09.47

izin praktek gan..!!

17 September 2011 14.59

ko punyaku ngga ada kode html kaya gitu ya...tolong dong

18 September 2011 09.40

code htmlnya ko ga da ????

yg <b:section class='sidebar'......

24 September 2011 08.39

izin pake gan..!!!

16 Oktober 2011 10.42

mas nyari label text menjadi label cloud nya dimana...???

27 Oktober 2011 20.37

Terimaa kasih yach tutorialnya

17 Desember 2011 05.30

thx ya, sya coba dulu.
http://whendroblog.blogspot.com

1 Januari 2012 14.14

Mantap gan !
Udah muter-muter akhirnya ketemu disini..

Izin taut..
http://aythinet.blogspot.com

16 Januari 2012 08.22

thanks atas informasinya yang sangat bermanfaat dan mudah dicerna

15 Februari 2012 18.22

sukses 1000000 %

13 Oktober 2012 21.27

Thanks yaa, bermanfaat banget...

11 Desember 2012 03.30

di blog saya kok g' ngaruh yah gan.. apa ada yg salah gan ??

11 Desember 2012 03.31

ijin coba bro , keren nih artikel nya

15 Maret 2013 20.51

makasihh,,mantap sekali postingan nya gan,,,punya saya sudah berhasil pasangnya
coba lihat..
di http://dhanicyx.blogspot.com/search/label/Hp%20Java

18 Maret 2013 22.15

mau dicoba nih kayaknya tampilannya bagus banget, kunjungi juga blog saya di http://bloggerbondowoso24.blogspot.com/

Poskan Komentar

Reader Community

Recent Comments