Tutorial 5 : LETAK BANNER, IKLAN ATAU SEARCHBOX PADA HEADER

Tutorial 5 : LETAK BANNER, IKLAN ATAU SEARCHBOX PADA HEADER

Hola mi amor dza..

Yuhuuuuuu...owkey pagi ni juga dza nak kongsikan pada uols eekkk..

macam mana cara nak buat tuto berikut..

Ouh seperti Tajuk besa kat atas..

So meh ikut cara-cara dekat bawah nie yeeee

Cara-cara nak letak banner, iklan atau searchbox pada header:

1. Tambah 'Page Element'

a. Log in akaun Blogger anda.

b. Pergi ke Dashboard > Design > Edit HTML.

c. 'Backup template' anda terlebih dahulu.

d. Pastikan kotak 'Expand Widget Templat'e TIDAK di TICK

e. Cari 'HTML code'di  bawah.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/>

</b:section>

f. Untuk tambah bahagian 'Page Element', masukkan code berikut betul-betul selepas </b:section>

<b:section id='header-right' showaddelement='yes'/> 

<div style='clear: both;'/>

g. Keseluruhan code akan kelihatan seperti ini.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='test blog (Header)' type='Header'/>

</b:section>

<b:section id='header-right' showaddelement='yes'/>

<div style='clear: both;'/>

Sekarang anda akan mempunyai dua bahagian 'Page Element' pada bawah header.

2. Adjust kedudukan bahagian 'Page Element'.

a. Cari code berikut pada 'Edit HTML' (kotak 'Expand Widget Template' TIDAK TICK) : ]]></b:skin>

b.Letakkan CSS code berikut sebelum(atas) code ]]></b:skin>.

#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

Selepas siap 'Page Element' anda akan kelihatan seperti ini:

3. Masukkan Widget

Sekarang ini anda dah boleh letakkan banner, iklan atau searchbox pada header anda. Buat seperti yang anda biasa buat.

a. Pada 'Page Element' pergi ke bahagian yang telah ditambah klik 'Add Widget'.

b. Masukkan widget yang anda kehendaki.

*kedudukan bahagian widget mungkin tidak akan bersebelahan dengan header, tetapi ianya akan tetap berfungsi dengan baik.

*kedudukan widget anda dalam blog boleh di adjust dengan main-main dengan CSS code tadi. 

#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

 Adjust dua perkara ini sehingga anda mendapat kedudukan yang cantik.

**owkey if uols da siap semua..jangan lupa save yaaahhh..

Sebelum save tuh preview dulu..kalau menjadi sila save..

---

Dah Terjah Diaries Ni?? Suka Sila Tinggalkan Tapak Anda

---