Pada hari minggu yang cerah ini saya akan membagikan Cara membagi header menjadi 2 kolom Nah, sobat pasti bertanya, untuk apakah kolom header dibagi menjadi 2 kolom? jawabannya, kalau header blog, pada umumnya kolom pertama yaitu kolom judul blog sobat dan kolom kedua bisa sobat pakai seperti untuk adsense, pemasangan iklan, search engine dll. Membagi / membelah header menjadi 2 kolom, perlu diketahui desain template itu sangatlah komplek dan menggunakan banyak sekali teknik
- Login pada pada Blogger menggunakan id blog sobat
- Template
- Edit HTML lalu Lanjutkan
- pertama - tama cari kode #header-wrapper { atau lebih lengkapnya mirip seperti di bawah ini
#header-wrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSuKiCJBp7AoT4VAdBGh9HgB5DB455-7ge3F_Fx3qKCJ-8weqXLhDWCsWqal6Im2cR7MjS7KXVtOaqpfVGnPnHILZHmOwXOXoM9_I2jfNvhkUyJgdthpVNHvVZVhktpW4yQzmNVprMGd9s/s1600/line.gif) repeat-x scroll left bottom;
height:119px;
width:900px;
}
#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}
#header {
color:#000000;
text-align:left;
} - hapus dan ganti kode tersebut dengan kode dibawah ini:
#header-wrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSuKiCJBp7AoT4VAdBGh9HgB5DB455-7ge3F_Fx3qKCJ-8weqXLhDWCsWqal6Im2cR7MjS7KXVtOaqpfVGnPnHILZHmOwXOXoM9_I2jfNvhkUyJgdthpVNHvVZVhktpW4yQzmNVprMGd9s/s1600/line.gif) repeat-x scroll left bottom;
height:100px;
width:900px;
}
#header-inner {
width:428px;
margin:0 auto;
padding-top:6px;float:left;
}
#header {
color:#000000;
text-align:left;
}
#r_head{
width:468px;
float:right;
padding-top:6px;
} - selanjutnya geser scroll ke bawah dan cari kode <div id='header-wrapper'> atau lebih lengkapnya mirip seperti di bawah ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blognya Reggy Demo (Header)' type='Header'/>
</b:section>
</div> - hapus kode di atas dan ganti dengan kode di bawah ini
<div id='header-wrapper'>
<div id='header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blognya Reggy Demo (Header)' type='Header'/>
</b:section>
</div>
<div id='header-kanan'>
<b:section class='header2' id='header2'/>
</b:section>
</div>
</div> - Simpan Template
Bagaimana sob ? susah apa mudah ? oh iya, kang reggy baru ingat, jika sobat ingin mengubah ukuran setiap kolom, tinggal utak - atik kode yang berwarna merah dengan ukuran yang sesuai dengan kebutuhan sobat. Okedeh sob, sampai disini dulu untuk Cara membagi header menjadi 2 kolom.Sampai Jumpa ;)
0 komentar:
Posting Komentar