Elang Antarnusa: Menambah Tiga Kolom dibawah Header

Sebenarnya sudah banyak yang memposting artikel ini. Tetapi saya sekedar memberikan ilmu kepada Paksi-Dirgantara yang merequest cara menambah multy kolom pada blog. Sekalian buat kawan blogger, mungkin ilmu ini bisa dicoba.

Untuk lebih paham agar memperhatikan langkah-demi langkah.
1. Login ke account blog anda.

2. Klik Tata Letak >> Edit HTML.

3. Centang Expland 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 {

background:url(http://i792.photobucket.com/albums/yy201/elang-antarnusa_99/background.png)repeat-x;
text-align:center;
font-weight: strong;
font-family: Georgia;
margin: 0px 0px 15px;
padding: 8px 0 10px 0px;
color:#000000;
font-size: 18px;
letter-spacing: 1px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;}

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

#bottom ul li{ background:url('http://i792.photobucket.com/albums/yy201/elang-antarnusa_99/folder.jpg') 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://i792.photobucket.com/albums/yy201/elang-antarnusa_99/folder.jpg') 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 :

Nb: Fokus <div id='footer-wrapper'>

6. Copy paste kode berikut ini tepat sebelum kode diatas.

7. Langkah Terakhir Simpan Template anda.

Ket: Sebenarnya gampang! Jika kawan blogger pintar pasti bisa memvariasi sendiri. Saya kasih keterangan-keterangn kode diatas oke.

-->> #bottom { width: 990px;

lebar kolom keseluruhan, sesuaikan dengan lebar template sobat.

-->> background:url(http://i792.photobucket.com/albums/yy201/elang-antarnusa_99/background.png)repeat-x;

latar belakang (background kolom).

-->> color:#000000;

Warna tulisan judul.

-->> #left-bottom { /* kolom kiri */ background:#FFFFFF; width: 300px;

Lebar kolom kiri dan warna latar belakangnya.

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

Untuk membuat garis melengkung pada garis atau sisi tepi.

-->> 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 */

Untuk ketebalan garis pada sisi-sisi kolom. #1B2A0A merupakan warna garis (border).

-->> http://i792.photobucket.com/albums/yy201/elang-antarnusa_99/folder.jpg

icon untuk kode ul li

Kalau ada yang kurang paham silahkan ditanyakan. :)