Cara Membuat Crosscol Wrapper untuk Navigasi Menu atau Iklan Banner

Baca Juga

Header blog biasanya terdiri dari logo dan menu. Jika ingin menambahkan satu menu lagi (second menu) atau widget tambahan untuk memasang iklan banner di bawah manu, kita bisa gunakan widget Crosscol Wrapper.

Widget ini bawaan Blogger. Kita bisa gunakan untuk Navigasi Menu tambahan atau Iklan Banner. Posisinya bisa ditempatkan di bawah header atau di atas Content Area (Content-Wrapper).

Disebut "Crosscol" karena menembus kolom. Artinya full width sebagaimana header/menu.

Template bawaan Blogger, misanya tema Sederhana (Simple), memiliki dua widget crosscol seperti gambar di atas. Kodenya dalam template ini:

      <b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column' showaddelement='yes'/>
      <b:section class='tabs' id='crosscol-overflow' name='Cross-Column 2' showaddelement='no'/>

Cara Membuat Crosscol Wrapper

Sekarang jika Anda tidak menggunakan tema bawaan Blogger, namun ingin menambahkannya untuk memasang iklan, banner, atau widget apa saja, coba ikuti langkah ini:

1. Tema > Edit HTML

2. Copas Kode Berikut ini di bawah kode <div id='content-wrapper'> atau sejenisnya.

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>
Jika kode <div id='content-wrapper'> tidak ada , masukkan kode ini:
<div id='content-wrapper'>
<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol'/>
</div>

3. Save Template!

4. Klik Layout (Tata Letak).

Akan muncul widget area seperti dalam gambar di atas. Jika tidak, muncul refresh (Tekan F5).

Silakan tambahkan widget di sana. Jika tidak rapi, atur kode CSS-nya dengan menambahkan kode, misalnya:

#crosscol-wrapper {margin:15px 0;padding;0;width:100%;max-width:970px}

Silakan coba. Konsultasikan di kolom komentar jika menemukan kendala. Happy Blogging!