Menu Navigasi Dropdown Floating adalah menu navigasi yang melayang yang akan tetap muncul pada bagian atas blog saat pengunjung melakukan scroll kebawah, selain itu menu ini juga sudah saya modifikasi sedemikan rupa dengan menggabungkan sebuah menu navigasi dropdown dan menu search sehingga akan tampak lebih menarik untuk anda pasang pada blog anda.
Cara Menginstall Menu Navigasi Melayang Kedalam Blogger
Untuk meletakkan kode CSS di bawah ini, terlebih dahulu login ke akun Blogger yang anda miliki kemudian lakukan pengeditan pada Template » Edit HTMLkemudian Copy CSS di bawah ini dan letakkan tepat di atas tag ]]></b:skin>
#lscnav{width:100%;min-
width:960px;position:fixed;top:0;left:0;right:0;height:30px;font-size:13px;z-index:99;background-color:#1E6510;border-bottom:1px solid #000}
#lscwrapper{width:980px;height:30px;margin:0 auto;}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#lscmenunav{width:960px}
#lscmenunav,#lscmenunav ul{list-style:none;font-family:Arial, serif;margin:0;padding:0;}
#lscmenunav a{display:block;text-decoration:none;font-size:11px;font-weight:700;text-transform:uppercase;color:#fff;padding:8px 8px 8px;border-left:0px solid #000;text-shadow:0 1px 1px #000;}
#lscmenunav a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc0TFvKlfGIHCsu64oUyPw3JB06OUvl2tanXcZdrwvQiYC84rMDtdDxbv7YMKdQEHl-82qYdFzhr9Yg7zWFq38FGLLtkJLG1a3prmtSuYbNOBD-3M9EPr11yiuQR5Gf_N-7KZBJwbwuYc/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:8px 24px 8px 8px}
#lscmenunav li{float:left;position:static;width:auto}
#lscmenunav li ul,#menubar ul li{width:150px}
#lscmenunav 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}
#lscmenunav li ul{z-index:50;position:absolute;display:none;background:#26231c;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#lscmenunav li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#000;color:#fff;-webkit-transition: background-color .555s;-moz-transition: background-color .555s;-o-transition: background-color .555s;-ms-transition: background-color .555s;}
#lscmenunav li:hover ul,#menubar li.hvr ul{display:block}
#lscmenunav li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#lscmenunav li ul li.hr{border-bottom:1px solid #433e31;border-top:1px solid #11100d;display:block;font-size:1px;height:0;line-height:0;}
#lscmenunav ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#menu-right{float:right;display:inline;width:160px;padding-top:5px;margin-right:5px}
#topsearch1 #feed-1{margin-top:0;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#333}
#topsearch1 #feed-s{width:126px}
#search{height:18px;width:150px;background:#aeaeae;padding:0}
#search input{border:0;background:none;color:#575757}
#s{font-size:12px;width:120px;padding-left:4px;background:none;margin:0}
#topsearch #search{margin-top:0;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#fff;border:1px solid #999}
#topsearch #s{width:125px}
Jangan simpan template dulu, namun lanjutkan dengan memasukkan kode HTML-nya juga ke dalam template. Oh ya mungkin anda bertanya, mengapa saya membagi dan memberi warna berbeda pada kode CSS di atas. Sebentar saya jelaskan.
HTML
Copy kode HTML di bawah ini tepat di bawah tag <body>
<div id='lscnav'>Keterangan :
<div id='lscwrapper'>
<ul id='lscmenunav'>
<li class='home'><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='trigger' href='#'>Drop menu 1</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
<li><a href='#'>Sub menu 3</a></li>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Drop menu 2</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
<li><a href='#'>Sub menu 3</a></li>
<li><a href='#'>Sub menu 4</a></li>
<li><a href='#'>Sub menu 5</a></li>
<li><a href='#>Sub menu 6</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
</ul>
<div style='float:right'>
<div id='menu-right'>
<div id='topsearch'>
<div id='search'>
<form action='/search' id='searchform' method='get' name='searchform'><input class='keyword' id='s' name='q' onblur='if (this.value == "") {this.value = "Search..";}' onfocus='if (this.value == "Search..") {this.value = ""}' type='text' value='Search..'/><input alt='search' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwmwE5iGmNRaoKO-WJFTGL9R1j_kHMjiEnAFV7iz_fCHgd1tAi21s3j3DD1XHk6kb_u4XPU-7TvasJMb2YBO6nm0js7MHRITBkXzPyE5t0r-Z5N3UDm5NyA6oTyQNZpuJ08ZagAaJhEg/s1600/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' title='Search' type='image'/></form>
</div>
</div>
</div>
</div>
<br class='clearit'/>
</div>
</div>
Ganti tanda # dengan link blog anda dan Menu 1, Sub Menu dst sesuai dengan kata-kata anda sendiri dan jika sudah selesai, silahkan klik pratinjau atau simpan untuk melihat hasilnya
Penjelasan Singkat
CSS dan HTML yang saya beri tanda dengan warna Biru adalah CSS dan HTML untuk Menu Search (Pencarian), jika anda tidak ingin memakai/memasangnya pada blog anda, silahkan anda hapus kode tersebut.
Butuh Bantuan ?
Jika anda kesulitan dalam memasang Menu Navigasi Melayang tersebut di atas, silahkan meninggalkan komentar. Sebelum dan sesudahnya saya ucapkan terima kasih. Salam Blogger...!!!
Ditulis oleh : Dena Setya Utama
Terima kasih atas kunjungan nya di Blog Sederhana Ini. Silakan komentar jika Ingin Follback kawan. Jika ada kritik dan saran yang bersifat membangun dan mensuport Blog ini, silakan kirim ke E-mail, Facebook, Twitter, dan komentar.
Get Free Email Updates to your Inbox!
:a
:b
:c
:d
:e
:f
:g
:h
:i
:j
:k
:l
:m
:n
:o
:p
:q
:r
:s
:t
+ komentar + 5 komentar
Thanks gan
salken: killersblog-19.blogspot.com :n
Terimakasih bnyak gan... awalnya bingung cari kemana2... dan coba2 blm bisa..
akhirnya di temuin di sini...
izin pake y gan..dan jngan lpa knjungannya balik..
http://jamantasr9.blogspot.com/
:s
Posting Komentar