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:

Drop Down Menu

• 5 Widget yang Wajib Dimiliki Oleh Blogger
• Cara Membuat Menu Horizontal Lavalamp Dengan CSS dan Jquery
• Cara Membuat Horizontal Menu Dengan CSS
• Membuat Drop Down Menu CSS3 di Blogger
• Menaruh Drop Down Menu Dengan Facebook Style
• Menaruh CSS3 Drop Down Menu Dengan CSS
• Membuat Horizontal Dropdown Menu di Blog Dengan Jquery

Posted in: Drop Down Menu