Cara Membuat Menu Drop Down atau Menu Navigasi Diatas Header Di Blog

Okeh kali saya akan membahas tentang membuat cara menu drop down atau menu navigasi diatas header di blog,tentang menu navigasi emang sangat cocok buat blog,webisite.wordpress,dll ,maka dari agar anda bisa pasang blog anda ,segara supaya blog anda keliyatan agar lebih cantik dan seperti blog mobile friendly,kaya menu di atas blog saya ,bisa anda lihat tampilan nya lebih cantik dan eleggan kita langsung aja saya akan siamak cara membuat menu drop down atau menu navigasi diatas header di blog,kalau anda tidak cocok denagan warna template anda,anda bisa edit warna seperti kode #141414 itu adalah kode warna ,agar bisa sesuwai blog template selanjutnya agar lebih jelas Cara Membuat Menu Drop Down atau Menu Navigasi Diatas Header Di Blog di bawah ini .

1- Login blog anda www.blogger.com

2. Pada dashbord kemudian klik template edit HTML Lanjutkan

3- Beri tanda centang pada Expand widget template

4- Cari kode berikut ]]></b:skin>

5- Setelah ketemu letakan kode dibawah ini diatasnya

#NavbarMenu{background:#141414; width:1005px; height:37px; color:#00ffff; margin:0 auto; padding:0 7px; font:bold 10px Arial, Tahoma, Verdana; border-top:2px solid #000; border-bottom:1px solid #00ffff;} #NavbarMenuleft{width:700px; float:left; margin:0; padding:0;} #search{width:280px; font-size:13px; float:right; margin:0; padding:0;} #nav{margin:0; padding:0;} #nav ul{float:left; list-style:none; margin:0; padding:0;} #nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;} #nav li a, #nav li a:link, #nav li a:visited{color:#00ffff; display:block; text-transform:uppercase; margin:0; padding:12px 17px 12px; font:bold 11px Arial, Times New Roman;} #nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:11px 16px 11px; text-decoration:none;} #nav li li a, #nav li li a:link, #nav li li a:visited{background:#191919; width:150px; color:#00ffff; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #000; border-left:px solid #000; border-right:2px solid #00ffff; font:normal 14px Georgia, Times New Roman;} #nav li li a:hover, #nav li li a:active{background:#00ffff; color:#fff; padding:3px 10px;} #nav li{float:left; padding:0;} #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;} #nav li ul a{width:140px;} #nav li ul ul{margin:-24px 0 0 170px;} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;} #nav li:hover, #nav li.sfhover{position:static;} #searchbox{padding:0; margin:0;} #search input{background:#00ffff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #ffffff; font:normal 11px arial, verdana, Times New Roman;} #search .btn{background:#333; color:#00ffff; font-size:12px; margin:5px 0 0 10px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #00ffff; border-top:1px solid #00ffff; border-right:2px solid #ccc; border-bottom:2px solid #ccc;} #top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;} #top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;} #top a:hover{color:#cc0000; text-decoration: underline;} #top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;} .topleft {width: 304px; float: left; margin: 0; padding:0;} .topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;} .topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}

6- Sekarang cari kode <body> atau <body
7- Kemudian letakan kode dibawah ini dibawahnya tempatnya <body> atau <body

<div id='outer'> <div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a href='http://toturialblogcom.blogspot.co.id/'>Home</a></li> <li><a href='#'>Software</a> <ul> <li><a href='http://toturialblogcom.blogspot.co.id/'>Antivirus</a></li> <li><a href='http://toturialblogcom.blogspot.co.id/'>Audio</a></li> <li><a href='http://toturialblogcom.blogspot.co.id/'>Video</a></li> </ul></li> <li><a href='#'>A</a> <ul> <li><a href='http://toturialblogcom.blogspot.co.id/'>A1</a></li> <li><a href='http://toturialblogcom.blogspot.co.id/'>A2</a></li> <li><a href='http://toturialblogcom.blogspot.co.id/'>A3</a></li> </ul></li> <li><a href='#'>B</a> <ul> <li><a href='http://toturialblogcom.blogspot.co.id/'>B1</a></li> <li><a href='http://www.madiuncool.blogspot.com'>B2</a></li> <li><a href='http://toturialblogcom.blogspot.co.id/'>B3</a></li> </ul></li> <li><a href='#'>C</a> <ul> <li><a href='http://toturialblogcom.blogspot.co.id/'>C1</a></li> <li><a href='http://toturialblogcom.blogspot.co.id/'>C2</a></li> <li><a href='http://toturialblogcom.blogspot.co.id/'>C3</a></li> </ul></li> <li><a href='http://toturialblogcom.blogspot.co.id//'>About Us</a></li> <li><a href='http://www.madiuncool.blogspot.com/'>Contact</a></li> <li><a href='http://http://toturialblogcom.blogspot.co.id//'>DAFTAR ISI</a></li> <li><a href='http://blogger.com'>Login</a></li> </ul> </div> <div id='search'> <form action='/search/' id='searchform' method='get' style='display:inline;'> <input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/> <input class='btn' type='submit' value='Go'/> </form> </div></div> </div>

8- Kemudian lalu seve dan lihat hasil apakah bisa apakah anda berahasil Cara Membuat Menu Drop Down atau Menu Navigasi Diatas Header Di Blog bila anda belum berasil anda bisa, berkomtar di bawah ini ,jangan sunkan sunkan .semoga saya bisa membantu anda,Cara Membuat Menu Drop Down atau Menu Navigasi Diatas Header Di Blog .di blog anda ,karna temaplete blog itu tidak semunya sama, maka bila dari itu anda belum bersil dalam memasang Cara Membuat Menu Drop Down atau Menu Navigasi Diatas Header Di Blog .