Social Icons

Pages

Sunday, December 6, 2015

Cara Membuat Header Menjadi 2 ( Dua ) Kolom Di Blogger

Cara Membuat Header Menjadi 2 ( Dua ) Kolom Di Blogger


Bila anda ingin memasang banner atau iklan di header blog tentunya anda harus mempunya 2 kolom header. Bila anda menggunakan template bawaan header pada blog hanya satu dan anda harus membuat header menjadi 2 kolom. Untuk membuat header menjadi 2 kolom pada blogger langkah-langkahnya sebagai berikut:

  • Login ke blogger
  • Template dan Edit HTML
  • Cari kode berikut ini (gunakan CTRL+F agar lebih cepat)

.header-outer {background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;

  • Setelah ketemu Kode di atas, lalu hapus dan ganti dengan Kode di bawah ini

#header-wrapper {
width:950px;
margin:3px 0px 0px 10px;
background: $ (header.background.color)  no-repeat top center;
height:80px;
}

#head-inner {
width:370px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:#151515;
}
#head-2 {
width:390px;
float:left;
padding-top: auto;
}

  • Kemudian cari kode berikut ini

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='THOPADS (Header)' type='Header'>...</b:widget
</b:section>
</div>

  • Setelah ketemu Kode di atas, lalu hapus dan ganti dengan Kode di bawah ini

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header-1' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='head-2'>
<b:section class='header' id='header-2' preferred='yes'/>
</div>
</div>

  • Simpan dan lihat hasilnya di menu Tata Letak



No comments:

Post a Comment