Membuat Menu Dropdown
Cara Membuat
Menu Drop Down Di Atas Header Atau Di Bawah Header:
1. Login akun blog
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>
Masukan kode ini :
/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKPmzRc7TnYHXXuNH-56mecPJBUx0UYNcAcrAfTgjlmJaIX7ZfSUheaVvL3zxAdnhateD-NMsBGU0VbsWDwKi6a4v3G61M06dCZvYOBlYEY8cJZH6R4Aha61N3HGSmKFB13uvPn1seIMw/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/AVvXsEhccXHwr4nX-rXZD6mNDfeA_WZxvGtgnJu9px9s2ZjiPXgLDeqIc3GTe71xtRGt7AI0lCEzdt_7YLAb5MhRxoak5saYTrl8xUS4YaP1tpo8OBufCB6h1leQGMUfQEBTLIgdgkEl-kUHKnY/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}
Selanjutnya cari kode berikut:
1. Login akun blog
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>
Masukan kode ini :
/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKPmzRc7TnYHXXuNH-56mecPJBUx0UYNcAcrAfTgjlmJaIX7ZfSUheaVvL3zxAdnhateD-NMsBGU0VbsWDwKi6a4v3G61M06dCZvYOBlYEY8cJZH6R4Aha61N3HGSmKFB13uvPn1seIMw/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/AVvXsEhccXHwr4nX-rXZD6mNDfeA_WZxvGtgnJu9px9s2ZjiPXgLDeqIc3GTe71xtRGt7AI0lCEzdt_7YLAb5MhRxoak5saYTrl8xUS4YaP1tpo8OBufCB6h1leQGMUfQEBTLIgdgkEl-kUHKnY/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}
Selanjutnya cari kode berikut:
- <header> : untuk menempatkan menu di atas nama blog
- </header> : untuk menempatkan menu di bawah nama blog
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='http://www.archivostraderforex.com.ar/img/other/home2_16.png'
style='padding:0px;'/> Home</a></li>
<li><a
class='trigger'>ACCOUNT</a>
<ul>
<li><a
href='https://twitter.com/#!/senoadjie_'
target='new'>Twitter</a></li>
<li
class='hr'/>
<li><a
href='http://www.facebook.com/seno.zeebon' target='new'>Facebook</a></li>
<li
class='hr'/>
<li><a
href='http://www.blogger.com/profile/15310648446188634665'
target='new'>About Me</a></li>
<li
class='hr'/>
</ul>
</li>
<li><a
class='trigger'>TULISAN</a>
<ul>
/>
<li><a
href='http://zeebon.blogspot.com/2011/12/sistem-informasi.html'>Pengantar
Sistem Informasi</a></li>
<li><a
href='http://zeebon.blogspot.com/2012/01/manajemen-umum-softkill-ringkasan-dari.html'>Ringkasan Buku Nature Based Management BAB 1</a></li>
<li
class='hr'/>
<li><a
href='http://zeebon.blogspot.com/2012/01/nature-based-management-bab-ii.html'>Nature Based Management BAB 2 </a></li>
<li
class='hr'/>
<li><a
href='http://zeebon.blogspot.com/2012/03/peran-penting-manajemen-dalam-kehidupan.html'>Peran Penting Manajemen Dalam Kehidupan </a></li>
<li
class='hr'/>
<li><a
href=' http://zeebon.blogspot.com/2012/03/800x600-normal-0-false-false-false-in-x.html'>Peran Penting Manajemen Dalam Organisasi
</a></li>
<li
class='hr'/>
<li><a
href='http://zeebon.blogspot.com/2012/04/struktur-organisasi.html'>Struktur
Organisasi
</a></li>
<li><a
href='http://zeebon.blogspot.com/2012/05/normal-0-false-false-false-en-us-x-none.html'>Manajemen Konflik </a></li>
<li
class='hr'/>
<li><a
href='http://zeebon.blogspot.com/2012/05/motivasi-dalam-pekerjaan.html'>Manajemen Motivasi Dalam Pekerjaan </a>
</li>
</ul>
</li>
<li><a
class='trigger'>SOAL-SOAL</a>
<ul>
<li><a
href='http://zeebon.blogspot.com/2012/01/soal-nature-based-management-1.html'>Soal Nature Based Management 1 </a></li>
<li
class='hr'/>
<li><a
href='http://zeebon.blogspot.com/2012/01/soal-nature-based-management-2.html'>Soal Nature Based Management 2 </a></li>
<li
class='hr'/>
<li><a
href='http://zeebon.blogspot.com/2012/01/soal-nature-based-management-3.html'>Soal Nature Based Management 3 </a></li>
<li
class='hr'/>
<li><a
href='http://zeebon.blogspot.com/2012/01/soal-nature-based-management-4.html'>Soal Nature Based Management 4 </a></li>
<li
class='hr'/>
<li><a
href='http://zeebon.blogspot.com/2012/01/soal-nature-based-management-5.html'>Soal Nature Based Management 5 </a></li>
<li
class='hr'/>
</ul>
</li>
<li><a
class='trigger'>INTERNET DASAR</a>
<ul>
<li><a
href='http://purelittlesprinkles.blogspot.com/p/chat-box.html'>Chat
Box </a></li>
<li
class='hr'/>
<li><a
href='http://purelittlesprinkles.blogspot.com/p/menu-drop-down.html'>Menu
Drop Down </a></li>
<li
class='hr'/>
<li><a
href='http://purelittlesprinkles.blogspot.com/p/s-e-o.html'>S
E O </a></li>
<li><a href='http://zeebon.blogspot.com/2012/05/normal-0-false-false-false-en-us-x-none_9968.html'>Pesan dan Kesan </a></li>
<li><a href='http://zeebon.blogspot.com/2012/05/normal-0-false-false-false-en-us-x-none_9968.html'>Pesan dan Kesan </a></li>
<li
class='hr'/>
</ul>
</li>
</ul><div
class='menusearch'>
<div
style='float:right;padding:8px 8px 0 0;'>
<form
action='http://zeebon.blogspot.com/search' method='get' target=''>
<input
name='sitesearch' style='display:none;' value='http://zeebon.blogspot.com'/>
<input
id='search-box' name='q'
onblur='if(this.value=='')this.value=this.defaultValue;'
onfocus='if(this.value==this.defaultValue)this.value='';'
style='width:170px;border:none;padding:4px 10px; font:italic 12px
Georgia;color:#666;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirMtospomDoi3W9Qke6d62ctVM0QBDfjj83k_yPO3pKb8sVoXoBZGuY1RCLyNDr-5u26oiOtCCDSk_EZ34MxyqGcdPN1pkjgS-7rIAzmw-O5VzB9UiKiOsf-XdLBl1tmQhnKuo9wgHGMQ/s1600/field-bg.gif)
no-repeat;' type='text' value='Cari yang anda inginkan..'/><input align='top'
id='search-btn'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVeOtONqtT7cDsbuKv-uc5pSWw5wTnELGayTW-OUKu_K7dRBAARgOXgEU4I8P3yGruo6F676skwnQ-A4qNK0sgnYXZpqsJGiqUcBzFFtOrp0UI3wwmNqzeZMqwt_8-hBmIr0vJuNKVQII/s1600/bg_search.gif'
type='image' value='Search'/>
</form></div></div></div></div>
Keterangan:
- Kode berwarna biru adalah Url tujuan, silahkan ganti dengan Url pada blog anda.
- Kode berwarna merah adalah kalimat yang tampil pada menu dropdown, Silakan anda sesuaikan.
Tidak ada komentar:
Posting Komentar