Membuat Menu Navigasi Bergerak di Blog | Assalamu ‘alaikum sobat Muro’i El-Barezy, sebenarnya saya agak bingung membuat judul postingan ini, membuat menu bergerak, emang ada gitu menu yang bergerak? Hehe… yah mungkin maksudnya jika mousenya kita arahkan ke atas dan bawah seakan menu itu ikut bergerak, jadi judulnya membuat menu navigasi bergerak di atas header blog.
Sebenarnya saya bukan spesialis tutorial blog, apalagi spesialis penyakit dalam hehe…, tapi terinspirasi dari pertanyaan sobat Ferry Nurse mengenai menu di atas header ini, ya sudah saya share saja disini, daripada nyari-nyari link tutorialnnya juga pusing tidak ketemu. Okelah langsung saja bagaimana cara membuat menu bergerak diatas header blog ini. Berikut ini langkah mudahnya :

Langkah pertama adalah seperti biasa masuk ke dasbord blog sobat.
Berikutnya klik Edit HTML dan silakan centang “Expand Widget Templates”
Kemudian cari kode ]]></b:skin>
Langkah berikutnya adalah copy paste code CSS di bawah ini diatas kode ]]></b:skin> tadi :

/* Top navigation */
#top-nav{background:#333;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:28px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000}#top-nav ul{margin:0 auto;width:970px}#top-nav ul li{float:left}#top-nav ul li a{line-height:28px;padding:0 15px;color:#fff;font-size:13px;text-shadow:0px -1px 0px #000;display:block;text-decoration:none}#top-nav ul li a:hover{color:#7cae15}

Nah kalo sudah melakukan langkah diatas, sekarang coba cari kode </head>.
Dan jika sudah ketemu kodenya, silakan copy paste script berikut, dan letakkan dibawah kode </head> tadi :

<!-- top navigation -->
<div id='top-nav'>
<ul>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</div>

Jangan lupa simpan utak-atik template sobat dan sekarang menu diatas header yang bisa bergerak naik turun sudah jadi deh, tinggal menyesuaikan dengan template sobat, diantaranya :

• Angka 970px silakan ganti sesuaikan dengan lebar body template sobat.
• Ubah warna menu navigasi dan font sesuai selera.
• Tanda #, isi dengan URL menu yang sobat inginkan dan silakan sesauikan nama menunya dan juga sobat bisa menambahkan dengan yang lainnya.

Demikian tutorial ringan menganai bagaimana membuat menu navigasi diatas header yang bisa bergerak. Semoga manfaat buat yang memerlukan. Happy blogging…..