X-Steel - Wait
TERIMA KASIH ATAS KUNJUNGANNYA DAN JANGAN LUPA TINGGALKAN KOMENTARNYA

Jan 16, 2013

Cara Mudah Membuat Menu Horizontal Dropdown

Ini dia Cara Membuat Menu Navigasi Horizontal Dropdown . Dalam bahasan Tutorial Blog kali ini kita akan mencoba membuat menu navigasi yang ada cabangnya (dropdown). Contoh menu navigasi horizontal bercabang tersebut bisa anda lihat di bawah ini:


Membuat Menu Navigasi Horizontal Dropdown



Menu horizontal di atas dibuat dengan menggunakan html script dan css, menurut beberapa sumber menu horisontal yang dibuat menggunakan script css + html  lebih mudah ditelusuri oleh robot search engine dibanding jika menggunakan menu yang dibuat menggunakan javascript.

Untuk membuatnya bisa lakukan langkah berikut:

1. Login ke account blogger anda
Pilih Dashboard -> Tataletak -> Edit HTML


 Cari Kode Berikut : ]]></b:skin>

2. Copy Kode Dibawah Ini Diatas Kode Langkah 1 :

/* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;
opacity: 0.99; filter: alpha(opacity: 98);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}
.status-msg-wrap{
display:none;
}


3. Lalu Klik Tombol Simpan Template

4.Buka halaman "Tata Letak -> Elemen Halaman"


5.Pada Elemen header , klik " Tambah Gadget"



Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan BLog Lain  tentang cara menampilkan "tambah gadget" di header


6.setelah mengklik tombol "tambah gadget" pilih HTML/Javascript


7.pada kotak dialog html/javascrpit masukkan kode html berikut:


<div id="menu">
<ul>
<li><a class="active" href="/"> Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
</ul></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
</ul></li>
<li><a href="#">Menu 4</a></li>
<ul>
</ul>
</ul></div>



Setelah Itu Edit Pada Tanda # Dengan Link Yang Anda Punya Selesai Deh...
Bagaimana menurut sobat semua berhasil gak. . . . . .???

4 komentar:

  • Abdur Rahim says:
    January 16, 2013 at 3:10 PM

    Boleh dicoba ni bos

  • Syafar Jhonatan says:
    January 16, 2013 at 3:53 PM

    thank you sob sudah berkunjung,.........


    http://syafarmapalang.blogspot.com/

  • shayri duniya says:
    January 16, 2013 at 7:48 PM

    nice, dear thank you visit my blog
    shayri ki duniya
    very nic,e your blog i like

    http://shayri-ki-duniya.blogspot.in/

  • zaed rastha says:
    January 18, 2013 at 1:17 PM

    ok tanks back bwat sobat semua

Post a Comment