Menu Horizontal V2
09.38 | Sabtu, 12 Mei 2012 Yasir Utomo
Menu Horizontal V2, merupakan menu kedua yang di publish oleh Katakan Hey setelah
Menu Horizontal V1. Fungsi menu sebagaimana telah dijelaskan pada artikel V1 sangat penting untuk sebuah blog sebagai alat navigasi untuk visitor agar lebih mudah dalam menjalajahi blog Anda, dapat menjadi pemisah kategory artikel blog Anda dan banyak keguanan lain.
Berbeda dengan menu horizontal V1, menu kali ini sedikit lebih istimewa dengan tampilan yang lebih menarik dengan didukung kolom
searchpada bagian kanan menu tersebut, bagi Anda yang sudah memiliki kolom serach tinggal memilih kolom search mana yang ingin dipertahankan karna kolom search pada menu ini flexible dan dapat dihapus.
Tertarik? Berikut cara membuat Menu Horizontal V2 :
- Login pada Blogger
- Pilih Template >> Edit HTML >> Lanjutkan
- Cari ]]>
Letakkan kode berikut diatas ]]>
/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA0H9EWFQ9lKn0SZtq8ihjhp5I-xqKZv6wdg2dsJHtjVtaT4qrp3vIUSn7JifntdT73WvSI9GPwHHTV0T5yMHEiiaDWEhz_D06rpJQ5LiEyPNqNEQU4J2IcO5sznlNlvd_COA_mGIQfTA/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/AVvXsEgxu8YeG3ANbvOMsXwfpT6ezi-ApqruF4GMULToFwfLDGMHquQPQU7AM-JKVluQOMuzUKVrgtkVN1FcfF9MAvDeNiBFCh5R5peumdhob3TZD7UtqJw7q5e6GkdyNAkX9KUe9shtlpzz2G8/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 atau
Letakkan kode berikut diatas di atas kode atau di bawah kode
*Keterangan :
- Menu Ganti dengan nama menu Anda
- Dropdown Ganti dengan nama menu dropdown Anda
- tanganblogger.blogspot.com Ganti dengan alamat URL blog / web Anda
Simpan Template
Selamat Mencoba & Happy Blogging
_______Regards_______
Home
Komentar (0)
Posting Komentar