Cara Menambah Elemen Laman di Bawah Header Menjadi 3 Kolom

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

Caranya sebagai berikut :

1. Kamu login dulu di blogger dengan user ID Kamu.
2. Kemudian Kamu kilk Tata Letak
3. Klik Elemen Halaman
4. Klik Edit HTML
5. Jangan lupa download template Kamu, berjaga-jaga kalau terjadi kesalahan Kamu bisa kembali ke template awal Kamu dengan klik Download Template Lengkap
6. Cari kode ]]></b:skin> (Untuk mempermudah pencarian pakaiCtrl+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

Nah, mudahkan. Semoga informasi ini bermanfaat buat kamu semua, trimakasih. Salam Blogger.....  Jgn luppa like dan follow blog ini yah..... hehehe

Posted in: Menata Blog