Homemembuat menu dropdown
Membuat Menu Drop Down
1. Masuk ke Blogger.com atau Blogspot.com2.
3.
4.
5.
6. Cari kata ]]></b:skin>. Untuk mempermudah pencarian klik Ctrl+Fdi Keyboard kemudian ketik ]]></b:skin>
7. Copy script berikut tepat diatas tulisan ]]></b:skin>
/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbdFZtClPdavIdUwgYlAwEbJZwXJJQ5Cn_s36bUyL6UpM9Z9ILz1W7f1qHkvnfiiLiN0KtuUBM0otXgDhPLhj6D5Sx_3zhC3CwLlM41avCyctX2GxVnJijSjGx3xyg_tYH-3EzU9FgeK8/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/AVvXsEhDHhZSTaINN4sGAbCQ0ynmcrnw85ezC3OUV-mTR0PVVlHvCtugzWsMlCUZrSgYZ5jXAs4D-EJxMm0dodOKxUpQR9O8gjRMZul4UIl06onMcnMzk0fcgKXEsP1zGDKVKHvCdoAEqU86ocs/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}
8. Kemudian cari kata <header> atau <head>. Atau klik Ctrl+F, dan ketik <header> atau <head>
9. Jika sudah, copy script berikut tepat diatas <header> atau <head>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtfkXYyTjfu3JZg_OG4BquGRmeOBvNwP3fEVj4EMfunt0B1HuqEWj292fP4-iMZ-H3ySa-VL990VQtLInJWtNzmNIXVCJ0UwUIxUdSjZhIt9-JmTLvuh3WOpBdJzOI1N0O_lpRwfSbm2M/s1600/home_white.png'
style='padding:0px;'/> Home</a></li>
<li><a href='#####' target='new'>Profile</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='#####' target='new'>Google +</a></li>
<li class='hr'/>
<li><a href='#####' target='new'>Contact on Twitter</a></li>
<li><a href='#####' target='new'>Contact on Facebook</a></li>
</ul>
</li>
<li><a class='trigger'>Website</a>
<ul>
<li><a href='#####'>Latihan 1</a></li>
<li class='hr'/>
<li><a href='#####'>Latihan 2</a></li>
<li class='hr'/>
<li><a href='#####'>Latihan 3</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Alir Produksi</a>
<ul>
<li><a href='#####'>Latihan 1</a></li>
<li class='hr'/>
<li><a href='#####'>Latihan 2</a></li>
<li class='hr'/>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='#####' method='get' target=''>
<input name='sitesearch' style='display:none;' value='#####'/>
<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/AVvXsEhOQx0cjvFNzqfy1tUSJ5y0np8-zr1grsjrg7hUiVXbGJjM_bapEIMuEl_UveLL8QcAhkktjYQW5JSOFbdautW2dFukLKJuOR_nHCBvJsJauYFvZhKzSM26qeFGJ020_YE1Y9UqgZWeQo0/s1600/field-bg.gif)
no-repeat;' type='text' value='Cari disini ya... '/><input
align='top' id='search-btn'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAKYyHTYfwVvhW7RXdNaDvrkXrDI5_1Iax1I5ZRdHj-QJCcPt5PHZw4YxZVfAnPMAOMh-fvlqBBo_8-ODwXwG6JJif04LC1BAkW_6KUWOlKMD6m2TEYemlU55DkfPjVspVEKrC78cPIPk/s1600/bg_search.gif'
type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
8. Jangan lupa untuk melakukan Pratinjau terlebih dahulu, sebelum Simpan
Template. Fungsi Pratinjau sama dengan fungsi Preview. Jika muncul
kata-kata 'ERROR', tandanya ada yang salah. Periksa kembali apa yang
sudah dikerjakan.
9. Jika dari Pratinjau sudah berhasil, maka akan muncul blog kita dan ada tulisan 'Pratinjau' seperti gambar berikut
10. Barulah kita klik 'Simpan Template'
11. Lalu klik tanda 'X'
12. Kemudian klik 'Lihat Blog'
13. Menu Dropdown mu siap digunakan! :D
Catatan :
##### = ganti dengan link yang dituju
##### = ganti dengan link blog kamu
warna = nama/tulisan/judul yang akan muncul di menu blog kamu
Tidak ada komentar:
Posting Komentar