Cara Membuat Menu Drop Down Di Blog

 Assalamu'allaikum Warrahmatullahi Wabarakatu

    Halo , Selamat Pagi ... Pada Kali ini kami akan membahas tentang Tutorial Membuat Menu Drop Down ... Apa itu Menu Drop Down ?
Menu Drop Down adalah menu yang berada di atas atau di bawah Header blog , cara kerjanya bila disentuh cursor [ bukan di klik ] akan membuat menuke bawah sehingga membuat blog menjadi Simple dan juga Super Simple ...

Demo

Sudah Mengerti ?

Kalo udah yuk Kita baca Tutorial nya ...

Tutorial :

1 . Buka www.blogger.com , jika sudah lalu klik template .

2 . Klik Edit HTML

3 . Lalu Cari Kode ]]></b:skin> dengan cara menekan CTRL + F / F3 Di keyboard Lalu Cari
    Kodenya

4 . Dan Tempel Kode Ini Di atas kode ]]></b:skin> :

.menu,.menu ul{list-style:none;margin:0;padding:0} .menu{background:#252525;height:35px;width:100%;border-bottom:2px solid #181818;border-top:2px solid #303030} .menu li{background:#252525} .menu > li{display:block;float:left;position:relative;box-shadow:2px 0 0 0 rgba(51,51,51,1)} .menu a{border-left:3px solid rgba(0,0,0,0);color:gray;display:block;font-family:Electrolize,sans-serif;font-size:18px;line-height:35px;text-decoration:none;text-transform:uppercase;padding:0 25px} .menu a:first-letter{color:#0091d6} .menu li:hover{background-color:#1c1c1c} .menu li:hover > a{border-left:3px solid #0091d6;color:#fff} .submenu{left:0;max-height:0;position:absolute;top:100%;z-index:0;perspective:400px;width:200%} .submenu li{opacity:0;transform:rotateY(90deg);transition:opacity .4s, transform .5s;border-bottom:2px solid #181818;border-top:2px solid #303030} .menu .submenu li:hover a{border-left:3px solid #454545;color:#fff} .menu > li:hover .submenu,.menu > li:focus .submenu{max-height:2000px;z-index:10} .menu > li:hover .submenu li,.menu > li:focus .submenu li{opacity:1;transform:none} .menu li:hover .submenu li:nth-child(1){transition-delay:0s} .menu li:hover .submenu li:nth-child(2){transition-delay:50ms} .menu li:hover .submenu li:nth-child(3){transition-delay:100ms} .menu li:hover .submenu li:nth-child(4){transition-delay:150ms} .menu li:hover .submenu li:nth-child(5){transition-delay:200ms} .menu li:hover .submenu li:nth-child(6){transition-delay:250ms} .menu li:hover .submenu li:nth-child(7){transition-delay:300ms} .menu li:hover .submenu li:nth-child(8){transition-delay:350ms} .submenu li:nth-child(1){transition-delay:350ms} .submenu li:nth-child(2){transition-delay:300ms} .submenu li:nth-child(3){transition-delay:250ms} .submenu li:nth-child(4){transition-delay:200ms} .submenu li:nth-child(5){transition-delay:150ms} .submenu li:nth-child(6){transition-delay:100ms} .submenu li:nth-child(7){transition-delay:50ms} .submenu li:nth-child(8){transition-delay:0s} .menu > li:nth-child(1) {border-right:2px solid #111} .menu > li:nth-child(2),.menu > li:nth-child(3),.menu > li:nth-child(4),.menu > li:nth-child(5),.menu > li:nth-child(6),.menu > li:nth-child(7),.menu > li:nth-child(8){border-right:2px solid #111;border-left:2px solid #333}

5 . Dan Cari Kode </header> Atau <div id='main-wrapper'> Atau
     <article id='main-wrapper'>

6 . Lalu Letakan Kode Dibawah ini di atas Kode </header> :
     <nav> <ul class='menu'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='#'>Menu 1</a> <ul class='submenu'> <li><a href='#'>Submenu a</a></li> <li><a href='#'>Submenu b</a></li> <li><a href='#'>Submenu c</a></li> <li><a href='#'>Submenu d</a></li> <li><a href='#'>Submenu e</a></li> <li><a href='#'>Submenu f</a></li> <li><a href='#'>Submenu g</a></li> <li><a href='#'>Submenu h</a></li> </ul> </li> <li class='active'><a href='#'>Menu 2</a> <ul class='submenu'> <li><a href='#'>Submenu a</a></li> <li><a href='#'>Submenu b</a></li> <li><a href='#'>Submenu c</a></li> <li><a href='#'>Submenu d</a></li> <li><a href='#'>Submenu e</a></li> <li><a href='#'>Submenu f</a></li> <li><a href='#'>Submenu g</a></li> <li><a href='#'>Submenu h</a></li> </ul> </li> <li><a href='#'>Menu 3</a> <ul class='submenu'> <li><a href='#'>Submenu a</a></li> <li><a href='#'>Submenu b</a></li> <li><a href='#'>Submenu c</a></li> <li><a href='#'>Submenu d</a></li> <li><a href='#'>Submenu e</a></li> <li><a href='#'>Submenu f</a></li> <li><a href='#'>Submenu g</a></li> <li><a href='#'>Submenu h</a></li> </ul> </li> <li><a href='#'>Menu 4</a></li> <li><a href='#'>Menu 5</a></li> </ul> </nav> 

7 . Simpan Template 

     Demikian tutorial sederhana untuk membuat CSS Animasi Menu Dropdown Blogger. Harapan saya setelah anda mengenal satu per satu elemen kode pada template maka anda bisa berkreasi sendiri untuk membuat tampilan blog seperti keinginan kreasi masing-masing.

Author : Unknown

Setelah anda membaca artikel berjudul Cara Membuat Menu Drop Down Di Blog jika ingin menyalin (copy-paste) artikel ini, sertakan link dibawah ini sebagai sumbernya : <a href="http://blognya-anak-anak-rassgas.blogspot.com/2014/05/cara-membuat-menu-drop-down-di-blog.html" target="_blank">Cara Membuat Menu Drop Down Di Blog</a>

Share Artikel

Facebook

Twitter

Google+

Artikel Terkait