Jumat, 23 November 2012

Cara memberi menu melayang pada 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 Description: Cara Buat Menu Melayang Di Blog Rating: 3.5 Reviewer: pattah pattah ItemReviewed: Cara Buat Menu Melayang Di Blog

0 komentar:

Posting Komentar

 
Fashion Trend © 2011 | All Rights Reserved | About | Privacy Policy | Contact | Sitemap