Cara membuat menu horizontal Fixed

blogger templates
Menu Horizontal yang mengikuti saat di gulir (fixed) memang dibutuhkan untuk memudahkan orang yang mengunjungi blog kita, jadi kita harus mempunyainya..
Menu Horizontal ini bisa untuk menempatkan link ke Sitemap, Laman anda, dan pencarian

Hasil Menu Horizontal bisa anda lihat dibawah ini


Tertarik?? Langsung saja
Blogger - Edit HTML

Cari ]]></b:skin> dan taruh kode dibawah ini di atasnya

.page-menu{background:#222;width:100%;z-index:299;margin:0 auto;padding:0;position:fixed;left:0;top:0}
.page-menu ul{list-style:none;color:#ddd;z-index:999;width:910px;margin:0 auto;padding:0}
.page-menu ul li{list-style:none;line-height:34px;display:inline-block}
.page-menu li a{transition:all .99s ease;background:transparent;color:#ddd;display:block;font-size:13px;font-family:Arial,Helvetica,Tahoma,sans-serif;position:relative;text-decoration:none;text-transform:capitalize;padding:0 10px}
.page-menu li a:hover,.page-menu .selected{box-shadow: 100px 0px 0 #59c3e2 inset;
transition:all .99s ease}
.menusearch{width:200px;float:right;margin:0 auto;padding:4px 0 0}
.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:200px;height:23px; overflow:hidden;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #000;}
.searchform input {font:italic 12px Arial;color:#222;line-height:23px;height:23px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 160px;height:23px;border:0px;outline: none;line-height:23px;}
.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}

Simpan, sekarang ke tata letak dan taruh kode dibawah ini :


<div class="page-menu"><ul>
<li><a href="http://rishad-harisdias.blogspot.com/">Home</a></li>
<li><a href="http://rishad-harisdias.blogspot.com/p/disclaimer.html">Disclaimer</a></li>
<li><a href="http://rishad-harisdias.blogspot.com/p/privacy-policy.html">Privacy Policy</a></li>
<div class="menusearch">
<form action="http://rishad-harisdias.blogspot.com/search" class="searchform" method="get">
<input class="searchfield" id="q" name="q" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;" type="text" value="Search here....">
<input class="searchbutton" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRBaV4GcOfbMINue5fihGIACEpGFBnfHybE4B9Vjkm7a9OMmK0cf8O5Ji-c3NJJkdVHvSY-dh0Y5nTo0otJiX7KmySYAwXGWMuskzDLhojwP8b6xuHxwSacxwrxplGFKwqDV4uus5CadHe/s1600/tombolcari.gif" style="cursor:pointer;vertical-align:top" type="image" value="Go">
</form>
</div>
</ul></div>

Simpan dan sekarang lihat hasilnya...
:)

Sumber : http://rishad-harisdias.blogspot.com/2014/05/cara-membuat-menu-horizontal-fixed.html

0 Response to "Cara membuat menu horizontal Fixed"

Posting Komentar

Silahkan Berkomentar
-) Dilarang menggunakan link aktif kecuali penting
-) Dilarang menggunakan kata sara, porno
-) Sopan =)