Membuat Menu Drop Down Dengan Animasi Di Blog

Membuat Menu Drop Down Dengan Animasi Di Blog | Ghiyats Blogs - Hai, Pada artikel yang akan saya bagikan kali ini, akan saya bagikan menu drop down keren dengan bentuk dan tampilan yang keren dan menarik

Menu ini dengan CSS Dan Tampilan Gambar pada bagikan menunya, Menu ini tampilan animasi keren yang sangat elegan dan indah, Langsung saya kita coba membuat menu ini dan tutorialnya seperti ini :

• Login ke Blogger
• Pergi ke menu ''Template'' >> Edit HTML
• Setelah itu cari kode ]]></b:skin dan kalau sudah ketemu, copy kode dibawah ini, dan masukan di atas atau sebelum kode tadi

#mbt_menu {
    background: #656870;
    width: 100%;
    margin: 0px;
    height: 60px;
    padding: 0px;
    font-size: 13px;
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: normal;
    word-spacing: 2;
    -webkit-font-smoothing: antialiased;
}

#mbt_menu li.home a {
    padding: 0px 30px;
}

#mbt_menu li.home img {
    vertical-align: middle;
}

#mbt_menu ul {
    height: 60px;
    list-style: none;
    margin: 0;
    padding: 0px;
}

#mbt_menu li {
    float: left;
    padding: 0px;
}

#mbt_menu li a {
    background: #656870;
    color: #CCC;
    display: block;
    font-weight: bold;
    line-height: 60px;
    margin: 0px;
    padding: 0px 25px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}

#mbt_menu li a:hover, #mbt_menu ul li:hover a {
    background: #46484E;
    color: #FFFFFF;
    text-decoration: none;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}

#mbt_menu li ul {
    background: #656870;
    display: none;
    height: auto;
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    position: absolute;
    width: 225px;
    z-index: 200;
/*top:1em;
/*left:0;*/;
}

#mbt_menu li:hover ul {
    display: block;
}

#mbt_menu li li {
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 225px;
}

#mbt_menu li:hover li a {
    background: none;
    color: #979EAF;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

#mbt_menu li ul a {
    display: block;
    height: 60px;
    font-size: 13px;
    font-style: normal;
    margin: 0px;
    padding: 0px 10px 0px 15px;
    text-align: left;
}

#mbt_menu> ul > li ul li a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    -webkit-transition: color ease 0.3s;
    -moz-transition: color ease 0.3s;
    -ms-transition: color ease 0.3s;
    -o-transition: color ease 0.3s;
}

#mbt_menu li ul a:hover, #mbt_menu li ul li:hover a {
    background: #46484E;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #FFF;
    text-decoration: none;
    padding: 0px 10px 0px 15px;
}

•  Setelah itu klik simpan

SETELAH ITU

• Kita Pergi ke Tata Letak
• Klik Tambah Gadget >> Cari gadget HTML/JavaScript
• Setelah ketemu, Copy dan Paste di dalam gadget Tadi

<div id="MBT_menu">

<ul>

<li class="home"><a href="http://nama blog anda/" title="Home Page"><img alt="Home" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZYZaAKgJAW9Cnw2oBMFpfdd7xzHyiaxwBIseBEaqw8Qbtkvzx4I-SLcAV0rD6efHQIdfUt35QvgiqZaze06ybzuD-UI9h0ZmQLbKvqzWE9-ji2Cwz6o9uEr23gf0dvgNzhy6QgUCOnGx7/s1600/Very- Basic-Home-icon.png"/></a></li>

<li class="sub "><a href="#"><span>Blogger</span></a>

<ul>

<li><a href="#"><span>SEO</span></a></li>

<li><a href="#"><span>Template</span></a></li>

<li><a href="#"><span>Widgets</span></a></li>

<li><a href="#"><span>Plugins</span></a></li>

</ul>

</li>

<li><a href="#"><span>Applicatoin</span></a>

<ul>

<li><a href="#"><span>HTML Encoder</span></a></li>

<li><a href="#"><span>HTML Editor</span></a></li>

</ul></li>

<li><a href="#"><span>Tools &#187</span></a>

<ul>

<li><a href="#"><span>Online HTML Editor</span></a></li>

<li><a href="#"><span>Color Code</span></a></li>

<li><a href="#"><span>Page Rank Checker</span></a></li>

</ul>

</li>

<li><a href="#"><span>Faqs</span></a></li>

<li><a href="#"><span>About Us</span></a></li>

<li><a href="#"><span>Contact Us</span></a></li>

</ul>

 </div>

• Ganti http://nama blog anda/ Dengan Url blog anda
• Ganti # dengan url yang inngin di tuju
• Ganti Blogger, Contact us dan lainnya dengan nama menu yang anda inginkan
• Setelah semua di ganti sesuai kemauan anda, Sekarang klik simpan

Demikianlah artikel ini semoga apa yang saya bagikan ini bermanfaat dan mudah untuk di pratekkan, Silakan beri pendapat anda di kolom komentar di bawah ini, Terima Kasih..

Via : MyBlogger - Tricks

Keep Blogging