14 Cara Menambah Elemen Halaman di Bawah Header Menjadi 3 Kolom

Untuk menambah elemen halaman di bawah header menjadi 3 kolom, seperti blog  tutorial terkenal yang menggunakan template magazine"Kang rohman  yang hasilnya akan seperti gambar diatas"
Caranya sebagai berikut :

   1. Login Blogger
   2. Kemudian kilk Tata Letak.
   3. Klik Elemen Halaman.
   4. Klik Edit HTML.
   5. Jangan lupa download template Lengkap, untuk berjaga-jaga kalau terjadi kesalahan kamu bisa kembali  ke template awal 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='i-om (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

Label: Blogger, Tutorial Blog