Rabu, 02 Desember 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.


2 komentar:

dedi iswanto mengatakan...

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

anif mengatakan...

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