Blogermie.com: Menambah Kolom Elemen dibawah Header

01 Januari 2012

Menambah Kolom Elemen dibawah Header

Menambah kolom elemen dibawah header sangat diperlukan bagi template yang tidak mendukung Iklan. Seperti yang banyak kita temui pada template asli bawaan blogger, Akan sangat jarang sekali terlihat tambahan kolom seperti ini. Kolom tambahan ini biasanya terdapat berada persis dibawah Deskripsi blog. Sesuai ufngsinya, Kolom Elemen dibawah header dipergunakan untuk memasang widget yang berhubungan dengan iklan. Tetapi sebatas kebutuhan pengguna, Sobat blogermie juga bisa memasangnya untuk keperluan menu navigasi vertikal maupun widget random post

Secara umum, Elemen tersebut tidak akan ada, pada tab elemen, Untuk layout-nya sobat blogermie bisa melihatnya dihalaman Dashboard>>Design>>Tab Element, Disini akan tampak penampilan sebenarnya

Menambah Kolom Elemen dibawah Header

Untuk menambahkan kolom elemen dibawah header tidak terlalu sulit, cukup dengan menyisipkan beberapa kode HTML sesuai langkah dibawah ini:
  1. Klik Tab Edit HTML, jangan lupa centang Expand Template Widget
  2. Kopi CSS ini dan letakkan tepat diatas kode ]]></b:skin>
  3. #bawah_header{ margin:10px 0; padding:1%; width:98%; }
  4. Untuk kode bodi-nya, terlebih dahulu carilah kode Header yang mirip dengan dibawah ini. Kode tidaklah harus sama, karena setiap struktur kode template sobat yang berbeda-beda
  5. <div id="header-wrapper">
    <b:section class="header" id="header" maxwidget="1" showaddelement="no">
    <b:widget id="Header1" locked="true" title="About Heru Prasetyo (Header)" type="Header">
    </b:widget></b:section></div>
  6. Letakkan kode ini tepat dibawahnya
  7. <div id="bawah_header"> <b:section class="header" id="bawahheader" preferred="yes"> </b:section></div>
  8. Simpan dan lihat hasilnya saat anda membuka tab elemen seperti gambar dibawah ini
  9. Menambah Kolom Elemen dibawah HeaderSekarang anda bisa memasang widget apapun dikolom ini, baik itu iklan maupun widget yang lainnya



Judul: Menambah Kolom Elemen dibawah Header; Reviewer By: Heru Prasetyo; Rating Blog: 5 dari 5
Heru Prasetyo Blogermie.com Updated at: 1/01/2012 12:43:00 AM

7 komentar:

  1. wah boleh banget nih di gunakan untuk mengisi kekosongan bawah header :D mantap!
    btw email sobat yang mana ya?

    BalasHapus
  2. @Farix: Ini email saya Heruxumi@gmail.com. saya juga sedang mau ngedit template,pake css, sperti ada yg kurang thq

    BalasHapus
  3. Wah keren gan,ane ijin share di blog ane,gan.

    BalasHapus
  4. Hasil yang menarik setelah dicoba, apalagi setelah dipasang iklan bergambar pada kolom... menambah cantik tampilan halaman blog yang dimiliki..
    terima kasih artikelnya..
    sukses selalu

    BalasHapus