Cara menambah widget disamping header. 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.
- Login ke blogger. Dari halaman dasbord pilih pengaturan Template.
- Selanjutynya Klik edit HTML, dan cari kode .header-outer { . Kode lengkapnya.
- Ganti semua kode diatas dengan kode dibawah ini.
- Keterangan:
- Selanjutnya. Cari kode <div class='region-inner header-inner'> dan tambahkan kode berikut disamping kanannya.
- Keseluruhan kode menjadi.
- Selanjutnya Save template. Selesai.
.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;
}
.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;}
.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.
#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.
<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.
0 Komentar untuk " Cara Mudah Menambahkan Widget Disamping Header "