Cara Membuat Menu Drop Down Di bawah atau Di atas Header

Sebelumnya, anda mungkin sudah mengetahui tentang Menu drop down yang ada di blog, akan tetapi sebagian mungkin belum tahu tentang cara membuatnya. Sebenarnya bagi para penggemar blogspot mungkin sudah tidak lagi susah karena sudah menjadi pelajaran sehari-hari.

Menu drop down ini dapat kita letakkan  di atas atau  di bawah nama blog, dengan adanya Menu drop down di blog kita, maka akan memudahkan para pengunjung untuk mengetahui isi blog kita dan juga akan memudahkan dalam mencari artikel yang ada di blog kita.

Untuk anda yang ingin menghiasi blog anda sendiri dengan tampilan Menu Drop Down silahkan anda ikuti beberapa langkah berikut ini:

1.      Terlebih dahulu anda login ke blog.

2.      Kemudian menuju ke Template lalu klik edit html.

3.      Jangan lupa centang "Expand Template Widget".

4.      Setelah itu anda  cari kode ]]></b:skin> kemudian letakkan kode di bawah ini tepat di atasnya ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8PDAoczvSGPgVWu1NNeCSah9o5x0hspVyRFOQgnNcXmmqz2qzgQErkAYweLOJL3odaqRkbMP8A8eq12QIjvaA8zcW3PbkaFPrJw3E8_tmKBhY7hO8SWtM-pkwOcoumEPIWqLSESp6Yyg/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;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:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0eKn9nPM_4_O1HQG5tTU5w0FKDcElmNPkXuKnQwaBU_-9ralD9xyqGgh82UjpXvZvk47znvPhpi1diJDXhv_hyphenhyphen1W-4qbbFHtNuhIq-qaMONe045_rpBE8oL6nvEBbVkmz7-n31J2JHS0/s1600/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}

Kemudian anda cari kode di bawah ini:

-          <header>  : untuk meletakkan menu di atas nama blog.

-          </header> : untuk meletakkam menu di bawah nama blog.

Selanjutnya anda copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>  :

<div id='menuwrapperpic'> <div id='menuwrapper'> <ul id='menubar'> <li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9YBYzYggUa5AoH6tdQDva9gpV5wiOE6ijDFMLlGswkzEsPYI8HubGgZ6KGK5KEvCtc4kAti8vMvj7juMe-FnxKa4GJLfEnElLx7F9PRtegD5ateRY4ALk_xwSbeIAG-12Wn2jZtJB6RE/s1600/home_white.png' style='padding:0px;'/> Beranda</a></li> <li><a href='http://www.blogger.com/profile/04775965841318087177' target='new'>Tentang Admin</a></li> <li><a class='trigger'>Temui Saya</a> <ul> <li><a href=' http://blog-sadid.blogspot.com ' target='new'>Yahoo</a></li> <li class='hr'/> <li><a href=' http://blog-sadid.blogspot.com ' target='new'>Facebook</a></li> <li><a href=' http://blog-sadid.blogspot.com ' target='new'>Gmail</a></li> <li><a href=' http://blog-sadid.blogspot.com ' target='new'>Twitter</a></li> </ul> </li> <li><a href=' http://blog-sadid.blogspot.com ' target='new'>Mengenai Saya </a></li> <li><a class='trigger'>Tutorial</a> <ul> <li><a href=' http://blog-sadid.blogspot.com '>Photoshop</a></li> <li class='hr'/> <li><a href=' http://blog-sadid.blogspot.com '>Blogspot</a></li> <li class='hr'/> <li><a href=' http://blog-sadid.blogspot.com '>Corel Draw</a></li> <li class='hr'/> </ul> </li> <li><a class='trigger'>Download </a> <ul> <li><a href=' http://blog-sadid.blogspot.com '> Download  Audio</a></li> <li class='hr'/> <li><a href='http://blog-sadid.blogspot.com '> Download Themes</a></li> <li class='hr'/> <li><a href=' http://blog-sadid.blogspot.com '> Download E-book</a></li> <li class='hr'/> <li><a href=' http://blog-sadid.blogspot.com '> Download Software</a></li> <li class='hr'/> </ul> </li> </ul> <div class='menusearch'> <div style='float:right;padding:8px 8px 0 0;'> <form action=' http://blog-sadid.blogspot.com /search' method='get' target=''> <input name='sitesearch' style='display:none;' value=' http://blog-sadid.blogspot.com '/> <input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKDVT7PWxx7a_259hj-SVJMgdKfhM8bWdU-3fEDGw4bTK3eiM-TPL_cee3zdtbzn_HQoJtnBlDNgmXUzwgyCmF2DAwB76hpGsoVOPgL7y7dY-exQ22EExSAW90HDcoXOostTaO9o5KIZs/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHh_BaAJQhf4gpnnfuLkfZg2ZBvREVl28SWmQ16BgAkdoGU-7PCvnXLejbFYSisy04J1OTpzD3NQC57ZCtyBWSt7BdF7gkzNlB0c76kr6bfPCQRBimR8x8hJyL4hYSeAneLn_jKWTx3E4/s1600/bg_search.gif' type='image' value='Search'/> </form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Nb:

1.      Untuk tulisan berwarna Biru adalah Url atau Link tujuan, silakan anda ganti dengan Url atau Link blog anda sendiri.

2.      Untuk tulisan berwarna Hijau adalah tulisan yang akan tampil dalam menu Drop Down, Sesuaikanlah dengan isi blog anda.

Sekarang anda selesai membuat Menu Drop Down di bawah Header atau di atas Header, mudah-mudahan anda berhasil.