Tips Tutorial Cara Menciptakan Space Iklan Pada Header Blogspot

Kali ini aku ingin membuatkan cara membagi Header blog (Blogspot) menjadi 2 kolom, dimana nantinya kolom pertama (kiri) difungsikan sebagai kawasan judul dan kolom kedua (kanan) dapat dipakai sebagai kawasan / 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 isyarat 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 isyarat di bawah ini sempurna di atasnya

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

3. Tambahkan isyarat 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>     </div>   <div style='clear: both;'/> </div>

4. Hasil tamat 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>     </div>   <div style='clear: both;'/> </div>

5. Tambahkan isyarat CSS di bawah ini sempurna di atas isyarat ]]></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, jikalau karenanya 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.

Baca juga:

1. Cara menciptakan kotak iklan Adsense di samping judul Blog
2. Cara memindahkan Unit iklan main_Blog1 kedalam artikel, untuk meningkatkan keterlihatan

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), semoga tampilannya tidak menjadi dua baris.