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

Post a Comment

16 Comments:

iza said...
Teknik Buat Blog

Salam...

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

sibersensasi said...
Teknik Buat Blog

@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..

sibersensasi said...
Teknik Buat Blog

@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 said...
Teknik Buat Blog

wow nice!

Terkini : Orang Utan Paling Gemuk

Zaer!! said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

@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 said...
Teknik Buat Blog

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

Pencari Qurratuaini said...
Teknik Buat Blog

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

sentraBLOG said...
Teknik Buat Blog

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

suhaimi said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

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

ewrewr said...
Teknik Buat Blog

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

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

JAMU TRADISIONAL said...
Teknik Buat Blog

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 said...
Teknik Buat Blog

makasih tutor nya ^^ bermanfaat

Seiryuu Ai / Fiesha Hafimi said...
Teknik Buat Blog

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.

Unknown said...
Teknik Buat Blog

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.