Membuat Drop Down Menu Diatas atau Dibawah Header

Dalam membuat sebuah blog maka secara default kita sudah memiliki menu dengan bentuk horizontal yang letaknya diatas Header yang disebut navbar (Navigasi Bar). Pada navbar default tersebut kita sudah disediakan navbar tinggal memilh saja, namun bagi sebagian para blogger menu tersebut dihilangkan dan di atur ulang sesuai selera sehingga tampilan blog terlihat menarik seperti terlihat pada gambar di bawah ini. Langsung saja saya kasitau langkah-langkah membuatnya.

• Dari dasbor, pilih Rancangan - Edit HTML.
• Lakukan duplikasi template untuk jaga-jaga jika bermasalah.
• Cari kode ]]></b:skin>  (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
• Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>
  

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: #ff0000 repeat-x;width:980px;margin:0 auto;padding:0 auto} #menuwrapper{width:980px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#000000;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://sites.google.com/site/filescriptcollection/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

Selanjutnya cari kode

1. <header> : untuk menu di atas header blog
2. </header>: untuk menu di bawah header blog

<div id='menuwrapperpic'> <div id='menuwrapper'> <ul id='menubar'> <li><a href='http://billok-corp.blogspot.com/' target=''>Home </a></li> <li><a class='trigger'>Tutorial Blog</a> <ul> <li class='hr'/> <li><a href='nama-alamat-blog.html' target='new'>Sub Menu Tutorial Blog 1</a></li> <li class='hr'/> <li><a href='nama-alamat-blog.html' target='new'>Sub Menu Tutorial Blog 2</a></li> <li class='hr'/> <li><a href='nama-alamat-blog.html' target='new'>Sub Menu Tutorial Blog 3</a></li> </ul> </li> <li><a class='trigger'>Software</a> <ul> <li class='hr'/> <li><a href='nama-alamat-blog.html' target='new'>Sub Menu Software 1</a></li> <li class='hr'/> <li><a href='nama-alamat-blog.html' target='new'>Sub Menu Software 2</a></li> <li class='hr'/> <li><a href='nama-alamat-blog.html' target='new'>Sub Menu Software 3</a></li> </ul> </li> <li><a class='trigger'>Menu 3</a> <ul> <li class='hr'/> <li><a href='nama-alamat-blog.html' target='new'>Sub Menu 3</a></li> <li class='hr'/> <li><a href='nama-alamat-blog.html' target='new'>Sub Menu 3</a></li> <li class='hr'/> <li><a href='nama-alamat-blog.html' target='new'>Sub Menu 3</a></li> </ul> </li> </ul> <div class='menusearch'> <div style='float:right;padding:8px 8px 0 0;'> <form action='http://ketutjoel.blogspot.com/search' method='get' target=''> <input name='sitesearch' style='display:none;' value='http://ketutjoel.blogspot.com'/> <input id="search-box" name="q" size="25" type="text" style="background: #EEEDED; border: 1px solid #000000 "/> <input id="search-btn" value="Search" type="submit"/> </form> </div> </div> <br class='clearit'/></div> <div style='clear:both;'/> </div>

Demikianlah postingan saya kali ini tentang cara membuat menu dropdown diatas header atau dibawah header, semoga bermanfaat

"Terima kasih sudah membaca artikel Tutorial : Membuat Drop Down Menu Diatas atau Dibawah Header. Anda bisa bookmark halaman ini dengan URL https://henry-dunanz.blogspot.com/2013/12/membuat-drop-down-menu-diatas-atau.html. Jangan lupa klik salah satu tombol dibawah ini."