Wednesday, December 2, 2009

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 :

4 kolom under header b_thumb[2]


Caranya sebagai berikut :
  1. Anda login dulu di blogger dengan user ID anda.

  2. Kemudian anda kilk Template

  3. Jangan lupa download template anda, berjaga-jaga kalau terjadi kesalahan anda bisa kembali ke template awal anda dengan klik Cadangkan / Pulihkan kemudian klik Unduh Template Lengkap

  4. Kemudian klik Edit HTML

  5. Cari kode ]]></b:skin> (Untuk mempermudah pencarian pakai Ctrl+F)

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

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

  8. Kemudian Simpan Template
  9. Tinggal melihat hasilnya klik Elemen Halaman

  10. Sukses ya.....

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


3 komentar:

diswanto said...

terima kasih tips nya bos..izin pakai ya..

anif said...

thankyou bro...ikutan copy paste.
maju terus, pantang menyerah....

suramadu said...

saya pengin baget menambahkan 3 kolom di bawah header tapi saya tak bisa menemukan code <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>
</div> apa ada yang harus di ganti ? tolong banget ya..... www.marfinsyah.co.cc