Cara Membuat Multi 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXTQvHnfoXFumt6yv1y-AW50OblcHuLHLSgfqo0wK_59-INI2EOdFAyVLxMkoj_7Au55Z5N5I2FBGh48fgmGQ1DJmT3TZP08N-Tj6l5vtrW0uAUK2aAL89RwKA_f_2ScA9wx7zQ8GzSZ5m/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXTQvHnfoXFumt6yv1y-AW50OblcHuLHLSgfqo0wK_59-INI2EOdFAyVLxMkoj_7Au55Z5N5I2FBGh48fgmGQ1DJmT3TZP08N-Tj6l5vtrW0uAUK2aAL89RwKA_f_2ScA9wx7zQ8GzSZ5m/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.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvpsWtXcx5OvZoIxVM3aLHnlfv6aivJAD6Y-x_k_vQH5nvktvkOgtbIqGgEQBct5HfHlveW7UidPbR1Ye0P1QYcT_nXkDcBRUzXjXZE7pdmBPWtwSCN23aaM-JnkFviSkuftfcO17UlnuP/s320/z3.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOy1EwkUBlfaM8_ioo7seCaXof-0gvy1wOkjwzLzlpLAjrM_cLJqWw85Mdj_-uuy25yqa5h7yiw74wXPcer63vIAsW91joKtg-l_wVQ9YBPPTjNv88jx42jedR0-iUooZpwRvYoDcjEK_V/s320/z2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivagNRbdtKYM4mkBy5-pbnurKabFLXF7UnuHZGv3vnZeuy09e2OFhsFSJ3ipHOZUn2j_O7DD4VJ9VheTgWNLiQNsH9zyHQtzuey2RVl-QKjrB26PprpkIhHBHnoig0C3HousQq7d0ZRStL/s320/z1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwHeDn8LCA2oGm43ihRMI_YDIjtnsFseZ94ahM1nmDdRqL2aI7V8BtDMsiDZPKVw_VKSlnBucj_I8Q5Z_Lp1_Hkq3EGox95jClGZJZA0gpFIfcVn_Qz3xKwaX1uLI0Q-JrUIkbuOXNBMR0/s320/d1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIcLWJRcO2bo8wgOTDuJV_DTnQiaqydH9Qx6zRHsDS3ewFC9yGk8gjUx_FzCwerL8_yfoisLfupCGo5QWoIFPUxtIhCvRXRbiAGPe1YY9zRaJNZX45U-srs9xaxrv_vPjxxtxSZdjYa56h/s320/d2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXTQvHnfoXFumt6yv1y-AW50OblcHuLHLSgfqo0wK_59-INI2EOdFAyVLxMkoj_7Au55Z5N5I2FBGh48fgmGQ1DJmT3TZP08N-Tj6l5vtrW0uAUK2aAL89RwKA_f_2ScA9wx7zQ8GzSZ5m/s320/d3.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi08o9TlNz_aZWs9DQXs_TysFsjbnhwbf-sYOrscnRYSXMLIqzxVGBaeDRmIM5qe_n6C_RLg7Qtjd3FZc7nQ5NO6IwYkRsi58DIezD3TNSfHeCv8t8UMbWmaH7aLX8qRwzrSWP6ybFF2XlX/s320/c1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuQMbEp9IfI3kH2aRtVfuvsQmeLcGOLVZ6Hx6oauj3wm3_6B9IkWM614MB_QsM66Yyj2uuFUuV0IeR2WFRSCb4vfQVEhfvP-lP29S9q9ZA8ROn_2vShFn_3dtZgYhHH4GjIfO5ShKbY1rW/s320/c2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg63f_3_GWcTOeMMTW-O1eww-9cRwu78yllmvgavSoD4QvNVAH0LLF7dZWpksT6BD3WqNZb5-XWhG7nDqz4OlyxEzCKAbMIjBQZ0WI9lUe1_WTWRZbZgDcZvRD8E64JWMA_JBEL1xovfx5z/s320/c3.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3i7a7ST4WI2nmdrhyphenhyphenbOuKHEPNC_-2Kab_TGv7p_FUOeYlCnEISrw3_we8MDHzn8bebFTI7DezjlHoDqAmjCVP-3Vy-F5dDfYIe9SHAR96EXOFh5BCjwDX6w3_xRrL6Jhi2m8ucr8nJtlK/s320/a1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPW0uDvoAJ-k0yCCXXiCbzO186HeohwBcBWvho553UVnf90_pLQRM5QhQIO5zWjtDJnK08m266bxWumLRdqF4gA4HCoK7R1HGG7Pa1F2JFAIjwmfxMBBMu0K6RKS6sTKY200C4nKWPVjhC/s320/a2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw09DBzSo9SbLFmN3_4LU1INOU_j5onIPMbR5oNVYnZIgoZF8U73NIjF09cHv3LYYrORM48RWpsK7iWLRk0GCU0At-nydnQxbbwrNC0ssPMCDysbV4ugzrUhp6VKFkpNZAsF-x4J890uWh/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 !

Oleh : Dody FariaL Pada hari Jumat, September 11, 2009

Tweet

Berlangganan artikel terbaru via Email

Artikel Lainnya :