Membuat Menu Navigasi Bergerak Jika di Turunkan Pada Blog

Gusti Ardias Riantono    Mei 26, 2013    Tutorial    Comment   

Membuat Menu Navigasi Bergerak Jika di Turunkan Pada Blog - Pada kali ini saya akan memberikan tutorial Membuat Menu Navigasi Bergerak Jika di Turunkan Pada Blog. Kurang lebih contohnya seperti pada gambar dibawah ini:

Oke Langsung saja tidak usah berlama-lama haha :D

Langkah pertama adalah seperti biasa masuk ke dasbord blog kalian.
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 jika 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 kalian dan sekarang menu diatas header yang bisa bergerak naik turun sudah jadi deh, tinggal menyesuaikan dengan template kalian, 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 mengenai bagaimana membuat menu navigasi diatas header yang bisa bergerak. Semoga manfaat bagi yang memerlukan.