Komponen header blog dapat dibagi menjadi beberapa kolom bagian dan tidak harus terpaku pada design default yang hanya memiliki satu header saja, banyak script-script HTML yang bisa merubah header blog menjadi 2 atau bahkan 3 kolom sekaligus dalam satu situs, sehingga tampilan header menjadi lebih menarik.
Pada tutorial sebelumnya sudah diposting cara membagi header blog menjadi dua kolom bagian, berikutnya akan dibagi lagi mejadi tiga kolom bagian dengan meneruskan script-script HTML yang sudah disampaikan tersebut.
Langsung saja, buat para blogger yang tertarik untuk memodifikasi design header di blognya masing-masing, silakan simak penjelasan langkah-langkah cara membagi header blog menjadi tiga kolom, berikut ini:
1. Login di akun blogger Anda.
2. Pada menu Template, klik Edit HTML => Edit Template dan cari
kode script dibawah dengan menekan tombol Ctrl+F, setelah itu
hapus kode scriptnya :
3. Ganti kode diatas dengan kode script dibawah ini :
4. Selanjutnya cari kode <div class='region-inner header-inner'>
dan copy kode script dibawah, tepat disamping kanannya.
Keterangan :
Script dengan tulisan berwarna hitam adalah scrip untuk membuat header 2 kolom, sedangkan script dengan tulisan berwarna merah adalah script yang ditambahkan bila ingin membuat satu kolom lagi menjadi 3 kolom bagian.
Selamat mencoba....
2. Pada menu Template, klik Edit HTML => Edit Template dan cari
kode script dibawah dengan menekan tombol Ctrl+F, setelah itu
hapus kode scriptnya :
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none
3. Ganti kode diatas dengan kode script dibawah ini :
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 150px; /* untuk mengatur tinggi header (height) */}
#header {
width: 32%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left; }
#bgsGR_headerkanan {
float: right;
width: 32%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgsGR_headerkanan .widget {margin: 3px;}
#bgsGR_headerkanan2 {
float: right;
width: 32%; /* mengatur lebar header kanan 2*/
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgsGR_headerkanan2 .widget {margin: 3px;}
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 150px; /* untuk mengatur tinggi header (height) */}
#header {
width: 32%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left; }
#bgsGR_headerkanan {
float: right;
width: 32%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgsGR_headerkanan .widget {margin: 3px;}
#bgsGR_headerkanan2 {
float: right;
width: 32%; /* mengatur lebar header kanan 2*/
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgsGR_headerkanan2 .widget {margin: 3px;}
4. Selanjutnya cari kode <div class='region-inner header-inner'>
dan copy kode script dibawah, tepat disamping kanannya.
<b:section class='bgsGR_headerkanan2' id='bgsGR_headerkanan2' maxwidgets='1' showaddelement='yes'></b:section><b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
Keterangan :
Script dengan tulisan berwarna hitam adalah scrip untuk membuat header 2 kolom, sedangkan script dengan tulisan berwarna merah adalah script yang ditambahkan bila ingin membuat satu kolom lagi menjadi 3 kolom bagian.
Selamat mencoba....
