Contoh gambar
Untuk mengaturnya kembali atau membuat menu sendiri diperlukan beberapa kode CSS dan langkah-langkah dibawah ini :
- Sign in di blogger
- Klik Opsi lainnya
- Klik Templete
- klik Edit HTML
- Centang tulisan Expand Widget Templates
- Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
- Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>
- Kemudian cari kode
- <header> : untuk menu di atas header blog
- </header>: untuk menu di bawah header blog
- Copy dan pastekan kode dibawah ini dan letakkan diatas kode <header> dan atau </header> untuk menu dibawah header
- Kode berwarna merah adalah Warna background, lebar Menu utama , lebar menu dan lebar Menu Search (sesuaikan dengan lebar blognya kawan)
- Kode berwarna merah adalah Url tujuan, ganti dengan Url pada blognya kawan
- Kode berwarna kuning adalah judul menu bar ganti dengan judul nya kawan
- Kode berwarna biru adalah sub judul dropdown ganti dengan judul nya kawan
- Kode berwarna hijau adalah alamat pencarian ganti dengan alamat blognya kawan
/* 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipzrG_lFPC4O5pNAZ8lX5iT2IRayRfnuk56v1Grxa2XWmnCyTlrAXhcWnIt826jTPZGWkyfTp98DtKwBsVy9KfbkG6MobYKx9a0m_abt8Bcg7TZTxnFExS9kbM_6em18SlhQvNcukzYcQ/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}
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='nama-alamat-blog.html'
target='new'>Home </a></li>
<li><a href='nama-alamat-blog.html'
target='new'>Menu 1</a></li>
<li><a href='nama-alamat-blog.html'
target='new'>Menu 2</a></li>
<li><a class='trigger'>Menu 3</a>
<ul>
<li class='hr'/>
<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>
<li><a class='trigger'>Menu 4</a>
<ul>
<li class='hr'/>
<li class='hr'/>
<li><a href='nama-alamat-blog.html' target='new'>Sub Menu 4</a></li>
<li class='hr'/>
<li><a href='nama-alamat-blog.html' target='new'>Sub Menu 4</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>
Keterangan
Demikianlah postingan saya kali ini tentang cara membuat menu dropdown diatas header atau dibawah header, semoga bermanfaat.