Cara Buat Dropdown Menu Di Blog

Hai sob:) kali ini saya akan berposting Cara Buat Dropdown Menu Di Blog-Dropdown menu adalah menu yang biasanya berisi link-link untuk menuju halaman tertentu. Tidak hanya itu, menu-menu ini juga memiliki sub menu lagi yang tampil ke bawah dari menu tersebut oleh karena itu menu ini disebut dropdown menu, karena tampilnya ke bawah. Sedikit bingung dengan penjelasan saya ? hehehe baiklah, saya akan berikan contohnya.

 

Gemana sob keren kan?
berikut caranya:
1. Login ke akun Blogger sobat

 

2. Sekarang Klik Template

3. Klik EDIT HTML

4. Sekarang Cari Kode ]]></b:skin> agar mudah dalam pencarian tekan Ctrl+f

5. Letakan kode di bawah tepat di atas kode ]]></b:skin>

/* The CSS Code for the menu starts here bloggertrix.com */

.mainmenu {
 position:absolute; 
 z-index:100;
 font-family:Verdana, Geneva, sans-serif;
 font-weight:normal;
 font-size:90%;
 line-height:25px;
 left:50%; 
 margin-left:-303px; 
 width:906px;
} 

ul.menu {
 padding:0; 
 margin:0; 
 list-style:none; 
 width:100px; 
 overflow:hidden; 
 float:left; 
 margin-right:1px;
} 

ul.menu a {
 text-decoration:none; 
 color:#fff; 
 padding-left:5px;
}
 
ul.menu li.list {
float:left;
width:250px;
margin:-32767px -125px 0px 0px;
background::#e81717 url() no-repeat left bottom;
}

ul.menu li.list a.category {
position:relative;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}

ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
 margin-right:1px;
 background-image:url();
 background-repeat:no-repeat;
 background-position:left top;
}

ul.submenu {
 float:left; 
 padding:25px 0px 0px 0px; 
 margin:0; 
 list-style:none; 
 background:#e81717;
 background-repeat:no-repeat;
 background-position:left top;
 margin:-25px 0px 0px 0px;
}
 
ul.submenu li a {
float:left;
width:120px;
background:#369;
clear:left;
}

ul.submenu li a.endlist {
 background:url();
}
 
ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
background:url();
}
 
ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
background:#e81717;
margin-right:1px;
}
-->
.menu {
width: 300px;
background: #00199E;
margin: 10px;
padding: 0;
border: 1px solid black;
cursor: pointer;
}

7. Sekarang kita menuju ke layout

 

8. Klik Tambahkan Gadget dan pilih 'HTML/Javascript

9. Letakan script html di bawah ini di kolom yang disediakan. (Ingat, untuk kolom judul gadget tidak perlu diisi)

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div class="mainmenu">
<ul class="menu">
<li class="list">
 <a class="category" href="#Home">Home</a>
</li>
</ul>
<ul class="menu">
<li class="list">
 <a class="category" href="#about">About Us&nbsp;&nbsp;&raquo;</a>
 <ul class="submenu">
  <li><a href="#about1">About link 1</a></li>
  <li><a href="#about2">About link 2</a></li>
  <li><a href="#about3">About link 3</a></li>
        <li><a href="#about4">About link 4</a></li>
  <li><a href="#about5">About link 5</a></li>
 </ul>
</li>
</ul>
<ul class="menu">
<li class="list">
 <a class="category" href="#articles">Articles&nbsp;&nbsp;&raquo;</a>
 <ul class="submenu">
  <li><a href="#articles1">Articles link 1</a></li>
  <li><a href="#articles2">Articles link 2</a></li>
  <li><a href="#articles3">Articles link 3</a></li>
  <li><a href="#articles4">Articles link 4</a></li>
 </ul>
</li>
</ul>
<ul class="menu">
<li class="list">
 <a class="category" href="#news">News&nbsp;&nbsp;&raquo;</a>
 <ul class="submenu">
  <li><a href="#news1">News link 1</a></li>
  <li><a href="#news2">News link 2</a></li>
  <li><a href="#news3">News link 3</a></li>
 </ul>
</li>
</ul>
<ul class="menu">
<li class="list">
 <a class="category" href="#donate">Donate</a>
</li>
</ul>
<ul class="menu">
<li class="list">
 <a class="category" href="http://www.bloggertrix.com/">Contact</a>
</li>
</ul>
<!-- end mainmenu --></div>

10. Klik Simpan
bagaimana penampilanya keren gak sob? oke cukup sekian, Semoga Bermanfaat...