Pages

Friday, July 19, 2013

Tutorial: How to do Cute Menu tab for ur blog

Assalamualaikum... anneyosayo...

   tajuk je B.I... tutorial dalam bahasa gak...hehehe.. Ari nie aku berlajar satu lagi benda baru dalam berblog nie actually dah lama aku cari cam ne nak wat menu bar cute nie...akhirnye semalam aku dapat juga buat... nak tau macam mana cara nya... meh follow aku sampai habis...



Asal buat jadi macam nie simple sangat tak cantik kan...


Then buat jadi macam nie  ala2 cute gitu


Nie plak kalu korang letak nak klik kat menu... pic dia akan bertukar


 okay kita buat step by step:

Step 1: korang kena ade cute picture..macam kat bawah nie... kalau tak nak menu bar tu bertukar bila korang nak klik just guna satu picture je...





Step 2: kena jadikan picture cute dalam format URL.
contohnya: http://2.bp.blogspot.com/qb0FbekF0/UeikCo1PFJI/AAAAAAAAAiQ/M9FUe0Ae_ho/s1600/Jom+2.png.. tuk dapatkan URL aku guna jalan pintas je... korang buat new post -> upload picture then publish -> view blog -> klik kat picture tu sambil tekan CTRL -> COPY URL kat atas tu....

Step 3: Dashboard -> klik Design -> klik Layout -> bawah header tu ada Add a Gadget klik je -> klik HTML/javascript



Step 4: copy code bawah nie and paste kan kat dalam box content macam picture kat atas tu.

Code Untuk Stick Menu Bar

<a href= " URL Pages anda" target = " _blank"><img src="URL Image 1"width="155" height = "80" /></a>


Code untuk Menu bar bertukar apabila diklik

<a href= " URL Pages anda" target = " _blank"><img src="URL Image 1"onmouseover="this.src='URL Image 2'" onmouseout="this.src='URL Image 1'"width="155" height = "80" /></a>


p/s: code nie hanya untuk satu menu... jika banyak menu kena COPY & PASTE untuk setiap menu. Just tukar URL Pages anda & URL Image...

Step 5: Last sekali letak Code <center> di bahagian awal Code korang dan </center> dibahagian code paling akhir sekali bagi memastikan menu bar korang center. contohnye: 


picture nie contoh untuk 2 menu.....

dah siap....save and view blog....


SeLamaT MenCuba

Daaa anyeong...

1 comment :