Menambah Elemen Halaman Di Bawah Header Menjadi 3 Kolom

Pertama Elemen yang ada :

Sekarang saya akan memposting cara menambah elemen halaman di bawah header menjadi 3 kolom, yang hasilnya akan seperti ini :

Caranya sebagai berikut :

1. Anda login dulu di blogger dengan user ID anda.
2. Kemudian anda kilk Tata Letak
3. Klik Elemen Halaman
4. Klik Edit HTML
5. Jangan lupa download template anda, berjaga-jaga kalau terjadi kesalahan anda bisa kembali ke template awal anda dengan klik Download Template Lengkap
6. Cari kode ]]></b:skin> (Untuk mempermudah pencarian pakai Ctrl+F)
7. Copy kode berikut ini :
   
   #under_header1{
   
   float:left;
   width:33.33%;
   }
   #under_header2{
   float:left;
   width:33.33%;
   }
   #under_header3{
   float:right;
   width:33.33%;
   }
   #under_header4{
   float:left;
   width:100%;
   }
   Paste di atas kode
]]></b:skin>
8. Kemudian cari kode berikut atau yang mirip kode berikut :
   
   

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidget="1" showaddelement="no">
   <b:widget id='Header1' locked='true' title='Blog Doddy (Header)' type='Header'/>
   </b:section>
   </div>

   
   kemudian copy kode di bawah ini, tambahkan di bawah kode di atas :
   
   

   <div id="under_header1">
   <b:section class='header' id='underheader1' preferred='yes'/>
   </div>
   <div id="under_header2">
   <b:section class='header' id='underheader2' preferred='yes'/>
   </div>
   <div id="under_header3">
   <b:section class='header' id='underheader3' preferred='yes'/>
   </div>
   <div id="under_header4">
   <b:section class='header' id='underheader4' preferred='yes'/>
   </div>

   
   
   yang akan menjadi kode berikut :
   
   

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidget="1" showaddelement="no">
   <b:widget id='Header1' locked='true' title='Blog Doddy (Header)' type='Header'/>
   </b:section>
   </div>
   
   <div id="under_header1">
   <b:section class='header' id='underheader1' preferred='yes'/>
   </div>
   <div id="under_header2">
   <b:section class='header' id='underheader2' preferred='yes'/>
   </div>
   <div id="under_header3">
   <b:section class='header' id='underheader3' preferred='yes'/>
   </div>
   <div id="under_header4">
   <b:section class='header' id='underheader4' preferred='yes'/>
   </div>

9. Kemudian Simpan Template
10. Tinggal melihat hasilnya klik Elemen Halaman
11. Sukses ya.....

Sumber : Panduan buat blog gratis