Cara Buat Menu Melayang Di Blog

Lama juga tidak pernah shere atau berbagi mengenai tips dan trik blogging, mengingat pengetahuan saya tentang perbloggingan atau lebih sepesifik belum banyak menguasai apa itu script ataupun html blog.Tapi saya coba memberikan apa yang saya bisa, walaupun cuman sedikit. Sebenarnya menu dalam blog cukup bervariasi dari menu horizontal, menu Dropdown, menu melayang dengan mouseover dll. Uke kali ini saya coba membahas bagaimana cara membuat menu melayang dalam blog yang mana contohnya bisa sobat lihat di blog ini.

menu-melayangLangsung saja kita menuju ke tutorial cara pembuatanya.
1. Login blogger
2. Masuk menu Rancangan => edit HTML => contreng expand widget tamplates ( sebelumnya back up terlebih dulu sebelum memulai pengeditan untuk menghindari kesalahan fatal.
3. Cari kode ]]></b:skin> lalu tempatkan kode di bawah ini tepat kode tadi


#menu {position:fixed;_position:absolute;top:137px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
4. Langkah selanjutnya kita cari kode </body> lalu tempatkan kode di bawah ini tepat di atas kode tadi
<div id='menu' style='padding: 5px 5px 5px 0pt; line-height: 0px; background: url(&quot;http://i1188.photobucket.com/albums/z403/pattah121/menu.jpg&quot;) no-repeat scroll 0% 0% transparent; width: 71px; height: 198px; color: rgb(102, 102, 102); font-size: 12px;'> <a href='http://goyangsotosop.blogspot.com/' target='_blank' title='Photoshop Online'><img border='0' src='http://i1188.photobucket.com/albums/z403/pattah121/photoshop.png' style='margin-bottom: 3px;'/></a><br/> <a href='http://pattah12.blogspot.com/search/label/Download%20Mp3' target='_blank' title='Download Mp3 Gratis'><img border='0' src='http://i1188.photobucket.com/albums/z403/pattah121/musik.png' style='margin-bottom: 3px;'/></a><br/> <a href='http://goyangsotosop.blogspot.com/p/game-pingpong.html' target='_blank' title='Game Ping Pong'><img border='0' src='http://i1188.photobucket.com/albums/z403/pattah121/game.png' style='margin-bottom: 3px;'/></a><br/><a href='http://pattah12.blogspot.com/search/label/Artikel' target='_blank' title='Artikel Menarik'><img border='0' src='http://i1188.photobucket.com/albums/z403/pattah121/artikel.png' style='margin-bottom: 3px;'/></a><br/></div>
5. Langkah terakhir simpan tamplate dan lihat perubahan yang terjadi
NB :
1. Ganti tulisan yang berwarna merah dengan Url Target atau Url blog anda.
2. Ganti tulisan yang berwarna biru dengan Url gambar anda sendiri jika ingin menampilkan hasil yang berbeda.
Selamat mencoba, semoga berhasil dan semoga bermanfaat
Previous
Next Post »

24 Komentar

Write Komentar
March 19, 2012 at 7:22 PM delete

kalo ditambahi efek mouse over sepertinya lebih kren sob,,,

wilujeng ngeblog

Reply
avatar
ubaybingokil
AUTHOR
March 19, 2012 at 10:38 PM delete

mantapp bang tutornya... :)

jika ada yang ingin modifikasi tampilan blognya bisa di pakai.. :)

happy blogging

Reply
avatar
March 20, 2012 at 9:07 AM delete

@Sakahayang Kang Asep
nah itu kang, keengen saya juga gitu ada effect mouse overnya tapi caranya gmna ya, hhehhehehhee

Reply
avatar
March 20, 2012 at 9:12 AM delete

@ubaybingokil
mksih bang, moga aja bisa bermanfaat :)

Reply
avatar
KangFarhan
AUTHOR
March 20, 2012 at 11:00 AM delete

hehehe...ajib nih cara abang....perlu perhatian khusus nih....makasih bang ya tutor yang mantap

Reply
avatar
masChandra
AUTHOR
March 20, 2012 at 11:04 AM delete

makasih bang tutornya.... bisa saya pake ntar kalo buat blog dummy lagi..heheheh

Reply
avatar
March 20, 2012 at 11:19 AM delete

@masChandra
uke2 sip bang, moga bermanfaat aja dech :)

Reply
avatar
March 20, 2012 at 12:52 PM delete

@KangFarhan
sama2 kang farhan, moga bisa mebatu kang :)

Reply
avatar
April 3, 2012 at 11:13 PM delete

Kak kalau bikin menu melayang kaya blog ini gimana caranya kak?

Reply
avatar
Jessica
AUTHOR
April 7, 2012 at 8:07 PM delete

template bisa dioprek gt nda? pengen yang bisa customize template gt.. :)

Reply
avatar
April 9, 2012 at 3:21 AM delete

@Ryan Gani Dharmawan
dah saya posting bang, silahkan di simak :)

Reply
avatar
April 9, 2012 at 3:22 AM delete

@Jessica
bisa bnget mbak, sebenernya tamplate blog saya juga bawaan blogger n sedikit saya modif di sana- sini. :)

Reply
avatar
Rudy Hartono
AUTHOR
April 22, 2012 at 8:11 PM delete

keren sob, bisa untuk dicoba

Reply
avatar
April 24, 2012 at 8:07 PM delete

@Rudy Hartono
sama2 bang, moga bisa bermanfaat aja bang :)

Reply
avatar
June 10, 2012 at 5:25 AM delete

bagus nih infonya, sangat membantu sekali.. thanks ya..
visit back ya

Reply
avatar
i Post
AUTHOR
June 16, 2012 at 9:02 PM delete

dicoba dulu ya gan....

Reply
avatar
November 7, 2012 at 1:30 PM delete

lg jalan2 bersama mbah google lalu nyasarx ke sini.., yg sy cari kayak pny sobat.., itu menu yg berwarha hitam melayang.., buatx gmn ya.., thx ya... *smile

Reply
avatar
November 8, 2012 at 6:15 AM delete

@Rohis Facebook
silahkan ke postingan ini aja sob
http://www.patahonline.com/2012/08/cara-buat-menu-dropdown-melayang.html

Reply
avatar

Jadilah pembaca yang bermartabat dengan memberikan komentar yang santun,indah di pandang dan sesuai dengan norma yang baik serta sesuai dengan apa yang ada di postingan.
Kriteria Komentar yang di tampilkan:
1. Bukan Komentar Spam
2. Komentar tidak sesuai dengan isi artikel
3. Menyisipkan Link/url baik itu blog/web pada komentar EmoticonEmoticon