Widget yang terletak tepat disamping kanan header, sehingga header menjadi 2 bagian. Untuk lebih jelasnya silakan lihat, Contoh Gambar dibawah ini:
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.
Cara menambah widget disamping header.
1. Login ke blogger. Dari halaman dasbord pilih pengaturan Template.
2. Selanjutynya Klik edit HTML, dan cari kode .header-outer { . Kode lengkapnya. .header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none; }
3. 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;}
4. Keterangan: .header-outer { pada bagian height: 104px(untuk mengatur tinggi header). #header { pada bagian width: 40%; lebar header kiri. #headerkanan { pada bagian width: 54%; lebar header kanan. dan margin: 20px 10px 5px 10px; posisi atas-bawah header kanan.
5. Selanjutnya. 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>
<div class='region-inner header-inner'><b:section class='headerkanan' id='headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
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 Tombol Share, iklan, tombol search atau widget yang lainnya sesuai dengan yang kita inginkan. Semoga Bermanfaat.
Tentunya kode-kode pada property background bisa diganti sesuai selera….
#cccccc bisa saudara ganti dengan kode hex warna apa saja bisa saudara ganti URL gambar apa saja
fixed bisa saudara hapus jika ingin gambar ikut naik turun saat halaman scrolled repeat-y bisa saudara ganti dengan no-repeat, jika tidak ingin ada pengulangan. Bisa juga diganti dengan repeat-x jika ingin pengulangan hanya terjadi sepanjang sumbu x saja (horizontal). Atau anda juga bisa hanya menggunakan repeat jika ingin gambar latar diulangi mendatar dan vertikal (tile mode).
center top bisa anda ubah menjadi left top atau right top, tergantung titik acuan awal dari gambar yang anda inginkan Dengan mengubah property di atas anda bisa mengganti background blog sesuai selera…. Cara ini cukup mudahkan?
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.
Cara menambah widget disamping header.
1. Login ke blogger. Dari halaman dasbord pilih pengaturan Template.
2. Selanjutynya Klik edit HTML, dan cari kode .header-outer { . Kode lengkapnya. .header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none; }
3. 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;}
4. Keterangan: .header-outer { pada bagian height: 104px(untuk mengatur tinggi header). #header { pada bagian width: 40%; lebar header kiri. #headerkanan { pada bagian width: 54%; lebar header kanan. dan margin: 20px 10px 5px 10px; posisi atas-bawah header kanan.
5. Selanjutnya. 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>
<div class='region-inner header-inner'><b:section class='headerkanan' id='headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
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 Tombol Share, iklan, tombol search atau widget yang lainnya sesuai dengan yang kita inginkan. Semoga Bermanfaat.
Tentunya kode-kode pada property background bisa diganti sesuai selera….
#cccccc bisa saudara ganti dengan kode hex warna apa saja bisa saudara ganti URL gambar apa saja
fixed bisa saudara hapus jika ingin gambar ikut naik turun saat halaman scrolled repeat-y bisa saudara ganti dengan no-repeat, jika tidak ingin ada pengulangan. Bisa juga diganti dengan repeat-x jika ingin pengulangan hanya terjadi sepanjang sumbu x saja (horizontal). Atau anda juga bisa hanya menggunakan repeat jika ingin gambar latar diulangi mendatar dan vertikal (tile mode).
center top bisa anda ubah menjadi left top atau right top, tergantung titik acuan awal dari gambar yang anda inginkan Dengan mengubah property di atas anda bisa mengganti background blog sesuai selera…. Cara ini cukup mudahkan?
