April 24, 2016
Bimbing Dong
Cara menambah widget Header menjadi dua (2)
Widget yang terletak tepat disamping kanan header, sehingga header menjadi 2 bagian. dengan menambahakan widget disamping header, kita dapat menghemat penggunaan halaman blog dan juga bisa membuat tampilan blog semakin menarik. Widget disamping header bisa kita tambahkan dengan iklan, tombol search atau widget yang lainnya sesuai dengan yang kita inginkan, Untuk lebih jelasnya silakan lihat contoh gambar dibawah ini:
 |
| Contoh Header menjadi dua |
Seperti gambar diatas, ada 2 widget. 1 widget header yang bertuliskan judul blog, dan yang kedua widget kosong, yang bisa kita isi dengan gadget apa saja. Widget Header akan di perkecil lebarnya, agar widget buatan dapat ditempatkan disampingnya, dengan ukuran yang disesuaikan dengan lebar halaman blog. Header yang awalnya hanya ada 1 widget, dibuat menjadi 2 bagian, header kiri dan kanan. Untuk lebih jelasnya, Ikuti langkah-langkah dibawah ini.
- Login ke blogger. Dari halaman dasbord pilih pengaturan Template.
- Selanjutnya Klik edit HTML, dan cari kode .header-outer { . selengkapnya persis seperti dibawah ini.
.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;
}
Ganti semua kode diatas dengan kode dibawah ini.
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;_background-image: none;min-height: 104px;}
#header {
width: 40%;
margin-right: 10px;float: left; }
#headerkanan {
float: right;
width: 54%;
margin: 20px 10px 5px 10px;
padding: 2px;}
#headerkanan .widget {margin: 3px;}
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;_background-image: none;min-height: 104px;}
#header {
width: 40%;
margin-right: 10px;float: left; }
#headerkanan {
float: right;
width: 54%;
margin: 20px 10px 5px 10px;
padding: 2px;}
#headerkanan .widget {margin: 3px;}
- Penting:
.header-outer { pada bagian height: 104px berfungsi untuk mengatur tinggi header
#header { pada bagian width: 40%; berfungsi untuk lebar header kiri.
#headerkanan { pada bagian width: 54%; berfungsi untuk lebar header kanan, dan
#header { pada bagian width: 40%; berfungsi untuk lebar header kiri.
#headerkanan { pada bagian width: 54%; berfungsi untuk lebar header kanan, dan
margin: 20px 10px 5px 10px; berfungsi untuk posisi atas-bawah header kanan.
- Kemudian. Cari kode <div class='region-inner header-inner'> dan tambahkan kode berikut disamping kanannya.
<b:section class='headerkanan' id='headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
- Kemudian kodenya akan menjadi seperti dibawah ini.
<div class='region-inner header-inner'><b:section class='headerkanan' id='headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
- Selanjutnya klik save tamplate. Silakan di refres dashbourd blog dan lihat hasilnya.
Semoga bermanfaat dan sebelum anda menutup Artikel ini, silahkan berikan masukannya di kolom komentar. Apa kekurangan dan kelebihan Artikel ini, supaya penulis bisa terus belajar untuk memberikan yang terbaik. Anda juga bisa bertanya jika ada beberapa penjelasan yang masih belum dipahami. Jika anda merasa artikel ini bermanfaat, jangan lupa untuk mengklik tombol share. Sekali lagi belajar mudah bersama bimbing dong, tutorial ini lebih lengkap di SINI
