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.
1.
Login
ke blogger. Dari halaman dasbord pilih pengaturan Template.
2.
Selanjutynya
Klik edit HTML, dan cari kode .header-outer { . Kode lengkapnya.
.header-outer {
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;}
#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.
#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>
6.
Keseluruhan
kode menjadi.
<div class='region-inner header-inner'><b:section class='headerkanan' id='headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
7.
Selanjutnya
Save template. Selesai.
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:
Posting Komentar