Cara membuat menu menu css3 di blog mudah dan keren

Bagi anda pembaca setia diandiki blogspot maaf jika kemarin saya tidak mengupload artikel baru, dikarenakan saya lagi mengedit artikel lama supaya menjadi artikel asli. Tujuan saya untuk mengedit artikel tersebut supaya blog saya mendapat persetujuan dari PPC ( pay per click) google adsense , selama saya pernah mendaftar ke google adsense saya pernah ditolak sebanyak 3 kali pada tahap pertama, dan pernah di tolak satu kali pada tahap kedua.

Baiklah kini kita akan kembali ke tujuan awal saya memposting ini yakni menunjukkan cara membuat menu css3 keren.

Berikut cara untuk membuat menu:
1. Login ke blogger masing-masing
2. Copy kode yang ada di bawah ini

<style>

#MBT-Container {

    font: normal 1em Arial, Helvetica, sans-serif;

     width:100%; float:left;   

}

a {

    color: #333;

}

#nav {

    margin: 0;

    padding: 7px 6px 0;

    background: #0080ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9bBp3vsWZyTvLVUgeP8JqoF6KVp8jynXkGzQQhdIswBCmV7DutYQLz6M-RnKyeVpl5pYlTHYtM1iSYdLhso_SO36rRs0ICK4wouJryJMg4dUPad9M8NG-AudKqsdld12vFQenQ-GhyphenhyphenOs/s1600/gradient.png) repeat-x 0 -110px;

    line-height: 100%;

    border-radius: 2em;

    -webkit-border-radius: 2em;

    -moz-border-radius: 2em;

    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);

    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);

}

#nav li {

    margin: 0 5px;

    padding: 0 0 8px;

    float: left;

    position: relative;

    list-style: none; }

/* main level link */

#nav a {

    font-weight: bold;

    color: #e7e5e5;

    text-decoration: none;

    display: block;

    padding:  8px 20px;

    margin: 0;

    -webkit-border-radius: 1.6em;

    -moz-border-radius: 1.6em;

   

    text-shadow: 0 1px 1px rgba(0,0,0, .3);

}

#nav a:hover {

    background: #000;

    color: #fff;

}

/* main level link hover */

#nav .current a, #nav li:hover > a {

    background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9bBp3vsWZyTvLVUgeP8JqoF6KVp8jynXkGzQQhdIswBCmV7DutYQLz6M-RnKyeVpl5pYlTHYtM1iSYdLhso_SO36rRs0ICK4wouJryJMg4dUPad9M8NG-AudKqsdld12vFQenQ-GhyphenhyphenOs/s1600/gradient.png) repeat-x 0 -40px;

    color: #444;

    border-top: solid 1px #f8f8f8;

    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);

    -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);

    box-shadow: 0 1px 1px rgba(0,0,0, .2);

    text-shadow: 0 1px 0 rgba(255,255,255, 1);

}

/* sub levels link hover */

#nav ul li:hover a, #nav li:hover li a {

    background: none;

    border: none;

    color: #666;

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

}

#nav ul a:hover {

    background: #0080ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9bBp3vsWZyTvLVUgeP8JqoF6KVp8jynXkGzQQhdIswBCmV7DutYQLz6M-RnKyeVpl5pYlTHYtM1iSYdLhso_SO36rRs0ICK4wouJryJMg4dUPad9M8NG-AudKqsdld12vFQenQ-GhyphenhyphenOs/s1600/gradient.png) repeat-x 0 -100px !important;

    color: #fff !important;

text-align:left;

    -webkit-border-radius: 0;

    -moz-border-radius: 0;

    text-shadow: 0 1px 1px rgba(0,0,0, .1);

}

/* dropdown */

#nav li:hover > ul {

    display: block;

}

/* level 2 list */

#nav ul {

    display: none;

text-align:left;

    margin: 0;

    padding: 0;

    width: 185px;

    position: absolute;

    top: 35px;

    left: 0;

    background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9bBp3vsWZyTvLVUgeP8JqoF6KVp8jynXkGzQQhdIswBCmV7DutYQLz6M-RnKyeVpl5pYlTHYtM1iSYdLhso_SO36rRs0ICK4wouJryJMg4dUPad9M8NG-AudKqsdld12vFQenQ-GhyphenhyphenOs/s1600/gradient.png) repeat-x 0 0;

    border: solid 1px #b4b4b4;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;

    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);

    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);

    box-shadow: 0 1px 3px rgba(0,0,0, .3);

}

#nav ul li {

    float: none;

    margin: 0;

    padding: 0;

}

#nav ul a {

    font-weight: normal;

    text-shadow: 0 1px 0 #fff;

}

/* level 3+ list */

#nav ul ul {

    left: 181px;

    top: -3px;

}

/* rounded corners of first and last link */

#nav ul li:first-child > a {

    -webkit-border-top-left-radius: 9px;

    -moz-border-radius-topleft: 9px;

    -webkit-border-top-right-radius: 9px;

    -moz-border-radius-topright: 9px;

}

#nav ul li:last-child > a {

    -webkit-border-bottom-left-radius: 9px;

    -moz-border-radius-bottomleft: 9px;

    -webkit-border-bottom-right-radius: 9px;

    -moz-border-radius-bottomright: 9px;

}

/* clearfix */

#nav:after {

    content: ".";

    display: block;

    clear: both;

    visibility: hidden;

    line-height: 0;

    height: 0;

}

#nav {

    display: inline-block;

}

</style>

<div id="MBT-Container">

<ul id="nav">

<li class="current"><a href="#">Home</a></li>

<li><a href="#">Nama menu</a></li>

<li><a href="#">Nama menu</a></li>

<li><a href="#">Nama menu</a></li>

<li><a href="#">Nama Menu</a></li>    

</a></li></li></li></ul></div>

<br/>

Ket: # = kamu tukar dengan Url menu kamu
       Nama menu = tukar dengan nama menu kamu


3. setelah di copy kode diatas pergi ke tata letak --> tambah gadget --> simpan --> letakkan di mana mau.

4. selesai -->> silahkan di coba, kalu tidak berhasil tulis di komentar.