cara membuat menu dengan menggunakan gambar

Sebelum ini dalam entri yg lepas ada saya tunjukan cara membuat berbagai bentuk menu seperti menu bar tanpa hack,menu horizontal dan kali ini mengunakan gambar pula sebagai menu.Bila menggunakan gambar sebagai menu tentu nya kita mempunyai pilihan membuat berbagai bagai bentuk yang disukai ,tak semestinya asyik bentuk empat segi,bujur.Bagi yg belum tahu apa yang dimaksud menu,menu biasanya terdapat pada bahagian bawah header  dengan perkataan yg biasa terdapat padanya seperti home,contact,site map dan sebagainya.
link dengan gambar






Untuk membuat menu ini kita perlu sediakan gambar dan diupload ke photobucket,imageshack dan sebagainya.Kemudian kita ambil url imej tersebut:

Contohya seperti ini:

http://i219.photobucket.com/albums/cc282/garam63/49Ccopy.jpg

kemudian tambah kod jadi seperti dibawah ini:

<img src="http://i219.photobucket.com/albums/cc282/home.jpg">

Kemudian masuk ke design-page elements
Pilih add gadget-HTML/Javascript

Masuk kod tadi padanya:
menu button







Kemudian klik pada edit html
Gambar  yg dimasukkan akan muncul..klik pada gambar untuk mengubah saiznya dengan menarik bingkai yg ada pada gambar


edit html

Untuk memasukkan link pada button tadi..klik pada gambar kemudian klik ikon create link dan masukkan link yang dikendakki padanya:


masukkan link













Masukkan link pada ruangan enter a url.
Untuk button yang seterusnya ulang semula langkah diatas dengan memasukkan link gambar kedua .
Untuk memastikan saiz adalah sama klik semula pada edit html untuk masuk pada kod tadi
Dan perhatikan pada width dan height pada kod tersebut
<a href="http://teknikbuatblog.blogspot.com/"><img style="width: 196px; height: 87px;" src="http://i219.photobucket.com/albums/cc282/home.jpg" /></a>
<a href="http://teknikbuatblog.blogspot.com/"><img style="width: 196px; height: 87px;" src="http://i219.photobucket.com/albums/cc282/contact" /></a>

Kemudian klik pada save..selamat mencuba

Catat Ulasan

16 Comments:

iza berkata...
terima kasih atas kunjungan

Salam...

cantik. berat tak kalau buat benda2 ni?
saya fobia nk guna photobucket.com, kdg2 imej hilang...

yahaya berkata...
terima kasih atas kunjungan

@iza
imej yg kita guna dlm format jpeg dan gif biasa tak besar sgt.Rasanya widget yg dipasang pada blog seperti daun terbang salji lebih berat yg sebenarnya tak perlu pun ada.Minta maaf jika ada yg tak setuju,masing masing ada cara tersendiri..

yahaya berkata...
terima kasih atas kunjungan

@iza imej tak hilang kecuali didelete atau lebih limit bandwidth.Boleh guna blogger utk upload gambar,add gambar kat mana mana posting.Lepas tu klik kanan ambil link gambar.Lepas tu gambar tu boleh delete.gambar tak hilang akan masuk sekali dgn gambar lain yg ada pada blog

suffer8zine berkata...
terima kasih atas kunjungan

wow nice!

Terkini : Orang Utan Paling Gemuk

Zaer!! berkata...
terima kasih atas kunjungan

hehe..kalau format png kompem berat kan bro?da buat da,tapi berat.xpe2,save jpeg pon da ok.nice bro yahaya.;p

yahaya berkata...
terima kasih atas kunjungan

@Zaer!!betul zaer..png mmg berat..untuk web/blog guna jpeg dan gif.gif kurang kualiti dari jpeg.mcm header saya tu imej dah compress untuk loading lebih cepat.

sha purple berkata...
terima kasih atas kunjungan

WAHHH...sangat berguna info nie..thanks yaww=)

Pencari Qurratuaini berkata...
terima kasih atas kunjungan

mcm mana nak buat menu2 di side bar $ kotak2 yg berwarna2 tu?..lg satu..tulisan dlm kotak2 kecil tu..

sentraBLOG berkata...
terima kasih atas kunjungan

oww...
gitu caranya..
thanks for share..

suhaimi berkata...
terima kasih atas kunjungan

saya dah cuba buat buat "home" bawah header.tapi still tak jadi.apa masalahnya.
subby_sr@yahoo.com
www.suhaimica.blogspot.com

yahaya berkata...
terima kasih atas kunjungan

@suhaimiada kesalahan pada kod.walaupun satu koma tertinggal ia tak akan muncul...

© web-mhar™> TRiK berkata...
terima kasih atas kunjungan

Artikel Agan semuanya Keren... Thankss gan...

I FOLLOW YUR BLOG PLISS FOLBACK
http://mharjipes.blogspot.com/

JAMU TRADISIONAL berkata...
terima kasih atas kunjungan

SALAM...saya br lg blaja bt blog..nk mntk tlg cmne nk buat sya pnya jarak gambar post ke post agak jauh...cmne nk adjuz?

Riska Dian N berkata...
terima kasih atas kunjungan

makasih tutor nya ^^ bermanfaat

Seiryuu Ai / Fiesha Hafimi berkata...
terima kasih atas kunjungan

Assalamualaikum....minta bantuan saudara. saya telah membaca "Cara Membuat Menu Dengan Menggunakan Gambar" tanpa hack template dan saya telah mengaplikasikannya ke dalam blog. Cuma, kini saya ingin minta jasa baik saudara untuk memberikan sedikit maklumat berkaitan bagaimana cara untuk menghasilkan SubMenu Bergambar pula dari Menu Bergambar tanpa perlu saya hack template. Harap dapat membantu saya. Sekian.

Yayasan Harahafiyah berkata...
terima kasih atas kunjungan

Mohon kirimi saya cara memasukkan isi pada menu yang telah saya buat, kotak komentar dan kotak like facebook yang saya buat tidak tampil apa masalahnya? Tuk mengetahui hasil blog buatan saya silahkan kunjungi http://ypharahafiyah.blogspot.com. Thank's.