Pada postingan kemarin saya sudah membahas cara ini yaitu Menambahkan Elemen Baru di Samping Header, namun tidak pada template standar. Terkait dengan pertanyaan sahabat blogger tentang bagaimana cara membagi header menjadi 2 kolom pada template standar. tentu pada postingan yang kemarin jika diterapkan pada template standar akan susah dan juga membingungkan, karena kode2 yang dicari/diedit tidak sama dengan yang ada pada tutorial sebelumnya, untuk itu, saya posting artikel ini khusus untuk modifikasi header pada template standar. Mohon disimak dengan baik.
Jika sobat berhasih, Hasil Screenshot akan seperti gambar ini :
Cara Membagi Header Menjadi 2 Kolom Pada Template Standar
1. Login ke blogger
2. Masuk Template >> Backup dulu template sobat, untuk berjaga2 kalo ada error.
3. Klik edit HTML
4. Kemudian cari kode seperti berikut :
/* Header5. Hapus/Ganti dengan kode dibawah ini :
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 15px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
#header-wrapper {
margin:0 auto 0px;
height:70px;
}
#head-inner {
width:285px;
background-position: left;
text-align: justify;
margin-left: auto;
margin-right: auto;
float:left;
}
#header-kanan{
width:485px;
float:right;
}
#header h1 {
color: $(header.text.color);
margin: 0px;
text-align: left;
}
.Header h1 a {
color: $(header.text.color);
}
Silahkan Di atur ukuran lebarnya sesuai yang sobat inginkan, agar bisa pas dengan lebar headernya.6. Kemudian Cari kode seperti Berikut ini :
<header>
<div class='header-outer'>7. Hapus/Ganti kode diatas dengan kode berikut :
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Linux For Human Begin (Header)' type='Header'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>
<header>8. Klik pratinjau untuk menentukan bahwa tidak ada yang error pada kode.
<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Linux For Human Begin (Header)' type='Header'/>
</b:section>
</div>
<div id='header-kanan'>
<b:section class='header' id='header2' preferred='yes'>
</b:section>
</div>
</div>
</header>
9. Jika sudah berhasil tampil pratinjaunya, Klik Simpan/Save Template.
Untuk melihat hasilnya, silahkan sobat menuju ke halaman, Tata Letak. Lihat pada Header, apakah sudah muncul elemen baru disamping header apa belum. Dan bila ada masalah, silahkan luangkan di kolom kementar.
Semoga postingan tentang Membagi Header Menjadi 2 Kolom Pada Template Standar ini bisa bermanfaat buat sobat semuanya. Happy Blogging.
http://abdulinuxer.blogspot.com/
Terimakasih sudah berkunjung di blog Unknown
Kurang lebihnya kami mohon maaf Saya hanya menshare apa yang saya ketahui Saran dan kritik yang membangun silahkan di pos lewat kotak komentar Bagi temen yang berkeinginan berbagi link silahkan salin teks di bawah ini dan taruh di blog saudara
0 komentar:
Posting Komentar