Blogger Header ( Üst ) Menü ( Kayan )

 Blogger kayan üst menü eklentisi

Blogger bloglarınızı siteleriniz  eklentilerle   iyi bir görünüm ve kaliteli şekile büründürmek için yeni bir eklenti ile karşınızdayız blogger  header üst menü kayan şekilde  hemen eklentiyi nasıl ekleyeceğimize geçelim.

HTML Kodu

<div id="headerozi-wrapper"> <div id="headerozi"> <div id="headerozi-logo"> <a href="/" target="_self"><img alt="Ozicab.com" body="" border="0" height="40" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.7;this.filters.alpha.opacity=0" src="http://ozicab.com/dosyalar/ozicabcom-logo3.png" style="opacity: 1;"></a> </div> <ul class="header-menu"> <li><a href="/">Ana Sayfa</a></li> <li><a href="http://forum.ozicab.com/">Forum</a></li> <li><a href="http://www.resim.ozicab.com/">Resim Yükle</a></li> <li><a href="http://upload.ozicab.com">Dosya Yükle</a></li> <li><a href="http://ozicab.com/reklam-ver/">Reklam</a></li> <li><a href="http://ozicab.com/sitene-ekle/">Sitene Ekle</a></li> </ul> <div id="headerozi-ara"> <form action="http://www.google.com/search" method="get" target="_blank"> <input name="sitesearch" style="display:none;" value="http://ozicab.com"> <input id="search-box" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width:250px;border:none;padding:5px 5px; margin-right:5px; font: 12px Arial;color:#b5b5b5; background:#fff;border:1px solid #ddd;border-radius:3px;height:15px;margin-bottom:8px;" type="text" value="Ozicab.com da Arama.." x-webkit-speech="x-webkit-speech"> </form> </div> </div> </div>

 CSS Kodu 

#headerozi-wrapper{ position:fixed; top:0; right:0; left:0; z-index:1; border-top:2px solid #1a74b0; background: rgb(249, 249, 249) url(images/header-menu-bg-ozicab.png) repeat-x; height:45px; width:%100; -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .25); -moz-box-shadow: 0 2px 3px rgba(0,0,0,.25); box-shadow: 0 2px 3px rgba(0, 0, 0, .25); } #headerozi{ width:1010px; margin-left:auto; margin-right:auto; } #headerozi-ara{ float:right; margin-right:5px; padding-top: 9px; } #headerozi-logo{ float:left; margin-right:5px; padding-top:2px; } .header-menu{position: relative;width: 550px;float: left;margin-top:0px;} .header-menu li { float: left; margin-right: 1px; display: block; border-right: 1px solid #ededed; } .header-menu li a { display: block; text-align: center; height: 30px; min-width: 50px; padding: 10px 10px 5px 10px; font-weight: bold; line-height: 22px; font-size: 13px; color: gray; } .header-menu li.active a { color: #1a74b0; font-weight: bold; background-color: #fafafa; } .header-menu li a:hover { color: #fff; font-weight: bold;