Cara Membuat Menu Horizontal Dropdown ( Versi 2 )

Sebelumnya saya pernah mem-posting tentang menu navigasi horizontal dropdown yang bisa kalian lihat disini, kali ini saya akan memberikan versi lainnya.
Menu navigasi secara default belum tersedia di template blogspot. Untuk menampilkan atau membuat menu navigasi perlu ditambahkan script agar menu tersebut muncul di bagian header blog. Dalam postingan ini kita akan membuat menu navigasi  horisotal sederhana menggunakan script css.



    * Login ke Blogger.com
    * Kemudian Tata Letak
    * Pilih Edit HTML
    * Centang Expand Widget
    * Cari kode berikut "]]></b:skin>"


Di bagian atas kode tersebut masukkan kode berikut

ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}

ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}

ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}

ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) 0px -30px no-repeat;
}


ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) 0px -30px no-repeat;
float:left;
margin:0;
}

Simpan template

Pada gadget html/javascript, masukkan kode berikut:
ingat pasang script ini pada widget yang berada pada header kalian, buat template yang tidak menyediakan widget dibagian headernya, sebaiknya dibuat terlebih dahulu disini

<ul id="menu">
<li class="button"><a class="current" href="#">Home</a></li>
<li class="button"><a href="#">Mobile Phone</a></li>

<li class="button"><a href="#">Blogger Tips</a></li>
<li class="button"><a href="#">SEO</a></li>
<li class="button"><a href="#">Credit Card</a></li>
<li class="button"><a href="#" target="_blank">Computer</a></li>
</ul>
</div><!-- End of Nav Div -->

Ganti "#" dengan alamat blog kalian.
Ganti Teks berwarna "Hijau" dengan keyword link-nya

Simpan template

Related Posts:

Tweet