Cara Menciptakan Space Iklan Pada Header Blogspot

Baca Juga

Kali ini aku ingin menyebarkan cara membagi Header blog (Blogspot) menjadi 2 kolom, dimana nantinya kolom pertama (kiri) difungsikan sebagai daerah judul dan kolom kedua (kanan) dapat dipakai sebagai daerah / space iklan. Hasilnya dapat Anda lihat pada gambar tangkapan layar (layout) di bawah ini.

Untuk menciptakan header blog pada template standar Blogger (versi lawas) menjadi 2 kolom, caranya tidak sama menyerupai pada template custom yang tutorialnya sudah banyak dibagikan oleh kawan-kawan Blogger. Nah, khusus buat Anda pengguna template bawaan blogger yang ingin menciptakan space iklan di samping Header (judul blog), silahkan ikuti tutorial berikut ini.

1. Cari arahan menyerupai / serupa di bawah ini

      <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>         <b:widget id='Header1' locked='true' title=' (Header)' type='Header' version='1'>⋯</b:widget>       </b:section>

2. Tambahkan arahan di bawah ini sempurna di atasnya

<div class='columns-outer'>   <div class='column-center-outer'>     <div class='column-center-inner'>

3. Tambahkan arahan di bawah ini sempurna di bawahnya

    </div>    </div>    <div class='column-right-outer'>      <div class='column-right-inner'>        <b:section class='header' id='header-2' maxwidgets='1' name='Header-Ads' showaddelement='yes'/>       <div style='clear-both'/>     </div>   </div> </div>

4. Hasil simpulan akan terlihat menyerupai di bawah ini

<div class='columns-outer'>   <div class='column-center-outer'>     <div class='column-center-inner'>       <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>         <b:widget id='Header1' locked='true' title=' (Header)' type='Header' version='1'>⋯</b:widget>       </b:section>     </div>    </div>    <div class='column-right-outer'>      <div class='column-right-inner'>        <b:section class='header' id='header-2' maxwidgets='1' name='Header-Ads' showaddelement='yes'/>       <div style='clear-both'/>     </div>   </div> </div>

5. Tambahkan arahan CSS di bawah ini sempurna di atas arahan ]]></b:skin>

.header-outer {overflow: hidden;} .header-inner .column-center-outer {width: 40%;} .header-inner .column-right-outer {float: right; width: 60%;} @media screen and (max-width: 768px) { .header-inner .column-center-outer, .header-inner .column-right-outer {float: none; width: 100%!important;} }

Nilai (max-width: 768px) relatif, silahkan ubah sesuaikan kebutuhan.

6. Simpan tema / template, lalu lihat halaman tata letak, kalau balasannya menyerupai pada gambar di atas, itu artinya Anda telah berhasil menciptakan header blog menjadi dua kolom yang dapat Anda gunakan untuk memasang iklan di samping judul blog.

Catatan : Cara di atas berhasil diterapkan pada tema Simple (responsive), untuk tema lain mungkin akan berbeda hasilnya. Sebaiknya Anda atur font-size untuk judul blog (kecilkan ukurannya), biar tampilannya tidak menjadi dua baris.