CSS3 Menu Drop Down Keren dengan Icon untuk Blogger

Tweet

CSS3 Menu Drop Down Keren dengan Icon untuk Blogger - Hai sobat blogger, tutorial kali ini kita akan membahas cara membuat CSS3 Menu Drop Down Keren dengan Icon untuk Blogger yang cukup simple dan keren untuk Anda gunakan.

Langkah CSS3 Menu Drop Down Keren dengan Icon untuk Blogger :

1. Buka akun Blogger Anda
2. Masuk ke menu template, edit HTML > centang expand template widget
3. Cari kode dibawah ini 

]]></b:skin>

     4.  Pastekan kode dibawah ini diatas pada kode diatas :

.btrix_menu,.btrix_menu ul,.btrix_menu li,.btrix_menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}
.btrix_menu {
 height: 40px;
 width: 525px;
 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
.btrix_menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}
.btrix_menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;
 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}
.btrix_menu li:first-child a { border-left: none; }
.btrix_menu li:last-child a{ border-right: none; }
.btrix_menu li:hover > a { color: #8fde62; }
.btrix_menu ul {
 position: absolute;
 top: 40px;
 left: 0;
 opacity: 0;
 background: #1f2024;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}
.btrix_menu li:hover > ul { opacity: 1; }
.btrix_menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;
 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}
.btrix_menu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}
.btrix_menu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;
 border: none;
 border-bottom: 1px solid #353539;
}
.btrix_menu ul li:last-child a { border: none; }
.btrix_menu a.documents { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizx0kq2Yf4ZlToovLv1-q-Cl12tiYTJ_XhFGpLca0qft8WAT2Douidy1PUshw31kReDB6g4AJEZkb70ObejbAhAW7kM9tiYQ_tBD_7n6prCqHfwcTNUknfOI-qfb8kmmbjyswgv9dp_k5d/s1600/docs.png) no-repeat 6px center; }
.btrix_menu a.messages { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDPjpnlou1UQyFu7kule-v8FCXySt7hPIp1ArbIQ1b5aiL9rvBbKRphhaG5tDp2hYfoYJ-oN_hsRM9EHcmcRfUjlj6QogF-dJucN2tZ6eZEJSUD7yT8phf3mPNoFkIJW1-lpXPkpYVSdVE/s1600/bubble.png) no-repeat 6px center; }
.btrix_menu a.signout { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzg9UjWO7fnNtftWf2_eFi2KRSM28vQqK1afoj_9bklA79-DExEFxETasu7VL03uoFwAm3Dqc3d3-cwb92SWz6N12exhbqYOuYjIj3rEJLaR8zKHHJE2AL6nJFN9BqPdrPbDMrVqm5NaFq/s1600/arrow.png) no-repeat 6px center; }

     5.  Cari salah satu kode dibawah ini :

<header id='header-wrapper'>

atau buat didalam widget, terserah pada inspirasi Anda untuk blog Anda.

     6.  Pastekan kode dibawah ini :

<ul class="btrix_menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Likes</a></li>
 <li><a href="#">Views</a>
  <ul>
   <li><a href="#" class="documents">Documents</a></li>
   <li><a href="#" class="messages">Messages</a></li>
   <li><a href="#" class="signout">Sign Out</a></li>
  </ul>
 </li>
 <li><a href="#">Uploads</a></li>
 <li><a href="#">Videos</a></li>
    <li><a href="#">About</a></li>
 <li><a href="#">Contact us</a></li>
</ul>

    7. Ganti kode # dengan URL dan juga anchor textnya.

Demikianlah artikel CSS3 Menu Drop Down Keren dengan Icon untuk Blogger, semoga memberi efek yang baik buat Anda. Thanks reader...