Tips Tutorial Cara Menciptakan Space Iklan Pada Header Blogspot

<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.