Membuat Dropdown Menu dengan CSS

 

Jika sebelumnya saya pernah memberi tahu bagaimana sih caranya membuat Dropdown menu, nah kali ini  saya akan memberi lagi membuat dropdown menu yang lainnya. hehe oke ikuti langkah2 dibawah ini dengan hati2 dan ingat BACK UP terlebih dahulu template kamu sebelum mengedit templatenya.

1. Masuk ke akun Blogger

2. Klik Rancangan --> Edit HTML --> Klik juga Expand Template Widget

 

 3.  Cari kode ]]></b:skin> gunakan CTRL + F untuk mempercepat pencarian, setelah itu kamu copy kode CSS dibawah ini tepat diatas kode ]]></b:skin> tadi. ingat DIATAS !

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#333333;

height:35px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGX6DqVS4DTjFXJSHHwPmk0LtSN1GVnuOZc8pHwfkhAFECHsX0GH8_rRDEvLNKCox936k9_5ljYR6kzYEa_LDi0Vv5lcNJ1jpu7y8oFa1nyMA4hHQhLGAuWkF8jgfz-bC5tRLmJIZXxeFU/s1600/seperator.gif") bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kLCymg1FiJyrfCyDf6b-baoC8JlaH8Af7T2cJXmiJLJ0LSocVZJa8DqfujYywRqDPLu1D24oBJy33Kpj6wqQv6a6zgATBLRk_k7zXROrMqomkUOQ7IYXQ8EZyxvGCiTJ1wXt6Ke_ZKGb/s1600/hover.gif") bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;



}

.menu li li {

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNgmun6rBRBAU6y87mz7m9OH2QydfSuVtif4QatqeJc1CVQfVMwptee-T53EEgIPvJ1l1T5aceb3DqnxXgQxeiDRSEX6wz87Z1eYdIJNrXNJPWfsvKxYr4tsDhmOB1tBAOiOJ5QPxudqzk/s1600/sub_sep.gif') bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;



}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdw7a5OGzINXGd14XdtnaNzXvUgmKxksa7k5oeKxSt7P6MkRhtRdbJfT_CjyLQVP_pZ6acjXWMuzQu7cWowvpBUwwAf1BOGHriOca1maDSeLKkAungRT7B3viNODm8bIPahFSx5S_Mq_pT/s1600/hover_sub.gif') center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:left;

}

4. Simpan Template

5. Kemudian, Klik Rancangan --> Elemen Laman --> Tambah Gadget dan pilih HTML/Javascript dan masukan kode HTML dibawah ini

<div class="menu">

<ul>

<li><a href="hzndi.blogspot.com" >hzndi</a></li>

<li><a href="http://hzndi.blogspot.com/search/label/Tips%20and%20Triks" id="current">Tips and Tricks</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>

6. Simpan, letakan bawah judul blog dan lihat Hasilnya, kira2 hasilnya seperti dibawah ini.

Postingan Terkait:

Posted in: Drop Down Menu