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.
Langsung 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("http://i1188.photobucket.com/albums/z403/pattah121/menu.jpg") 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 terjadiNB :
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
23 Komentar
Write Komentarkalo ditambahi efek mouse over sepertinya lebih kren sob,,,
Replywilujeng ngeblog
mantapp bang tutornya... :)
Replyjika ada yang ingin modifikasi tampilan blognya bisa di pakai.. :)
happy blogging
@Sakahayang Kang Asep
Replynah itu kang, keengen saya juga gitu ada effect mouse overnya tapi caranya gmna ya, hhehhehehhee
@ubaybingokil
Replymksih bang, moga aja bisa bermanfaat :)
hehehe...ajib nih cara abang....perlu perhatian khusus nih....makasih bang ya tutor yang mantap
Replymakasih bang tutornya.... bisa saya pake ntar kalo buat blog dummy lagi..heheheh
Reply@masChandra
Replyuke2 sip bang, moga bermanfaat aja dech :)
@KangFarhan
Replysama2 kang farhan, moga bisa mebatu kang :)
Kak kalau bikin menu melayang kaya blog ini gimana caranya kak?
Replytemplate bisa dioprek gt nda? pengen yang bisa customize template gt.. :)
Reply@Ryan Gani Dharmawan
Replydah saya posting bang, silahkan di simak :)
@Jessica
Replybisa bnget mbak, sebenernya tamplate blog saya juga bawaan blogger n sedikit saya modif di sana- sini. :)
keren sob, bisa untuk dicoba
Replythanks kang ilmunya
Reply@Rudy Hartono
Replysama2 bang, moga bisa bermanfaat aja bang :)
@KAPAK Comunity
Replyuke sama sama bang :)
bagus nih infonya, sangat membantu sekali.. thanks ya..
Replyvisit back ya
@Full Software Registered
Replysama2 sob, senang bisa membatu :)
dicoba dulu ya gan....
Reply@i Post
Replysilahkan gan moga berhasil :)
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@Rohis Facebook
Replysilahkan ke postingan ini aja sob
http://www.patahonline.com/2012/08/cara-buat-menu-dropdown-melayang.html
@Ryo Bambang Saputra
Replysama2
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