Membuat Tiga Kolom Dibawah Header

Jika pada Posting sebelumnya saya membahas tentang Membuat Tiga Kolom Diatas Footer, Untuk posting kali ini saya akan coba sharing tentang bagaimana Membuat Tiga Kolom Dibawah Header.

Mungkin sudah banyak yang memposting tentang trick ini, tapi ga ada salahnya saya coba untuk mengulasnya kembali, walaupun agak telat. Tertarik untuk membuatnya ? ikuti tahapan-tahapan berikut ini :

    * Log in dulu ke blogger
    * lalu pilih Tata Letak
    * klik Edit HTML
    * Beri tanda centang pada kotak kecil kanan atas
    * Kemudian cari kode ]]></b:skin> dan
    * Letakkan kode di bawah ini datas ]]></b:skin>

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

      }

      silahkan anda modifikasi susai dengan lebar kolom tamplate anda.
    * Kemudian kita akan membuat id untuk properti elemen yang baru saja ditambahkan. cari kode 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>

    * Kemudian tambahkan kode di bawah ini persis dibawah nya

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

    * Simpan tamplate anda dan lihat hasilnya.

       Selamat mencoba.....