Cara Membuat Header Blog Menjadi 2 Bagian
Cara Membuat Header Blog Menjadi 2 Bagian - Sudah lama Yepi Share Everything ngak posting mengenai blogger. Tuk kali ini saya akan share mengenai Cara Membuat Header Blog Menjadi 2 Bagian, dimana template biasanya header template blog hanya 1 bagian saja. Bisa dilihat pada gambar berikut ini :
Biasanya Header 2 Bagian memiliki fungsi sendiri-sendir yang pertama atau kita sebut header pertama untuk Judul dan Deskripsi blog dan yang Header 2 biasanya untuk penempatan Gambar atau Iklan atau Html/JavaScript yang lainnya. Ok langsung saja, silahkan anda simak tutorial Cara Membuat Header Blog Menjadi 2 Bagian selengkapnya :
Seperti biasa dalam keadaan log in pada account sobat
Klik rancangan
Klik Edit HTML
Bisa Download Template Lengkap jika khawatir gagal
Sekarang cari kode CSS seperti yang mirip beikut:
/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
Ganti kode diatas dengan kode dibawah ini:
/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 0px;
background:#ffff;
height:180px;
}
#header-one {
width:50%;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
#header_two{
width:50%;
float:left;
padding-top:10px;
}
Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka width dengan lebar header template sobat.
Sekarang cari kode seperti berikut:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
</b:section>
</div>
Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang menyarupai contoh dibawah ini:
<div id='header-wrapper'>
<div id='header-one'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
</b:section>
</div>
<div id='header_two'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
Klik Simpan Template
Selesai
/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 0px;
background:#ffff;
height:180px;
}
#header-one {
width:50%;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
#header_two{
width:50%;
float:left;
padding-top:10px;
}
Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka width dengan lebar header template sobat.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
</b:section>
</div>
<div id='header-wrapper'>
<div id='header-one'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
</b:section>
</div>
<div id='header_two'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
Nah begitulah sobat mengenai Cara Membuat Header Blog Menjadi 2 Bagian, Semoga anda berhasil dan bermanfaat untuk anda sekalian.
Terimakasih anda telah membaca artikel Cara Membuat Header Blog Menjadi 2 Bagian Silahkan baca artikel Yepi Share Everything Tentang
Blogger
|
Tutorial Blog
Yang lainnya. Dan saya ucapkan juga terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar. Semoga Bermanfaat untuk anda.
Jangan Lupa Gabung Bersama Kami Dengan Like Facebook Di Bawah Ini :
1 komentar:
Terima kasih banyak sob, karna artikel anda sdh membantu saya.
Posting Komentar
Jangan lupa tinggalkan komentar anda disini dan gunakan kata-kata yang bijak dalam berkomentar. Dilarang keras memasukkan segala bentuk link dalam komentar, karena itu dianggap SPAM