Jun 21, 2009

How to Create Multicolumn Labels/Categories ?

Usually we use default labels/categories blogger widget. But if there's too many labels, it become too long. There's three tricky option to simplify labels widget.
  1. Create multicolumn labels. You can see the example at my sidebar. Divide labels become two column
  2. Use scrolling option
  3. Use dropdown option
Now we try to make multicolumn labels only using CSS. No need heavy loaded- javascript as tag cloud widget. Suggested to make new section. Create section for labels and then put before footer. Why we should create new section? If we set multicolumn on sidebar, it will impact to another list widget.

The point is, create 4 column labels in lower section. You can preview the example here

Here's how to

Open Edit HTML and Create CSS code

1. Copy these CSS code below and paste before ]]></b:skin>

#category-wrapper {
width:960px;
clear:both;
margin:0 auto 10px;
padding-top:15px;
line-height: 1.6em;
text-align:left;
border-bottom:1px solid #efefef;
}

.cat {
color: #000000;
line-height: 1.5em;
}

.cat ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.cat ul li {
float:left;
width:22%;
list-style-type: none;
margin: 0 0 5px;
padding-left: 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_w8WszkdatX2-Pn-r27sgjoACbSOnmeR4HctWgdpCfvCWN2btG6VdYolOp8QG4LN6F3WZJQf0fKUxE6xpfAzIKGyWuhekD46MQUqVMqqKsaoHalT-GMCZiwOuauhyphenhyphenVOL41OYGBGdywnk/s320/li.gif) no-repeat left center;
}

.cat .widget {
border-bottom:1px dotted #F7F7F7;
margin:0 .5em 1.5em .5em;
padding:0 0 1.5em;
}


Note :
#category-wrapper {
width:960px; adjust this value to your current template size

.cat ul li {
float:left;
width:22%; adjust this value, If you want to make two column set to about 45% , make three column set to about 33% .

2. Copy these code below

<div id='category-wrapper'>
<b:section class='cat' id='cat'>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
</b:section>
</div>


Paste before

<div id='footer-wrapper'>


Save Template


Now you've created special wrapper for Labels widget

Thanks to Herro

62 comments:

  1. Hi Cebong Ipiet. I followed the instructions. But I did not get the 4 column labels in the lower section. Instead I got 1 column, like thw original one. Please advise. Thanks

    ReplyDelete
  2. @anne: have you put your label to thats section? drag your labels widget. From page element of course it only show one column, but when you preview it, it's automatically divide to 4 column

    ReplyDelete
  3. @anne:could you send me your xml code

    cebong.ipit@gmail.com

    ReplyDelete
  4. I just sent to your email. Thanks cebong ipiet.

    ReplyDelete
  5. hi anne, it's seems you have to remove your css code
    at first step, put that css code before this

    /** Page structure tweaks for layout editor wireframe */
    body#layout #ga-ads{display:none;}

    ReplyDelete
  6. once more, to make categories tittle same with sidebar title


    find these code

    #sidebar-right .widget h2, #sidebar-right h2{border-bottom:1px solid $sidebartitlecolor; color:$titlelinkcolor; font-size:17px; font-weight:normal; margin:5px 7px 0pt; padding:0pt 0pt 5px}

    add #category-wrapper h2 so all code become

    #sidebar-right .widget h2, #sidebar-right h2, #category-wrapper h2{border-bottom:1px solid $sidebartitlecolor; color:$titlelinkcolor; font-size:17px; font-weight:normal; margin:5px 7px 0pt; padding:0pt 0pt 5px}

    ReplyDelete
  7. hi cebongipiet. finally, I got my 4 column labels. thanks a lot my friend :)

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Hi cebongipiet... thanks for your tuts, i will try it and close windows until undestand... and sending my mouse to your blog... Keep writing my best friend... (SKSD)..

    ReplyDelete
  10. mantep bong.. sbenernya dr dulu mo ta' tanyain pada ebong.. tp lupa melulu. hihihi...

    sebelumnya, sorry bong pake nickname Stop Dreaming Start Action. Hehehee.. dukung sy bong yach.. :D

    thanks
    sukses selalu 4 ebong... :)

    ReplyDelete
  11. whehehehe semangat giq... waduh diriku sudah mendukung yg lain ekkekeke tumpang tindih ntar
    tapi silahkan saja pke nick itu

    ReplyDelete
  12. cebong..aku lagi pake template sophaholic karyamu nih. keren banget ya..kamu hebat bener sih bisa bikin template kayak gitu. saluuutt....

    ReplyDelete
  13. @mbak cerpenis:hehhehe makasi ya mbak... semangaat

    ReplyDelete
  14. numpang lewat ya...wakakak....salam kenal aja nih! thanks

    ReplyDelete
  15. thanks for sharing this.. good info for me :p

    ReplyDelete
  16. eh, opo iki bong, gak mudeng diriku..

    tumben diriku gak mudeng...

    biasane malah gak dong blas... huwakaka..

    raup sik ndop...

    ReplyDelete
  17. This is a good one that i'm looking for this tips thank you..

    ReplyDelete
  18. mksh nih info ttg Create multicolumn labels.
    sebenernya dah lama mau coba, tp rada males nih .

    ReplyDelete
  19. sy dulu dah pernah coba,tpgak berhasil.
    mungkin saya akan coba lagi.
    mksh infonya

    ReplyDelete
  20. hem...
    buat multicolumn label mmgagak-agakpusing mb, terutama buat aq yang cuma blogger biasa. tpgak apa wes, mo coba dulu

    ReplyDelete
  21. mbak ipiet thx atas templatenya. bagus banget
    kapan2 kunjungi blogku ya...

    ReplyDelete
  22. wah mantab nih tutor tapi sayang basa enggris gak mudneg aku !!

    ReplyDelete
  23. Im waiting your new template hehehe

    ReplyDelete
  24. ehhh ngomong2 can you give me sample about this
    koyok opo label multikolom iku?

    ReplyDelete
  25. Hi cebong ipiet! I love your work! I couldn't find any other way to get ahold of you (email, etc)...was wondering if you would ever create a custom layout for anyone, and if so how much you charge? Let me know how to get in touch with you if you are interested!

    Thanks!
    Jennifer

    ReplyDelete
  26. @jen: hi jen... you can contact my email
    cebong.ipit@gmail.com
    thanks

    @gondes: i've said about that, check on my sidebar, that two column categories

    @aldrix:makasi drix kunjungannya

    @chorry:makasih ya chorry...

    ReplyDelete
  27. my god i love this blog it really work my blog http://jonathanorbuda.blogspot.com

    ReplyDelete
  28. Mbak tak kirain ini tutorial cara buat di kategori kayak punyanya mbak cebong.
    Soalnya saya pengen banget bisa buat isi Categories jd 2 kolom.
    Klo da waktu di buat dong mbk tutorialnya. Please...
    Ngarepdotcom

    ReplyDelete
  29. @desainku:iyah ini sama aja kok.. yg di tutorial kan saya contohkan membuat section baru.. bisa saja dengan mengedit .sidebar li{

    .sidebar ul li {
    float:left;
    width:22%;
    list-style-type: none;
    margin: 0 0 5px;
    padding-left: 15px;
    background:url(http://3.bp.blogspot.com/_nxOMLf2KJwU/Se3APz2kMDI/AAAAAAAABYA/A0yrmil99mw/s320/li.gif) no-repeat left center;
    }

    ReplyDelete
  30. Hi Cebong. Mau blajar how to make top bar yg biasanya dekat bagian atas tu such as
    Home|About us|Menu1|Menu2|etc....
    I dah buat label column, tapi now nak tahu pula nak naikkan dia ke atas ;)
    Nine from M'sia

    ReplyDelete
  31. @norazlina: ditunggu post berikutnya ya :) for next post about navigation menu

    ReplyDelete
  32. makasih banyak ya..pantau websateq dong dan q minta comennya bguat di perbaharui

    ReplyDelete
  33. Hi there, it seems I cannot find this text on the html from my blog:
    div id='footer-wrapper' (cant include the <> in comment post)
    Is there another name?

    ReplyDelete
  34. @melanie: that's only an example, the main point is put it before your current lowest section, it could be
    footer, or credit

    ReplyDelete
  35. Thanks Ipiet, I understand now. Is there a tutorial or instructions to create one similar to yours, at the top of the page on the sidebar? The categories at the bottom are great, but I'd love to have it closer to the top. Thank you so much, your work and blog information is fantastic.

    ReplyDelete
  36. @melani: i apply that code to my sidebar , just give certain width on

    .sidebar ul li{ width:45%}

    :)

    actually you can put it everywhere

    ReplyDelete
  37. but remember, if you put it to sidebar, it will be applied to all list. including your archive list. So I create top-sidebar section and put that code.I prefer show my categories than archive :)
    try it first hehe

    ReplyDelete
  38. Hey young man!All of the things you post here are great.Keep up the good work.

    ReplyDelete
  39. I had a huge collection of labels and hence you post really helped me in dividing the label and thus keeping the height of labels less.

    ReplyDelete
  40. Hory2-Hory2-Hory2,,, akhirnya Mbak setelah 1 hari 1 malem gak update cuma buat otak atik ni weidget berhasil juga ... Mbak Makasih bnyak ni buat Label 2 kolom...

    Semua Diriku dah berhasil.. klik dan lihat ya...

    Hi all, myself already successfully installed this weidget... you can see at my blog

    ReplyDelete
  41. satu kali lagi makasih mbak atas tipsNya
    Once more, Thanks for all!!

    ReplyDelete
  42. waduh mba atau mas niy??
    maaf saya baru pengen belajar buat layout blogspot sendiri, tapi masiy bnung harus mulai darimana?

    biasanya saya buat layout untuk multiply.
    http://3snahouse.multiply.com

    Mohon sarannya mba/mas?

    alam kenal
    ^^

    ReplyDelete
  43. great xml blogger templates at this site, no joke

    ReplyDelete
  44. Cebong..i tried many times but still can't get 2 columns for my right side bar??
    Kindly help :-P

    ReplyDelete
  45. hi cebong , saya uda nyoba masukin , tapi saya ngga nemuin yg div id='footer-wrapper' di HTML saya (no.2) . gimana ya ?

    ReplyDelete
  46. @agung: itu bisa di taruh mana saja, bisa di footer, atau dimanapun, bisa juga bikin div id='footer-wrapper' sendiri (didefinisikan di CSS)

    ReplyDelete
  47. masih gabisa tuh . saya pusing banget ~_~

    ReplyDelete
  48. thanks you for your sharing.... !!!!

    ReplyDelete
  49. thank you for share. I love this site.

    ReplyDelete
  50. This is a good one that i'm looking for this tips thank you..

    ReplyDelete
  51. Koq gak bisa ya kalo di terapin di template comunity. Bantuin dunk piet..

    ReplyDelete
  52. One accessory that many pandora beads women consider a necessity is a handbag. In fact there is such a demand for pandora bracelet ladies handbags in the marketplace that the selection just constantly pandora bracelets ebay increases. As each new season begins there are pandora bracelets uk dozens of new designs of ladies handbags available. pandora charm bracelet Every woman has her own sense of style and therefore she’ll tend to purchase ladies pandora charms handbags that reflect that. For some women they only buy designer ladies handbags. pandora charms bracelets These particular types of ladies handbags are crafted from the finest materials and pandora jewellery carry the names of some of the most celebrated designers in the world. Designer pandora jewelry ladies handbags are very expensive but many women view them as a fashion pandora uk investment.

    ReplyDelete
  53. Hi thanks for the tut , i try to add it on my blog
    techub

    ReplyDelete
  54. The large range of diamond thomas sabo jewellery often makes it very difficult for men to decide thomas sabo what type of thomas sabo ireland to purchase for their loved ones. Diamonds symbolize love, thomas sabo charms and thomas sabo bracelet , which makes it hard to choose the right piece of jewellry from the large variety of Diamond rings, Diamond earrings, Diamond thomas sabo pendants, Diamond thomas sabo necklaces, Diamond bracelets and of course Loose diamonds- which are always perfect since they can be set in any type of silver jewellery . We can’t choose the perfect diamond thomas jewellery for you but we can help you with 5 easy steps:Step 1- Knowing what she likes:Narrow down the type of sterling silver charms she likes to wear by observing the jewelry she wears in general, and on different occasions.The thomas jewellery she wears may vary.For example, her daytime jewelry may be different from the silver bracelets she wears when she goes out or to formal occasions.Knowing the color and size of the jewelry she wears:

    ReplyDelete

Hi, thanks for visiting. You can leave your comment here

 

Ipietoon - Blog Design and Online Business Blogging Since 2008