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 HTML kemudian 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/AVvXsEjfOBVKh2CnvpDMF-rJE9BC0AFq3z-SDnzUF3quAhjyAVHvM5f33zM66WVVH5xu7-7zk-Ck2wlkYdH-1-xClPgxgEni6TWxaM2c0x68o12XH__KHxGdOFMmcpWN4RZK3K3CiO9gMm_RIRA/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/AVvXsEjqjh_y92l8dCSoCADMChtYVMUEF8UVyqPBLQNDK6Ja7q6VF3Zkr47WNFLLxp0o5NvhQbIwbonoRfej5J-EGRJZ-TGzxcdH_-0N1UkqhSguGYqGeaTlgDylOJtVa2v16r3YOcyXvkkQPkc/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.
mantep gan. ane udah berhasil nyoba. :D
ReplyDeletethanks for sharing. :)
best regards: http://androidapkindonesia.blogspot.com
info yang sangat bermanfaat buat newbie seperti saya....
ReplyDeleteterima kasih gan
tanda '#' d ganti dgn link blog..mksudnyaa??
ReplyDeleteIya mbak ! Hehehe
Deletekalau sudah ada menunya gan lalu maudi buat floating caranya bagaimana ?
ReplyDeletethank sob atas infox udh diterapkan diblog sy
ReplyDeletehttp://anchyumm123.blogspot.com
makasih mas infonya
ReplyDelete