Cara Membuat Kolom Widget Bawah Header

Kolom Widget Bawah Header - Pada beberapa template blog biasanya tidak disertai dengan kolom widget bawah header dan secara umum hanya tersedia kolom untuk menu page horizontal yang secara otomatis akan bertambah jika kita memasangnya melalui widget bawaan blogger, seperti contoh berikut ini

Namun beberapa teman blogger termasuk saya hampir jarang menggunakan menu page horizontal tersebut dan lebih membuat menu horizontal sendiri seperti yang tertampil dalam blog ini

Sebelum membuat menu page tersebut, sebelumnya harus disediakan kolom widget di bawah header dan pada artikel ini saya akan menjelaskan cara mudah menambah dan membuat kolom widget di bawah header sehingga dengan kolom widget di bawah header tambahan ini akan berfungsi sebagai tempat menaruh menu page horizontal. Sebenarnya tidak hanya page menu, apapun yang ingin diletakkan di bawah header, bisa menggunakan kolom widget di bawah header ini.

Berikut cara mudah menambah dan membuat kolom widget di bawah header :
Login ke akun blogspot teman blogger
Pada halaman depan blogspot, pilih Template >> Edit HTML >> Lanjutkan 

Setelah mengklik tombol Lanjutkan maka akan muncul halaman kode html template blogspot yang teman-teman blogger gunakan. Di halaman kode html inilah teman-teman blogger bisa mengedit seluruh tampilan blog yang diinginkan. Namun, untuk mengedit kode-kode yang ada diperlukan pengetahuan dasar mengenai kode-kode html. Berikut tampilan halaman kode html blogspot
Masih di halaman kode html, klik Expand Template Widget. Seperti gambar berikut ini

Setelah itu, tekan tombol Ctrl + F di keyboard secara bersamaan sehingga muncul, kolom pencarian di bagian bawah halaman kode html. Seperti gambar berikut

Pada kolom pencarian tersebut, ketikkan seperti ini ]]></b:skin> tidak perlu tekan enter karena hasilnya akan langsung terlihat seperti gambar berikut

Selanjutnya, tambahkan kode berikut diatas atau sebelum ]]></b:skin>
#bawahheader{
float:left;
width:100%;
}

Lalu, cari kode berikut
<div id='header-wrapper'> tapi karena beberapa template memiliki kode yang tidak sama maka jika kode <div id='header-wrapper'> tidak ditemukan maka carilah kode <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Scroll ke bawah sehingga ditemukan kode penutup dari kode <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> yaitu </b:section>

Kode lengkapnya seperti berikut:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Alaskandang Features ™ (Header)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
.................
.................
</b:section>
</div>

Tambahkan kode berikut dibawah kode penutup <div id='header-wrapper'> yaitu </div>
<div id='bawahheader'>
<b:section class='header' id='underheader' preferred='yes'/>
</div>

Kalau sudah ditambahkan maka hasilnya akan seperti ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Alaskandang Features ™ (Header)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
.................
.................
</b:section>
</div>
<div id='bawahheader'>
<b:section class='header' id='underheader' preferred='yes'/>
</div>

Jika sudah, jangan langsung disimpan tapi lihat dulu hasil previewnya dengan cara klik Pratinjau. Jika tidak ada perubahan dari tampilan blog setelah menambah kolom widget bawah header, silahkan di simpan klik Simpan Template

Untuk melihat hasilnya, silahkan lihat dibagian Tata Letak, seperti terlihat pada gambar berikut

Dan kolom widget bawah header sudah selessai di buat! Demikian cara membuat kolom widget bawah header, kalau membaca artikel ini memang terlalu ribut eh ribet tapi untuk lebih ringkasnya silahkan baca di Menambah dan Membuat Satu Kolom Widget Bawah Header