Cara membuat menu drop down di atas dan dibawah header blog

Salam sahabat blogger. Semoga kita selalu senantiasa diberikan perlindungan oleh Allah Swt. Kali ini saya akan membahas bagaimana cara membuat menu drop down di blog sahabat semua. Daripada saya lupa dikemudian hari, mendingan saya posting saja ke blog ini. Tidak ada salahnya bukan membagikan ilmu yang telah saya pelajari dari orang lain kepada sahabat semua. Semoga menjadi berkah buat semuanya. Amiin..

Dengan menggunakan menu drop down di atas maupun dibawah header, tentunya akan membuat tampilan blog sahabat semua akan menjadi lebih menarik dan bagus. Sehingga para pengunjung akan lebih mudah mencari informasi yang dibutuhkan dari blog kita.

Oke,, tidak usah berbicara panjang lebar, mari sahabat ikuti langkah-langkah dibawah ini.

1.Seperti biasanya sahabat LOGIN dulu di akun blog sahabat.

2.Kemudian sahabat pilih Template dan klik edit HTML.

3.Centang Expand Template widget untuk menghindari apabila ada kesalahan.

4. Sahabat cari kode ]]></b:skin> dengan cara klik (Ctrl + F) dan letakan kode berikut di atas kode ]]></b:skin>

Klik disini

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOYfm3tp2E3d4Rs_YIxB09OvEdEKhRCSg8n8ML_2tsIu_vdMQwE7Mb-vb4I_CBcnl1og1g4gsjfvjAZTzYcZYJHMbuFp-rxRJ5dAlZ999tlZTsygE_BeTmnlsHc33VU2N5cEvoTqhpz3U/s1900/menubar.png) repeat-x;width:900px;margin:0 auto;padding:0 auto} #menuwrapper{width:900px;height:35px;margin:0 auto} .menusearch{width:200px;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/AVvXsEgkkICUaPuAREBJ8tZ_qj88GJPjnyN1j3BJvz0L4vrHxEtzUWuK3jxyJ41iJa2Kl_3tl4zi_floPuOIfCmSSQeLgYzPGGNx9nS8AWRfj7dwQNOJVyhMpEbKJDGi4ggVYOak5YDXWFau0wo/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:#5959af} #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} ]]>

5. Selanjutnya sahabat cari kode  <header> (Jika sahabat menginginkan menunya berada diatas header/ judul blog sahabat) dan </header> (Jika sahabat menginginkan menunya berada dibawah header/ judul blog sahabat).

6. Copy kode dibawah ini kemudian letakan diatas kode <header> atau  </header>

Keterangan:

Klik disini

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://ugyberbagi.blogspot.com' target='new'>Beranda</a></li>
<li><a href='http://ugyberbagi.blogspot.com/search/label/otomotif' target='new'>Otomotif</a></li>
<li><a href='http://ugyberbagi.blogspot.com/search/label/Komputer' target='new'>Komputer</a></li>
<li><a href='http://ugyberbagi.blogspot.com/search/label/Blackberry' target='new'>Blackberry</a></li>
<li><a class='trigger'>Internet</a>
<ul>
<li><a href='http://ugyberbagi.blogspot.com/search/label/Blogging' target='new'>Blogging</a></li>
</ul>
</li>
<li><a class='trigger'>Just Info</a>
<ul>
<li><a href='http://ugyberbagi.blogspot.com/search/label/Kesehatan' target='new'>Kesehatan</a></li>
<li><a href='http://ugyberbagi.blogspot.com/search/label/Ilmu Pengetahuan' target='new'>Ilmu Pengetahuan</a></li>
</ul>
</li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='http://twitter.com/den_zuaz' target='new'>My Twitter</a></li>
<li><a href='http://www.facebook.com/zuazTama' target='new'>My Facebook</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:7px 7px 0 0;'>
<form action='http://Ugyberbagi.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://Ugyberbagi.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:100px;border:none;padding:4px 7px; font:italic 13px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsTPzjmkRACR0aLnEAYUSR2ugFOZCOhqcgMOssGWTbJ7UcglqbOF8zCq9CeekXsehQ7XbVqRgMC0xYbne01O2oICPh6qYLfs_R3ZXqvYNMqPqOon3PK65SsGBSw_Jf5Eczp3MGUnrpwzQ/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/AVvXsEgAyht3-3PN5xhyphenhyphenPxC0Dg-jj-wzQkHgb2NOo5ZpCrkLL8Jyks0vuY7plyqrfrG-Vxuw3w0n5Z33Npuk5uxVXlKMTx03FxSgwT1LU2uRh4Y3HFCdQskouF-BSmCZl7N1H4j5LUHnM8NrSgc/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan:

1. Kode berwarna kuning adalah URL tujuan, jadi sahabat silahkan ganti URL tersebut dengan URL tujuan sahabat.
2. Kode warna hijau adalah kalimat yang akan tampil di menu drop down, jadi silahkan sahabat sesuaikan sendiri ya.

Nah seperti ini sahabat tampilan hasilnya..

Demikian cara membuat menu drop down di blog sahabat blogger. Silahkan komentar jika ada pertanyaan. Semoga bermanfaat buat sahabat blogger semua... Terimakasih.