Cara Membuat Crosscol Wrapper untuk Navigasi Menu atau Iklan Banner
June 13, 2020
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:
1. Tema > Edit HTML
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:
Silakan coba. Konsultasikan di kolom komentar jika menemukan kendala. Happy Blogging!
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!
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Croscoll ini kode apa CB? Menyediakan slot untuk iklan? Atau bagaimana?
ReplyDeleteSilakan baca alinea/kalimat pertama :)
DeleteHuehehe
Delete