Blogger Gelişmiş Üst Menü (Sadece SokakBlogcusunda)

Merhaba Arkadaşlar Bugun Yazımda Üst Menü Eklentisi Anlatacagım. Video Bir Şekilde. Anlamadın Bir Yerde Sora Bilirisniz.

Tasarım > Sayfa Ögeleri > HTML’yi Düzenle
Şimdi aşağıdaki kodu buluyoruz ;
Kod 1

#comments{overflow:hidden}
.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
.comments .continue a{border:1px solid #e2e2e2;color:#0191C8;font-weight:400;padding:10px 0;text-align:center}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#666}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1f1f1f}
.comments .avatar-image-container,.comments .avatar-image-container img{border:1px solid #DDD;height:42px;max-height:42px;max-width:42px;padding:1px 3px 3px 1px;width:42px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;padding:10px}
.comments .comments-content .comment{line-height:1em;margin:15px 0 0;padding:0;width:100%}
.comments .comments-content .icon.blog-author{background-image:url();height:36px;margin:0;position:absolute;right:-12px;top:-12px;width:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{line-height:1.4em;padding:5px 0}
.comments .comment-thread.inline-thread{background:transparent;border-left:1px solid #ddd}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{border-top:1px solid #ddd;content:"";height:0;left:-20px;position:absolute;top:10px;width:10px}
.comments .comment-thread.inline-thread .comment .comment-block{background:transparent;border:0;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{height:36px;max-height:36px;max-width:36px;width:36px}
.comments .continue{border-top:0;width:100%}
#comment-editor{width:103%!important}
.comment-form{max-width:100%;width:100%}
.comments{background:#fafafa;border:1px solid #dadada;color:#666;margin:-35px 0 0;padding:10px}
.datetime{float:right;font-size:11px;line-height:10px;margin:0;padding:0}
.comments h3{color:#707070;font-size:14px;margin-top:6px}
#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;<textarea> 

Sonra Yerleşim/Gadget Ekle/HTML/JavaScript Secerek Kod 2 Yapıştırıp Kayit Ediyoruz.
Kod 2

<div id="headerozi-wrapper">
<div id="headerozi">
<div id="headerozi-logo">
<a href="/" target="_self"><img alt="SokakBlogcusu" 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="LOGO URLSİ" style="opacity: 1;" /></a>

</div>
<ul class="header-menu">
<li><a href="http://sokakblogcusu.blogspot.com/">Ana Sayfa</a></li>
<li><a href="http://sokakblogcusu.blogspot.com/">Reklam</a></li>
<li><a href="http://sokakblogcusu.blogspot.com/">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://sokakblogcusu.blogspot.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="SitemX da Arama.." x-webkit-speech="x-webkit-speech" /> </form>
</div>
</div>
</div>
<textarea> 

Not : Ayarları Kod 2 Yapıyorsunuz :D Kod 1 Dokunmayın