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

KODE ATAS
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 == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' 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 .




KODE BAWAH
Share this article :
+
Previous
Next Post »
0 Komentar untuk "Cara Membuat Menu Drop Down atau Menu Navigasi Diatas Header Di Blog"

Silahkan Sobat tinggalkan komentar dengan kata - kata yang Baik, Bijak dan Sopan...!!!

Yang tidak diperbolehkan dalam berkomentar :

1. Komentar yang mengandung unsur SARA.
2. Komentar yang berbau Porno.
3. Komentar Saling Caci maki.
4. Komentar yang Memasukan Link Iklan dan Ling Atip.
5. Di Lalarang Mengcopy Paste Pada Artikel Di Sini.

Saya harap Sobat dapat mematuhi aturan berkomentar yang saya buat. Jika ada komentar yang melanggar ketentuan tersebut diatas dan dianggap spam akan Saya Hapus. Atas kerjasama sobat sekalian saya ucapkan banyak Terima Kasih. Salam Sukses selalu untuk Sobat dan Salam Blogger.

Bagi Anda yang Mau di Tayakan ? Anda Bisa Anda Bisa HUB Alamat Facebook Saya (https://www.facebook.com/toturialblogcom)

Terima Kasih Sudah Berkomentar
 
Copyright © 2014 TUTORIAL - All Rights Reserved
Template By. Kunci Dunia
Back To Top