Membuat Tag Cumulus di Blogger

Tulisan ini muncul disebabkan permintaan Mas Ahmad Irfan yang minta penjelasan cara membuat Tags Cumulus di Blogger. Lebih dari itu, ada permintaan lagi dari Mbak Cebong, yaitu permintaan cara membuat "Slider Content". Contoh dari Slider Content seperti yang anda lihat di halaman utama blog ini. Yaitu, Artikel yang bisa berlari-lari dan ada gambar naik turun itu.

Tapi, kami ingin menjelaskan permintaan Mas Irfan dulu, karena dia mintanya lebih dulu. :). Tentang Slider Content, kami akan menerangkan di artikel yang akan datang.

Bersamaan itu, Tulisan tentang Tag Cumulus mungkin sudah sangat banyak dan bisa ditemukan di mana-mana. Dan juga, kami mungkin hanya memodifikasinya saja.

Kami memodifikasi dengan memakai bingkai "rounded corner (tepi pojok melingkar)"

Sejarahnya, Tag Cumulus ini dibuat oleh Mr. Roy Tanck, kemudian diadaptasi oleh Mrs Amanda. Awalnya, tags cumulus dipakai bagi wordpress, kemudian disesuaikan ke Blogger oleh mereka.

Selanjutnya, apa sih Tag Cumulus itu? Tag Cumulus adalah sebuah fitur/widget berkaitan dengan Label, Categories, dan Tag. Yaa... Tag Cumulus mengorganisasi Label/Categories.

Kelebihan Widget ini adalah bahwa dia bisa berputar-putar sehingga terlihat sangat menarik. Dan mungkin, dia bisa menjadikan-efisien (baca: menghemat) tinggi area sidebar blog kita.

Tentang Demo dari Tag Cumulus, anda sekalian bisa lihat di samping, di sidebar kami.

Selanjutnya, langkah-langkahnya adalah :

Babak Nol
1. Masuk ke Blogger
2. Pilih Tab Layout
3. klik Edit HTML
4. Pilih Expand Widget Template

Babak Kesatu: Menaruh kode CSS Bingkai Rounded (tanpa gambar)

1.
Copy kode CSS dibawah ini:

<style>
#xsnazzy{margin:0 0 10px 0; background:transparent}
.xtop, .xbottom{display:block; font-size:1px; background:transparent}
.xb2, .xb3, .xb4{display:block; overflow:hidden; background:#FFFFFF; border-left:1px solid #0066FF; border-right:1px solid #0066FF}
.xb1, .xb2, .xb3{height:1px}
.xb1{background:#0066FF; display:block; overflow:hidden; margin:0 5px}
.xb2{border-width:0 2px; margin:0 3px}
.xb3{margin:0 2px}
.xb4{height:2px; margin:0 1px}
.xboxcontent{display:block; padding:5px; background:#FFFFFF; border:0 solid #0066FF; border-width:0 1px}
</style>



Keterangan :
Plis, lihat tulisan yang kedap-kedip itu.
a. tulisan ungu #FFFFFF = warna background dari Bingkai
b. tulisan biru #0066FF = warna garis tepi dari Bingkai
Anda bisa merubah kode itu dengan kode warna sesuai selera anda.

2. Taruh kode tersebut di atas kode </head>

3. Save Template-mu

Babak Kedua: Menaruh Kode HTML Bingkai dan Tag Cumulus

1. Cari kode HTML yang menunjuk pada 'id' atau 'class' dari area Sidebar Blog anda...


kode HTML sidebar tergantung dari jenis template anda. Ini bisa bervariasi. Misalnya: pada blog saya adalah id=sidebar-wrapper.

Tapi, dalam blog anda mungkin bisa lain. Misalnya: Mungkin juga, id='sidebar' ; id='column02' ; dan sebagainya.


2. Kemudian, copy kode dibawah ini:


<b:section id='sidebar9' preferred='yes' showaddelement='no'>
<b:widget id='Label9' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<div id='xsnazzy'>
<b class='xtop'><b class='xb1'/><b class='xb2'/><b class='xb3'/><b class='xb4'/></b><div class='xboxcontent'>

<b:if cond='data:title'>
<h2 style='font-family:arial'>Article Categories</h2>
</b:if>
<div class='widget-content'><center>
<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>Distributed by <a href='http://analisis-fiqih.blogspot.com'>Cahaya Biru</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "330", "200", "9", "#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'/>
</center></div>
</div><!--xboxcontent-->
<b class='xbottom'><b class='xb4'/><b class='xb3'/><b class='xb2'/><b class='xb1'/></b>
</div><!--end of xsnazzy-->

</b:includable>
</b:widget>
</b:section>




Keterangan:
a. Tulisan warna merah 'Article Categories' adalah title dari Widget. Anda bisa merubah sekehendak anda. Misalnya: kategori artikel, Grup Artikel, dan sebagainya.

b. Tulisan warna hijau = kode HTML pembuka (yang diatas) dan bingkai penutup (yang dibawah) dari bingkai Rounded corner.

c. Tulisan warna biru adalah kode-kode yang berhubungan dengan Widget.
c.1. Angka 330 (tanpa px) = lebar pixel widget
c.2. Angka 200 (tanpa px) = tinggi pixel widget
333333 (tanpa #) = kode warna dari Tulisan
c.3. #ffffff = kode warna dari Background Widget
c.4. Angka 12 = ukuran font dari widget



6. Taruh kode tersebut, di manapun anda suka. (saya sarankan dalam area sidebar yaa...)

7.Save Template-mu

Setelah disimpan, lihat hasilnya. Apakah tambah rusak atau tambah hancur...... sudah hancur....??? heheheh.......
bercanda...bercanda...

Selamat Menikmati....

P.S.


Jika anda tidak berkenan memberi bingkai "Rounded Corner" pada Tag Cumulus itu, dari babak 0 langsung loncat saja ke babak 2.

Saya beri kode pembuka dan penutup section agar lebih aman bagi blogger-blogger yang sangat newbie. Btw, saya juga newbie kok.
Section pembuka dan penutup itu boleh didelete. Ini berlaku ketika anda sudah memasukkan kode widget ke <b:section> dalam sidebar anda.

57 comments:

  1. Cebong Ipiet  

    24 Januari 2009 22.41

    ck ck ck ck sabar bwanget yak dirimu posting html ky gituh xixixiixix

  2. Cahaya Biru  

    24 Januari 2009 23.20

    aku wedi diceluk wong sing kikir ilmu bong....
    dadi aku posting ae.... (cuma copas dan sedikit mengarang kok)

    tapi jangan dikerjai yaa.... :D

  3. ahmad irfan  

    25 Januari 2009 19.20

    masyaallah......baru lihat kalau sudah diberikan apa yang diminta......
    saya baca dulu yah.
    terima kasih banyak atas bantuannya

  4. tracker  

    16 Februari 2009 20.30

    artikel bagus bro....
    setelah otak - atik ternyata berhasil juga....
    untuk hasil cumulus dyang jadi kunjjungi bloggku yaa. thk's

  5. genial  

    20 Februari 2009 21.53

    alon alon kang :P

  6. .  

    23 Februari 2009 19.09

    wow... njlimet penuh tantangan nih.....

  7. joe  

    11 Maret 2009 07.47

    wah mbulet deh, tapi asik...

  8. Ardhi Blog  

    16 Maret 2009 08.16

    Maaf saya newbie. Tag cumulus tuh apaan ya ???
    trus cara bikin page navigation seperti punya om kek gimana neh. Btw. arek suroboyo yah???

  9. tbox indonesia  

    16 Maret 2009 22.40

    mas kalau mo buat posting sesuai kategori gimana ya?

  10. Cahaya Biru  

    16 Maret 2009 23.16

    @Ardhi; dulu saya sekolah mulai sd sampai sma di surabaya. tapi, Saya asli sidoarjo. itu saya dapat dari bloggerbuster.com

    @tbox; saya sendiri bingung maksudnya. coba tanya ke catalog-tutorial.blogspot.com yaaa

    @joe; hehehehe... :)

    @Ahmad Irfan; sama-sama mas irfan

    @genial; :)...

    @tracker; selamat yaa...:)

  11. mynet89  

    5 April 2009 21.37

    tanks

  12. Hendriono  

    6 April 2009 19.49

    Lah mumet temen iki kode... Sampe nguntal antimo...
    Cahaya Biru... begitu indah templatemu... ingin sekali aku memperlajarinya... tapi.... ternyata CSS-nya uakeh tenan... akhirnya aku menyerah... wes ben nggole sing kepenak wae... hehehe... lam kenal mas...

  13. majron  

    1 Mei 2009 01.34

    bagus juga, tapi aku bisa masang gak ya?

  14. Anonim  

    19 Mei 2009 02.10

  15. ade  

    21 Mei 2009 09.22

    Nice Post..

  16. bl@nkster  

    22 Mei 2009 12.40

    Ini yg saya cari, thanks tutornya bro..

    Buat temen2 blogger, ada yang mau KAOS BLOGGER GRATIS? Jangan lupa mampir ke blog saya.

  17. RanggaGoBlog  

    28 Mei 2009 11.09

    thaaaaaaaaaaaaaaaaaanks..... sukses daaaaaaaaaaaaah...... liat hasil karyakuuh yaaa... :)

  18. HasruL  

    4 Juni 2009 17.35

    ma'af tapi katagorynya kok tidak muncul semua?

  19. iyandri  

    9 Juni 2009 21.20

    fuih.... akhirnya jadi juga makasih mas tutorialnya. Keren abis

  20. ran_wijaya  

    12 Juli 2009 21.27

    keren2 mas artikelnya, jadi pengen langsung [raktekin nieh tutorial....

    salam kenal

  21. KONTES SEO ARISTIA WIDA RUKMI  

    23 Juli 2009 00.35

    Kalo ada waktu aq mo cicipin.... manis pa asam neh comulus..... ehehehe..

  22. Be My Side  

    2 Agustus 2009 07.18

    Thanks bangets bro, I Like it

  23. Flar3star  

    17 September 2009 18.38

    how come mine doesnt work ? :( please help me , my msn is genesis.89@live.com thanks !

  24. amanda  

    21 Oktober 2009 10.18

    ngga bisa TT___TT

  25. Roqib's Blog  

    15 November 2009 10.51

    ok banget bozz buat blogku

  26. sisy  

    22 November 2009 04.26

    cumulus itu semacam tulisan yang berisi konten kata kunci postingan he...he tapi ngumpul dan ringkas , jadi engak habiskan tempat gitu lho...he..he aq jga newbie

  27. teh rosella  

    28 November 2009 13.50

    thanx broo...pingin coba nih

  28. tukarfile  

    15 Desember 2009 15.09

    dah saya coba! keren euy! liat aja di http://www.tukarfile.blogspot.com pokonya tambahin lagi tips yang lainnya!

  29. ephoo  

    7 Januari 2010 14.37

    codenya kug ga manjur di blog aq ya?

  30. ephoo  

    7 Januari 2010 14.40

    codenya g manjur di blog aq hadehw

  31. epho  

    8 Januari 2010 16.16

    keren neh aq ada cara bikin tag cloud cumukus yang laen.

  32. nukay81  

    21 Januari 2010 04.38

    tag cloud-nya dah saya pasang... trims ya bwat info-nya : )

  33. Van De Lok's WellArt  

    31 Januari 2010 08.11

    masih bingung....

  34. alfian masajid  

    6 Februari 2010 15.24

    mas saya mau tanya, bisa tidak bacground wdgetnya di bikin transparan, jadi sama kaya warna blognya

  35. Santri-mbelinG  

    23 Februari 2010 14.01

    q da lakuin cmw kq g bsa y???

  36. Santri-mbelinG  

    24 Februari 2010 23.25

    kq gag bisa ya maz????????????????????????????????????????????????????????????????????????????????

  37. Santri-mbelinG  

    25 Februari 2010 01.07

    maz...
    dari kemarin saya terus mencoba tapi koq g bisa2???
    apa anda mau membantu saya mengedit htmlnya???nanti saya kasi email n pasword blog saya!!!
    mudah2an amal ibadah njenengan di terima!!!Amin...

  38. Anonim  

    28 April 2010 11.34

    sip

    n

    JOS

  39. Evet Hestara  

    3 Mei 2010 13.39

    entah kenapa saya masih bingung dengan tutorial ini :(
    anda pandai sekali dalam membuat template, kalo boleh tau bagaimana cara memulai belajar membuat template blog? HTML? CSS? JAVA?
    mau tukeran link gak? saya sangat tertarik dengan blog anda.
    ~Balas komentar ke blog saya ya~

  40. Naufal  

    8 Agustus 2010 05.49

    Makasih bro artikelnya...
    Silahkan berkunjung balik kalo sempet...

  41. Hendrik XCode  

    8 September 2010 03.46

    Salam kenal.. Kunjungi blog gw ya
    Http://www.rahasia-hendrik.blogspot.com

    SEMUA RAHASIA ADA DI SINI..!!

  42. Teras Info  

    20 September 2010 17.56

    wah terimakasih banyak ni atas triknya....
    bisa saya coba...mudah-mudahan berhasil...

    salam kenal..n..salam persahabatan...

  43. Gadis Cantix  

    9 Oktober 2010 02.33

    salam kenal
    mampir juga di blog ane
    http://bungacantix.blogspot.com

  44. Paksya  

    10 Oktober 2010 14.44

    lngsng dicoba dulu, mg berhasil

  45. xun-cunx  

    10 November 2010 15.53

    visit……..http://www.dailygadget.blogspot.com/

  46. Azreeyan  

    11 November 2010 14.06

    mantaf coba ya bang...

  47. tian  

    30 Desember 2010 21.18

    nice post,, di coba dulu mas,

  48. soniemugh  

    31 Januari 2011 19.39

    mantab kang....
    kunjungi juga blog ane

    http://newsflaz.blogspot.com

    info-info menarik ada disini

  49. soniemugh  

    31 Januari 2011 19.41

    mantab infonya...

    kunjungi juga blog ane ya..

    http://newsflaz.blogspot.com

    info-info menarik ada disini

  50. gendos  

    3 Februari 2011 19.16

    mantaf gan infonya langsung ke TKP praktek,,, kunjung juga di http://motorheroes.blogspot.com

  51. EDY PUTRA jepara  

    23 Februari 2011 20.00

    kunjungan malem gan ....
    silahkan mapir juga di JEPARA BUMI KARTINI
    Banyak info2 menarik buat anda

    Kunjungi balek yach ..?

  52. B 4 YU  

    2 Maret 2011 19.26

    sip gan..
    kunjungi blog saya..
    http://bayusetiawan11.blogspot.com

  53. masjohnb0y  

    2 April 2011 21.13

    salam kenal
    bagi yang belum bisa silahkan kunjungi blog saya..biasanya tidak bisa karena mungkin menggunakan template baru...untuk itu silahkan check ke blog masjohnb0y.blogspot.com untuk berbagi tips2nya...
    matursuwun

  54. man  

    24 April 2011 20.35

    dari postingan ini, saya salut atas kesabaran anda menuliskannya :)

  55. jet2 holidays promotional code  

    11 Juli 2011 21.48

    wah hebat lengkap bgt hrus di coba ne..

    http://www.offermyoffer.com/vouchers/detail/jet2.com/4400

  56. Internet Marketing  

    27 Juli 2011 16.52

    pertamax banget ni gan, nice post, dua jempol dah...

  57. miomimo  

    1 Agustus 2011 14.37

    mas saya bingung lah..cobain kok malah template gak bisa ditutup..gimana itu ya?

Poskan Komentar

Template Copyright 2009 and Designed By Cahaya Biru