Cara Menambah 3 (tiga) Kolom di Bawah Header

Gambar 3 Kolom di Bawah Header

Langsung saja, jika Anda ingin menambah 3 (tiga) kolom di bawah header blog Anda, berikut ini Cara Membuat 3 (tiga) Kolom di Bawah Header:

1. Login dulu ke Blogger, pilih Rancangan/Layout => Edit HTML, kasih tanda centang pada Expand Template Widget;
2. Cari kode ]]></b:skin>;
3. Sebelum atau di atas kode ]]></b:skin>, letakkan kode di bawah ini:
   
   
   /* Top Header
   
   ---------------------------- */
   
   #topheader {
   
   width:930px;
   
   clear:both;
   
   float:left;
   
   
   color:#333;
   
   background:#fff;
   
   margin:0 auto;
   
   padding:0 0 10px;
   
   }
   
   
   
   #topheader a:visited {
   
   color:gray;
   
   text-decoration:none;
   
   
   }
   
   
   
   #topheader h2 {
   
   font-size:11px;
   
   font-weight:700;
   
   line-height:1.4em;
   
   text-transform:uppercase;
   
   border-bottom:1px dotted silver;
   
   margin:0 0 10px;
   
   
   padding:20px 0 2px;
   
   }
   
   
   
   #topheader ul {
   
   color:#333;
   
   margin:0;
   
   padding:0;
   
   }
   
   
   
   #topheader ul li {
   
   
   list-style-type:none;
   
   background:fff;
   
   border-bottom:1px dotted #ccc;
   
   padding-left:17px;
   
   margin-top:2px;
   
   }
   
   
   
   #left-topheader {
   
   width:360px;
   
   
   float:left;
   
   padding-left:15px;
   
   }
   
   
   
   #center-topheader {
   
   width:230px;
   
   float:left;
   
   padding:0 20px;
   
   }
   
   
   
   
   #right-topheader {
   
   width:260px;
   
   float:right;
   
   padding-right:15px;
   
   }
   
   
   
   Keterangan:
   
   #topheader adalah kode untuk kolom secara keseluruhan;
   
   
   #left-topheader adalah kode untuk kolom sebelah kanan;
   
   #center-topheader adalah kode untuk kolom pada posisi tengah;
   
   #right-topheader adalah kode untuk kolom sebelah kiri;
   
   Width: px adalah kode untuk ukuran lebar kolom;
   
   Padding adalah jarak sela antara kolom satu dengan lainnya;
   
   
   
   
   Silahkan dimodifikasi, dengan catatan harus sama dengan jumlah lebar pada template Anda dan untuk mengetahui ukuran lebar template, cari kode: #outer-wrapper dan lihat nilai width-nya;
4. Selanjutnya cari kode di bawah ini:
   
   
   <div id='header-wrapper'>
   
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   
   <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
   
   
   </b:section>
5. Tepat di bawah kode di atas, tambahkan kode di bawah ini:
   
   
   <div id='topheader'>
   
   <b:section class='topheader' id='left-topheader' preferred='yes'/>
   
   <b:section class='topheader' id='center-topheader' preferred='yes'/>
   
   <b:section class='topheader' id='right-topheader' preferred='yes'/>
   
   </div>
6. Simpan Tamplate, selesai.

Demikianlah tutorial cara menambah 3 (tiga) kolom di bawah header blog ini, semoga bermanfaat.

= = = = = = = => Selamat Mencoba, Semoga Sukses!!! <= = = = = = = = Label: Tutorial Blogger

Artikel Terkait