Membuat Menu Melayang

Trik kali ini akan membahas tentang pembuatan menu melayang yang bertujuan, untuk mempercantik blog dan Template pun visitor Friendly, tujuan di atas menurut saya sendiri kalau salah y maklum namanya juga manusia.
Dalam blog (Blogger), Menu banyak jenis-nya, salah satunya yaitu yang akan saya jelaskan ini, dalam membuat menu blog membutuhkan bahasa-bahasa aneh yaitu CSS, HTML, Javascript, Jquery, Mootools dll namun yang akan saya jelaskan untuk membuat menu melayang membutuhkan 2 bahasa saja yaitu CSS dan HTML, kenapa saya memakai bahasa tersebut? Mungkin karena kecepatan akses blog kali y yang menjadi faktor pertama saya menggunakan kedua bahasa tersebut. Sekarang kita lihat aja cara membuatnya

Nah untuk dapat membuatnya kita harus login ke akun blogger kita dengan mengunjungi blogger.com

Setelah login, karena kita akan mempercantik blog maka kita akan masuk ke halaman Rancangan

Pada saat mengklik Tulisan/Link rancangan maka tampilan awalnya kita berada pada Elemen Halaman, karena kita ingin memasukan bahasa-bahasa aneh maka kita masuk ke Edit HTML

Setelah berada pada Edit HTML maka kita akan memasukan bahasa aneh CSS dulu yaitu, untuk menaruhnya kita letakkan saja diatas ]]></b:skin> dan kode CSSnya di bawah ini

.fixed_menu {
position: fixed;
top: 140px;
right: 0px;
width: auto;
margin:0;
background: transparent;
padding: 2px;
}
.fixed_menu a:hover img {
position: relative;
top: 0;
right: 2px;
}

Setelah Bahasa aneh CSS di masukkan maka selanjutnya kita masukkan bahasa aneh HTML agar CSS dapat bekerja, untuk menaruh HTML kita taruh saja di atas </body> dan kode HTMLnya di bawah ini

<div class="fixed_menu">
<a href="http://narutobleachlover.blogspot.com/" title="NarutoBleachLover"><img src="http://www.iconspedia.com/dload.php?up_id=14753"/></a>
<a href="http://oketrik.blogspot.com" title="oketrik"><img src="http://oketrik.googlecode.com/files/Favicon2.gif"/></a>
<a href="http://www.facebook.com/#!/pages/narutobleachlover/236752305473?ref=ts" title="NBLFB"><img src="http://www.iconspedia.com/dload.php?up_id=16171"/></a>
<a href="javascript:scroll(0,0)" title="Kembali Ke Atas"><img src="http://www.iconspedia.com/dload.php?up_id=70041"/></a>
</div>

Petunjuk :

• Untuk kode yang berwarna Merah yang menunjukan alamat blog ini, bisa sobat ganti dengan alamat blog sobat
• Kalau teks yang berwarna orange menunjukan alamat fanspage blog ini sobat dapat menggantinya dengan alamat fanspage blog sobat atau kalau tidak punya fanspage sobat dapat menaruh alamat profil Facebook sobat.

Nah setelah memasukan semua bahasa aneh maka anda dapat menyimpannya dengan mengklik tombol simpan, untuk melihat hasilnya sobat dapat membuka blog sobat atau kalau sudah di buka y tinggal refresh aja deh tapi kalau ingin melihat Demo atau contoh dari trik ini sobat bisa melihat ke kanan blog ini yang terdapat beberapa icon. Mungkin tutorial di atas hanya angin saja bagi para master atau yang sudah sering sekali di dunia blogger namun untuk para pemula atau seseorang yang baru di blogger trik di atas cukup bermanfaat. Sekian dari saya Terima kasih.