İkonlu Menü CSS Blogger Header Tasarımı HTML #1

HTML ve CSS ile hazırlanmış bu tasarımı sizler için blogger tabanında sunuyoruz.Her geçen gün blogger dünyası büyüyor ve blogcular Google'ın blog hizmetinden faydalanıyor.Sizlerde blogunuza görsellik katmanızı sağlayacak bu tarz menü ve footer gibi hazır kodları kullanabilirsiniz.İçerisinden gerekli yerleri değiştirebilirsiniz.
Logo boyutunu, üzerinde ki resmin boyutunda yaparsanız sizin için daha verimli olabilir.

İkonlu CSS Blogger Header Tasarımı HTML #1

Peki bunu blogunuza nasıl ekleyeceksiniz ?

Blogger panelinizden blogunuzun Şablon menüsüne geliyoruz.
HTML'yi düzenle kısmına girip.

</body>

kodunu buluyoruz ve hemen altına bu kodları ekliyoruz.
<!-- Menu (Start)-->
<style type='text/css'>
@font-face {
    font-family: &#39;mentonesemibold&#39;;
    src: url(&#39;mentone-semibol-webfont.eot&#39;);
    src: url(&#39;mentone-semibol-webfont.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;),
         url(&#39;mentone-semibol-webfont.woff&#39;) format(&#39;woff&#39;),
         url(&#39;mentone-semibol-webfont.ttf&#39;) format(&#39;truetype&#39;),
         url(&#39;mentone-semibol-webfont.svg#mentonesemibold&#39;) format(&#39;svg&#39;);
    font-weight: normal;
    font-style: normal;
}
.sil { clear:both; }
#govde {width: 900px; margin: 0 auto;margin-top: -110px; }
#ust-div { background-color:#3e4245; font:11pt mentonesemibold;/* background-image:url(); background-repeat:no-repeat*/;
background-position:40px 50px; height:320px; overflow-x:hidden;  }
#ust-div ul.ust-menu { margin:0; padding:0; list-style-type:none; color:#adadad; border-bottom:1px solid #1f2024; border-bottom-left-radius:10px;
border-bottom-right-radius:10px; overflow:hidden; background: #353537; /* Old browsers */
background: -moz-linear-gradient(top, #353537 0%, #28292b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353537), color-stop(100%,#28292b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #353537 0%,#28292b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #353537 0%,#28292b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #353537 0%,#28292b 100%); /* IE10+ */
background: linear-gradient(to bottom, #353537 0%,#28292b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#353537&#39;, endColorstr=&#39;#28292b&#39;,GradientType=0 ); /* IE6-9 */ }
#ust-div ul.ust-menu li { float:left; margin:0px; line-height:50px; border-right:1px solid #28292b; }
#ust-div ul.ust-menu li:hover { color:#da3919; background: #222224; /* Old browsers */
background: -moz-linear-gradient(top, #222224 0%, #1c1c1e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222224), color-stop(100%,#1c1c1e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #222224 0%,#1c1c1e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #222224 0%,#1c1c1e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #222224 0%,#1c1c1e 100%); /* IE10+ */
background: linear-gradient(to bottom, #222224 0%,#1c1c1e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#222224&#39;, endColorstr=&#39;#1c1c1e&#39;,GradientType=0 ); /* IE6-9 */
-webkit-transition: all 0.3s ease;              
    -moz-transition: all 0.3s ease;              
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;        
    transition: all 0.3s ease; cursor:pointer; }
#ust-div ul.ust-menu li:last-child { border-right:none; }
#ust-div ul.ust-menu li a { color:#adadad; text-decoration:none;padding: 20px 30px; }
#ust-div ul.ust-menu li a:selected { color:#da3919; }
#ust-div { background-color:#3e4245; font:11pt mentonesemibold;background-image:url(https://dl.dropboxusercontent.com/s/uddeqzwetadwio3/siyah-anka.jpg); background-repeat:no-repeat;
background-position:40px 50px; height:320px; overflow-x:hidden;  }
.logo { opacity: 0.9; transition:.3s; float:left; margin:55px 0 0 0;}
.logo:hover { opacity: 1.0;}
.menu {height: 110px;display: inline-block;list-style-type:none; margin:0; padding:0; background-color:#fff; border-top-left-radius:6px; border-top-right-radius:6px; color:#868686; }
.menu li { float:left; text-align:center; font:12pt mentonesemibold; background-image:url(https://dl.dropboxusercontent.com/s/ojfv215lnlutjfz/menu.jpg);
background-repeat:no-repeat; background-position:32px 10px; background-repeat:no-repeat;
line-height:150px; transition:.3s; cursor:pointer; }
.menu li img { display:block; }
/* 6f9c0b */
.menu li:hover { background-position:32px -60px; color:#9c0b0b; }
.menu li+li { background-position:-56px 10px; text-align:center; }
.menu li+li:hover { background-position:-56px -60px; color:#0b599c; }
.menu li+li+li { background-position:-155px 10px; text-align:center; }
.menu li+li+li:hover { background-position:-155px -60px; color:#0b979c; }
.menu li+li+li+li { background-position:-258px 10px; text-align:center; }
.menu li+li+li+li:hover { background-position:-258px -60px; color:#61880b; }
.menu li+li+li+li+li { background-position:-357px 10px; text-align:center; }
.menu li+li+li+li+li:hover { background-position:-357px -60px; color:#9eba1c; }
.menu li+li+li+li+li+li { background-position:-450px 10px; text-align:center; }
.menu li+li+li+li+li+li:hover { background-position:-450px -60px; color:#ffc02a; }
.menu li+li+li+li+li+li+li { background-position:-550px 10px; text-align:center; }
.menu li+li+li+li+li+li+li:hover { background-position:-550px -60px; color:#9c0b97; }
.menu li+li+li+li+li+li+li+li { background-position:-640px 10px; text-align:center; }
.menu li+li+li+li+li+li+li+li:hover { background-position:-640px -60px; color:#ff2a75; }
.menu li+li+li+li+li+li+li+li+li{ background-position:-840px 10px; text-align:center; }
.menu li+li+li+li+li+li+li+li+li:hover { background-position:-840px -60px; color:#6f9c0b; }
.logo-sag img {width: 568px;height: 80px;}
.menu li a {display: block;text-align: center;width: 100px;height: 65px;margin-top: 13px;text-decoration: none;color: #337ab7;}
.ust-cizgi { border-bottom:1px solid #4d4e52; height:180px;    margin-top: 110px; }
.ust-cizgi ul { list-style-type:none; margin:0; padding:0; }
.ust-cizgi ul li { float:left; }
.ust-cizgi ul li img { padding:0 10px; float:left; margin-top:0px !important; }
  .ust-cizgi input[type=&quot;text&quot;], input[type=&quot;password&quot;] { color:#e4e5df; padding:13px; background-color:#242426; border:none; border-radius:10px;    width: 500px;
box-shadow:inset 0 2px 1px #18181a; outline:none; }
.logo-sag { float:right; margin:50px 0; margin-bottom:0; }
#buttonsinput {text-indent: -9999px;background: #fafafa url(http://3.bp.blogspot.com/-8nz2WJz8FVc/UdLZOb8xg0I/AAAAAAAAB2g/PUOV9_hP_P8/s15/searchicon.png) center no-repeat;padding: 10px 30px;border: 1px solid #ddd;margin: 0px; border-left: 0px;}
 #buttonsinput:hover {opacity: 0.8;}
</style>
<div id='ust-div'>
    <div class='ust-cizgi'>
        <div id='govde'>
            <ul class='ust-menu'>
                <li><a href='/'>Anasayfa</a></li>
                <li><a href='/p/soru-cevap.html'>Soru - Cevap</a></li>
                <li><a href='/p/sss.html'>S.S.S</a></li>
                <li><a href='/p/iletisim.html'>İletişim</a></li>
            </ul>
            <div class='sil'/>
            <a href='/'><img class='logo' src='https://dl.dropboxusercontent.com/s/uq8iy0errhj2c47/projevekod-com-banner.png'/></a>
            <div class='logo-sag'>
<div class='main_search'>
<form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'>
<div id='search'>
<div class='search-input form-search'>
<input class='searchinputo' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Hemen proje veya kod ara...&apos;;}' onfocus='if (this.value == &apos;Hemen proje veya kod ara...&apos;) {this.value = &apos;&apos;;}' type='text' value='Hemen proje veya kod ara...'/>
<input id='buttonsinput' style='vertical-align: top;' type='submit' value='Ara!'/>
</div>
</div>
</form>
</div>
            </div>

        </div>
    </div>
</div>
<!-- UST-CİZGİ -->
<nav id='govde'>
    <ul class='menu'>
        <li><a href='/'>Anasayfa</a></li>
        <li><a href='/search/label/C%23'>C#</a></li>
        <li><a href='/search/label/Proje'>Projeler</a></li>
        <li><a href='/search/label/PHP'>PHP</a></li>
        <li><a href='/search/label/Oyun'>Oyunlar</a></li>
        <li><a href='/search/label/HTML'>HTML</a></li>
        <li><a href='/search/label/Script'>Scriptler</a></li>
        <li><a href='/p/arsiv.html'>Arşiv</a></li>
        <li><a href='/p/soru-cevap.html'>Soru - Cevap</a></li>
        <div class='sil'/>
    </ul>
</nav>
<!-- Menu (End)-->

Yorumlar