Tambah Widget Dalam Header
Hari ini saya telah temui cara untuk menambah widget dalam header blogpsot, jika anda ingin menambahkan sila ikut panduan dibawah:
Tambah Widget Dalam Header
Kadang-kadang kita nak letak sesuatu di tepi Header seperti Search Engine, Link Tab, Iklan dan lain-lain lagi. Di sini saya tunjukkan mana mana nak tambah Widget dalam Header tu.
1. Login -> Layout -> Edit HTML
2. Cari kod di bawah:
#header {margin: 5px;border: 1px solid $bordercolor;text-align: center;color:$pagetitlecolor;}
dan ini paparan bagi kod di atas (yang petak warna merah tu):
3.Untuk tambahkan widget dalam #header tu, anda kena kecilkan sikit saiz (width) #header dan tetapkan kedudukan (float) di sebelah kiri. Katakanlah saya masukkan saiz width sebanyak 300px dan floatnya adalah “left“.
#header {margin: 5px;width: 300px;float: left;border: 1px solid $bordercolor;text-align: center;color:$pagetitlecolor;}
4. Dan sekarang tambahkan kod CSS widget yang baru. Saya namakan ia sebagai#header2. Dan letakkan kod baru ni di bawah #header (no 3). (Jangan lupa tukarkan kedudukan (float) tu kepada ke kanan, sebab kod #header dah letak di kiri.)
#header2 {margin: 5px;width: 300px;float: right;border: 1px solid $bordercolor;text-align: center;color:$pagetitlecolor;}
5. Lepas tu cari pulak kod id header-wrapper seperti di bawah:
Tukarkan ia jadi macam ni:
<b:section class=’header’ id=’header2′ showaddelement=’yes’>
6. Lepas tu Save Template
7. Kemudian pergi ke Page Element. Tengok hasilnya:
Dah berpecah dua. Kelihatan widget baru dah berada di sebelah Header. Kalau saiz lebar (width) tu tak sesuai, anda boleh adjustkan balek saiz width (width: 300px;) kat#header dan #header2 (no 3 dan 4 tadi).
8. Lepas tu tambahkan 1 widget dalam tu. Katakanlah saya masukkan Search Box, dan save kemudian View. Search box akan berada di sebelah header.
Kalau tak nak letak border (bingkai), anda boleh remove kod border: 1px solid $bordercolor; kat #header2 tadi (no 4), ataupun kat #header (no 3)
9. Selamat mencoba!
Tiada ulasan:
Catat Ulasan