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.
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:
Kemudian klik pada edit html
Gambar yg dimasukkan akan muncul..klik pada gambar untuk mengubah saiznya dengan menarik bingkai yg ada pada gambar
Untuk memasukkan link pada button tadi..klik pada gambar kemudian klik ikon create link dan masukkan link yang dikendakki padanya:
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>
<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:
Salam...
cantik. berat tak kalau buat benda2 ni?
saya fobia nk guna photobucket.com, kdg2 imej hilang...
@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..
@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
wow nice!
Terkini : Orang Utan Paling Gemuk
hehe..kalau format png kompem berat kan bro?da buat da,tapi berat.xpe2,save jpeg pon da ok.nice bro yahaya.;p
@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.
WAHHH...sangat berguna info nie..thanks yaww=)
mcm mana nak buat menu2 di side bar $ kotak2 yg berwarna2 tu?..lg satu..tulisan dlm kotak2 kecil tu..
oww...
gitu caranya..
thanks for share..
saya dah cuba buat buat "home" bawah header.tapi still tak jadi.apa masalahnya.
subby_sr@yahoo.com
www.suhaimica.blogspot.com
@suhaimiada kesalahan pada kod.walaupun satu koma tertinggal ia tak akan muncul...
Artikel Agan semuanya Keren... Thankss gan...
I FOLLOW YUR BLOG PLISS FOLBACK
http://mharjipes.blogspot.com/
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?
makasih tutor nya ^^ bermanfaat
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.
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.