Menambah Elemen Halaman di Bawah Header Menjadi 3 Kolom

Setelah sebelumnya saya memposting membuat kolom baru di bawah header yang hasilnya seperti :


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

Terimakasih atas komentar anda di bawah, untuk kemajuan blog saya ini.

Artikel Terkait