Cara Membuat Menu Drop Down Keren di Blog

Tutorial yang sangat keren ni sob. Cara membuat Cara Membuat Menu Drop Down Keren di Blog. dengan menerapkan cara ini diblog sobat maka tamp...

Tutorial yang sangat keren ni sob. Cara membuat Cara Membuat Menu Drop Down Keren di Blog. dengan menerapkan cara ini diblog sobat maka tampilan header blog akan terlihat keren dan memudahkan pengunjung untuk memilih category yang akan di baca. 

Login ke Blogger Dashboard
Silahkan menuju Template ==> Edit HTML
Cari </header> gunakan ctrl f
Copy code di bawah ini tepat di bawah </header> tag ( </header>)

<div id='menubor'></div>
<center>
<ul id='menu'>
    <li>
        <a class='hmlink' href='#'>Home</a>
    </li>
    <li>
        <a class='winlink' href='#'>Blogger Templates</a>
    </li>
    <li>
        <a class='maclink' href='#'>Blogger Widgets</a>
    </li>
    <li>
        <a class='andlink' href='#'>How To Tuts</a>
    </li>
    <li>
        <a class='gamlink' href='#'>Privacy Policy</a>
    </li>
    <li>
        <a class='seclink' href='#'>Guest Post</a>
    </li>
    <li>
        <a class='linlink' href='#'>About</a>
    </li>
</ul>
</center>
<style>
#menu li {            
 display: inline;            
 list-style: none;            
 padding: 0;        
 }                
 #menu li a {                              
 padding: 15px 20px 15px 20px;            
 text-decoration: none;            
  color:white;
  font-family: 'Noto Serif', serif;
-moz-box-shadow: inset 0 0 13px -2px #000;
-webkit-box-shadow: inset 0 0 13px -2px #000;
box-shadow: inset 0 0 13px -2px #000;
  font-size:18px;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
  transition: padding-bottom .666s;
-webkit-transition: padding-bottom .666s;
-moz-transition: padding-bottom .666s;
-o-transition: padding-bottom .666s;
-ms-transition: padding-bottom .666s;
}
 #menu li a:hover {                              
  padding-bottom:20px;
}
.hmlink{
  background:#24459A;
}
.winlink{
  background-color: rgba(9,173,217,1);
}
.maclink{
  background-color: rgba(108,109,112,1);
}
  .weblink{
    background:#EEEE00;
    color:black;
  }
.andlink{
  background-color: rgba(149,191,43,1);
}
.gamlink{
  background-color: rgba(212,2,43,1);
}
.seclink{
  background-color: rgba(0,158,62,1);
}
.linlink{
  background-color: rgb(123, 82, 138);
}
#menubor{
  border-top:1px solid black;
  margin-bottom:-1px;
}
  .header-outer{
    padding-bottom:20px;
  }
</style>

Klik simpan template.
Catatan :
Masukan link sobat pada tanda # dan Ganti tulisan berwarna biru sesuai category atau labels blog sobat.
Jika sobat ingin menambah menu lain silahkan tambahkan code di bwah ini

<li><a class='Tambahan' href='#'>text</a></li> di antara <ul> and </ul> tags