Cara Membuat Multi Kolom

kolom Tutorial kali ini membahas tentang design template, multi kolom, pasti sudah banyak yang tau apa itu multi kolom, tapi saya yakin masih sedikit yang mengetahui cara membuatnya. Kali ini kita akan membuat muliti kolom tepat dibawah halaman blog kita atau biasanya letaknya dibawah kolom postingan, ambil contohnya saja yang ada di blog ini dimana saya membuat 3 kolom pada bagian bawah template. Banyak variasi yang bisa sobat buat untuk mempercantik kolom – kolom ini.

 

Dan disini saya akan mencoba tambahkan kode UL LI pada kolom, sehingga jika sobat menggunakan kode ini, maka akan secara otomatis membentuk tulisan yang disertai garis putus – putus dibawah tulisan dan icon cantik yang mengawali tulisan.

 

Kali ini saya akan gunakan template yang lebarnya 1000px sehingga saya menggunakan lebar kolom 990px. Baiklah, langsung praktek aja ya biar tau.

 

  1. Seperti biasa login dulu ke blogger.

     

  2. Klik Tata Letak.

     

  3. Pilih Edit HTML dan centang Expand Template Widget. 

     

  4. Tambahkan kode berikut tepat diatas kode ]]></b:skin> :

     

    #bottom {
    width: 990px;
    position: relative;
    clear:both;
    margin: 0 auto;
    color:#000;
    float: center;
    background:transparent;
    padding: 15px 0 15px 0; }

     

    #bottom h2 {
    padding-left: 5px;
    margin: 0 0 10px 0;
    background:#0B3B0B;
    color:#fff;
    font-size: 18px;
    letter-spacing: 1px;
    border-bottom: 1px solid #000; }

     

    #bottom ul{padding:0; margin:0; color:#333}

     

    #bottom ul li{ background:url('http://1.bp.blogspot.com/_7Y9pl24WpQY/SqkUpBNdS9I/AAAAAAAAA5E/4xRuRZrjoVU/s320/d3.gif') no-repeat; list-style-type:none; margin:0 0 10px; padding:0 0 10px 20px; border-bottom:1px dashed #CCCCCC; }

     

    #bottom li{ background:url('http://1.bp.blogspot.com/_7Y9pl24WpQY/SqkUpBNdS9I/AAAAAAAAA5E/4xRuRZrjoVU/s320/d3.gif') no-repeat; list-style-type: none; margin: 0 0 10px; padding-left: 20px; }

     
    #bottom ul li a:hover {
    background: #B1ACB1;}

     

    #left-bottom { /* kolom kiri */
    background:#ffffff; width: 300px;
    float: left;
    margin-left:10px;
    padding:5px; /* Jarak antara text dengan garis pinggir */
    Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
    Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
    Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
    Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
    Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    }

     

    #center-bottom { /* kolom tengah */
    background:#ffffff; width: 300px;
    float: left;
    margin-left:10px;
    padding:5px; /* Jarak antara text dengan garis pinggir */
    Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
    Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
    Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
    Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
    Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    }

     

    #right-bottom { /* kolom kanan */
    background:#ffffff; width: 300px;
    float: left;
    margin: 0 5px 0 10px;
    padding:5px; /* Jarak antara text dengan garis pinggir */
    Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
    Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
    Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
    Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
    Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px
    }

     

  5. Sekarang tuju bagian body atau bagian bawah template, lalu cari kode yang mirip dengan kode berikut :

     

    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>

     

  6. Copas kode berikut ini tepat sebelum kode diatas :

     

    <div id='bottom'>

    <b:section class='bottom' id='left-bottom'/>

    <b:section class='bottom' id='center-bottom'/>

    <b:section class='bottom' id='right-bottom'/>

    </div>

     

  7. Kemudian Simpan Template sobat.

Sekarang sobat bisa lihat hasilnya, jika tidak sesuai, silahkan sobat ganti sesuai keinginan sobat.

 

Keterangan :

  • #bottom { width: 990px

     

    --> lebar kolom keseluruhan, sesuaikan dengan lebar template sobat.

     

  • background:#0B3B0B

     

    --> latar belakang (background kolom).

     

  • color:#fff

     

    --> warna tulisan judul

     

  • #left-bottom { /* kolom kiri */ width: 300px

     

    --> lebar kolom kiri.

     

  • -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;

     

    --> garis melengkung pada setiap ujung kolom, semakin besar angkanya maka akan semakin lebar garis lengkungnya. Jika sobat enggan membuat kolom melengkung, ganti saja angka 5px dan ganti dengan 0px. Atau hapus semua kode –moz-border-radius tersebut.

     

  • Border-top: 2px solid #1B2A0A
    Border-bottom: 2px solid #1B2A0A
    Border-left: 2px solid #1B2A0A
    Border-right: 2px solid #1B2A0A

     

    --> untuk ketebalan garis pinggir masing – masing kolom, semakin besar angkanya maka akan semakin tebal garisnya. Jika sobat tidak mau memakai garis pinggir, sobat ganti saja angka 2px dengan 0px. Dan kode #1B2A0A adalah warna border / garis pinggir kolom. Untuk kode warna bisa di lihat disini

     

  • Sedangkan kode yang berwarna merah adalah icon untuk kode ul li, saya punya beberapa gambar berserta url nya dibawah ini, sesuaikan dengan keinginan sobat. Pilih salah satu, dan copas pada kode yang berwarna merah.


http://3.bp.blogspot.com/_7Y9pl24WpQY/SqkW4ILj-VI/AAAAAAAAA6k/3SxVEYNQgv8/s320/z3.gif

 

http://1.bp.blogspot.com/_7Y9pl24WpQY/SqkW2DHdmMI/AAAAAAAAA6c/oT8Yo3-yRPg/s320/z2.gif

 

http://3.bp.blogspot.com/_7Y9pl24WpQY/SqkW0WZmImI/AAAAAAAAA6U/2VPwUUNIJDk/s320/z1.gif

 

http://1.bp.blogspot.com/_7Y9pl24WpQY/SqkUj0d-mGI/AAAAAAAAA40/D24A-Sbgnrk/s320/d1.gif

 

http://4.bp.blogspot.com/_7Y9pl24WpQY/SqkUm8odsbI/AAAAAAAAA48/KuhUdmN-uLk/s320/d2.gif

 

http://1.bp.blogspot.com/_7Y9pl24WpQY/SqkUpBNdS9I/AAAAAAAAA5E/4xRuRZrjoVU/s320/d3.gif

 

http://1.bp.blogspot.com/_7Y9pl24WpQY/SqkUbP_1-gI/AAAAAAAAA4c/77tMTtIhI54/s320/c1.gif

 

http://4.bp.blogspot.com/_7Y9pl24WpQY/SqkUdux2vgI/AAAAAAAAA4k/sYP5QM__ghM/s320/c2.gif

 

http://4.bp.blogspot.com/_7Y9pl24WpQY/SqkUgesnzgI/AAAAAAAAA4s/ntoFgblB66Q/s320/c3.gif

 

http://2.bp.blogspot.com/_7Y9pl24WpQY/SqkT_y4jxwI/AAAAAAAAA3s/hNasHuJnK4M/s320/a1.gif

 

http://2.bp.blogspot.com/_7Y9pl24WpQY/SqkUB9Ar2rI/AAAAAAAAA30/5eRXXyBdk18/s320/a2.gif

 

http://2.bp.blogspot.com/_7Y9pl24WpQY/SqkUDxWLl2I/AAAAAAAAA38/kyWABp8QaTs/s320/a3.gif

 

Untuk melihat hasilnya, silahkan sobat pasang recent posts atau recent comments pada kolom tersebut, maka akan terlihat bentuk icon pilihan sobat. Lihat contoh yang sudah jadi disini.

Selamat berkreasi !smile_wink

Berlangganan artikel terbaru via Email
Artikel Lainnya :

20 comments

11 September 2009 02.09

..waah..mantap..tp jadi banyak editan nih...di pelajari dulu dah..thanks for sharing

11 September 2009 05.51

Trims infonya sangat bermanfaat, saya save dulu yaaa.... nanti baru langsung ke TKP

11 September 2009 14.43

wah ini dia artikel yang saya suka.oh iya kak,tukeran link yuk,saya udah pasang link kakak di blog saya.saya suka dengan segala artikel kakak.karena semua berguna untuk blog saya :D

12 September 2009 02.04

bos tulungin kotak komentar aku jadi ada dua nih..hiks hiks hiks

12 September 2009 03.11

kalo pacang ini footer aku bisa jadi enam bejejer kebawah tiga tiga ... :)) :D :P kotak komentar tulungin atuuuuhhhhhh ~x(

17 September 2009 00.13

kalo pengen buat kolom'a elbih dari satu giman ya bos?
tengkyu

17 September 2009 03.55

@ fifa revolver : nah itu kolom kan lebih dr satu sob.

20 Mei 2010 13.35

:: sip

4 Juli 2010 14.19

tanks sob buat ilmunya...

4 Juli 2010 14.33

sob tdnya saya sdh bs masang multi kolomnya tp wakt mw nambah wiget knp cm satu kolom aj yang bs.. trus klu saya nambah wiget lg it ltaknya d atas wiget yg sdh saya pasang bkn d kolom slnjutnya..?

mohon pencrhannya sob...

4 Juli 2010 20.17

@bandar pulau : coba km cek lg lebarnya

9 Juli 2010 18.30

lebar kseluruhannya sy buat 970 px sob...

25 Juli 2010 05.11

Entah kenapa Label Cloud Berputar ga bisa diterapkan diblogku, trus kalau menyisipkan tabel atau multikolom pas di halaman postingan bagaimana caranya, bang?

14 September 2010 23.31

thx ,
di cba ya..
lamz knl za smuanya.

15 Oktober 2010 12.44

trimakasih infonya.. langsung di coba

Info yang bermanfaat...langsung action uji coba nih. tq...

6 September 2011 11.27

wah ini yang saya cari. thanks banged gans !!! :) saya senang maen kesini, hehe

18 Desember 2011 15.59

langsung coba gan, infonya menarik,,,
follback ea gan...

7 Mei 2012 00.49

Nice gan... berhasil :)
mampir ke warung ane gan..hehehe

8 Oktober 2012 17.18

mantap tenan

Poskan Komentar

Reader Community

Recent Comments