Tutorial Membuat Menu Horizontal Dropdown + Search engine
Written By Rega's on 29 Desember 2013 | 08.20
INDONESIA
Hallo
para Sobat Blogger. Kali ini saya akan share tentang cara membuat Menu
Horizontal Dropdown pada blog. dan kelebihan pada menu dropdown ini
adalah terdapat search engine di samping menu yg memudah kan para
pengunjung mencari informasi di blog anda
Contoh :
Contoh :
Berikut Tutorialnya :
1.) Seperti biasa, pertama-tama kita harus login ke account Blogger terlebih dahulu
2.) Masuk ke Dashboard, Template
3.) Pilih Edit HTML, lalu ceklis "Expand Template Widget"
4.) Cari kode ]]></b:skin> (tekan ctrl+f untuk mempermudah pencarian)
5.) bila sudah, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRD_a0J4Y1PwfKTMepuTuzqoChEQJFphDh3A05lqJ9M_9DHsac7cFXQgVOtFfsl7U4IZnhdF_XeZ6C4DLNAZZg9zU1xgVWHD3jKpugadAuiav5YZU1E7kKANYJqtCtkY1qRPi0m8aqKzY/s1600/nav.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:30px;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;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRQMLlyAGHZaFz5o8g8qb9nzn-cfIvvB_TE3x2hlRVgP34FvV1c1vjsxBSlsLp1mLMjhHRrOdOIwbuTkzS1BlsQu28x4chuxCcKx7u12xLy5PAd7OSwyg7S5wIWq0oOfwJAvsSsQM8bEo/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:9px 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}
6. Cari kode </head>, kode ters
0 komentar:
Post a Comment