Blogger İçin Minimal Horizontal Menü Eklemek

    Blog için güzel bir menü eklemek isterseniz işte bu tam sizin aradığınız olabilir.Üst resimde de gördüğünüz gibi turuncu yatay menünün sağ kısmında yer alan sosyal medya site ikonları ve sol tarafda da yer aldığı farklı başlıklar altında ki diğer menüler.Bu menülere alt kategori ekleyerek çoğaltabilirsiniz,javascript özelliği ile bu kolaylaşıyor.

   Minimal Horizontal menü renkini ve menü mause renkini kodlar içinde bularak değiştirebilir sitenizin temasına göre düzenleyebilirsiniz.

   Minimal Horizontal Menü Blogger'e Nasıl Ekleyebilirim?

1- Blogger hesabınıza giriş yapın.
2- Kumanda Paneli > Şablon > Html Düzenle yolunu izliyoruz.
3- Ctrl+F tuş kombinasyonu ile açılan arama kutusu içerisine ]]></b:skin> kodunu bulun.
4- Bulduğunuz ]]></b:skin> kodunun hemen üstüne aşağıda ki kodları ekleyin.
/* BC Minimal Süper Menü Stil Kodları <br /> ----------------------------------------------- */ <br /> #itbnav { <br /> background:#F1921A; <br /> padding:0; <br /> height: 29px; <br /> font-size:12px; <br /> position: relative; <br /> border:1px dotted #000;<br /> } <br /> #itbnav .wrapnya, <br /> #nav .wrap, <br /> #headisi, <br /> #content-wrapper { <br /> margin:0 auto; <br /> width:98%; <br /> } <br /> #itbnav .tgltop { <br /> float:left; <br /> color:#E2E2E2; <br /> display:block; <br /> line-height:20px;margin-top: 4px; <br /> }<br /> .sf-menu, <br /> .sf-menu * { <br /> margin:0; <br /> padding:0; <br /> list-style:none; <br /> } <br /> .sf-menu li { <br /> position:relative; <br /> } <br /> .sf-menu ul { <br /> position:absolute; <br /> display:none; <br /> top:100%; <br /> left:0; <br /> z-index:99; <br /> } <br /> .sf-menu > li { <br /> float:left; <br /> margin:0 1px; <br /> } <br /> .sf-menu li:hover > ul, <br /> .sf-menu li.sfHover > ul { <br /> display:block; <br /> } <br /> .sf-menu a { <br /> display:block; <br /> position:relative; <br /> } <br /> #menunav > li > a { <br /> font: normal normal 90% 'Open Sans', serif ,Sans-serif; <br /> line-height: 50px; <br /> text-transform: uppercase; <br /> font-weight: 600; <br /> height: 50px; <br /> } <br /> .sf-menu ul ul { <br /> top:0; <br /> left:100%; <br /> } <br /> .sf-menu { <br /> float:left; <br /> } <br /> .sf-menu ul { <br /> min-width:12em; <br /> *width:12em; <br /> } <br /> .sf-menu a { <br /> padding:0 10px; <br /> height:50px; <br /> line-height:50px; <br /> text-decoration:none; <br /> zoom:1; <br /> } <br /> .sf-menu a.home, .sf-menu > li > a.home.current { <br /> background-color:#007ABE; <br /> text-indent:-9999px; <br /> padding:0; <br /> width:50px; <br /> } <br /> .sf-menu a { <br /> color:#E6E6E6; <br /> font-size:11px; <br /> } <br /> #itbnav .sf-menu a { <br /> color:#fff; <br /> height: 29px; <br /> line-height: 29px; <br /> } <br /> .sf-menu li { <br /> white-space:nowrap; <br /> *white-space:normal; <br /> -moz-transition:background-color .2s; <br /> -webkit-transition:background-color .2s; <br /> transition:background-color .2s; <br /> position:relative; <br /> } <br /> .sf-menu ul li { <br /> background-color:#007ABE; <br /> margin:1px 0; <br /> -moz-border-radius: 3px; <br /> -webkit-border-radius: 3px; <br /> border-radius: 3px; <br /> } <br /> #itbnav .sf-menu ul li, #itbnav .sf-menu ul ul li { <br /> background-color:#F1921A; <br /> } <br /> .sf-menu ul a { <br /> font-weight:normal; <br /> height:28px; <br /> line-height:28px; <br /> } <br /> #itbnav .sf-menu ul a { <br /> height:25px; <br /> line-height:25px; <br /> } <br /> .sf-menu ul a:hover { <br /> padding-left:12px; <br /> } <br /> .sf-menu ul ul li { <br /> background:#007ABE; <br /> margin:0 0 1px 2px; <br /> } <br /> .sf-menu li:hover > a, <br /> .sf-menu li.sfHover > a, <br /> .sf-menu > li > a.current { <br /> background-color:#000; <br /> -moz-transition:none; <br /> -webkit-transition:none; <br /> transition:none; <br /> color:#E6E6E6; <br /> } <br /> #itbnav .sf-menu li:hover > a, <br /> #itbnav .sf-menu li.sfHover > a, <br /> #itbnav .sf-menu > li > a.current { <br /> background-color:#679EC9; <br /> color:#E2E2E2; <br /> } <br /> .sf-arrows .sf-with-ul { <br /> padding-right:2em; <br /> *padding-right:1em; <br /> } <br /> .sf-arrows .sf-with-ul:after { <br /> content:''; <br /> position:absolute; <br /> top:50%; <br /> right:0.85em; <br /> margin-top:-2px; <br /> height:0; <br /> width:0; <br /> border:4px solid transparent; <br /> border-top-color:#E6E6E6; <br /> } <br /> #itbnav .sf-arrows .sf-with-ul:after { <br /> border-top-color:#007ABE; <br /> } <br /> .sf-arrows > li > .sf-with-ul:focus:after, <br /> .sf-arrows > li:hover > .sf-with-ul:after, <br /> .sf-arrows > .sfHover > .sf-with-ul:after { <br /> border-top-color:#E6E6E6; <br /> } <br /> #itbnav .sf-arrows > li > .sf-with-ul:focus:after, <br /> #itbnav .sf-arrows > li:hover > .sf-with-ul:after, <br /> #itbnav .sf-arrows > .sfHover > .sf-with-ul:after { <br /> border-top-color:#E2E2E2; <br /> } <br /> .sf-arrows ul .sf-with-ul:after { <br /> margin-top:-4px; <br /> margin-right:-3px; <br /> border-color:transparent; <br /> border-left-color:#E6E6E6; <br /> } <br /> #itbnav .sf-arrows ul .sf-with-ul:after { <br /> border-left-color:#007ABE; <br /> } <br /> .sf-arrows ul li > .sf-with-ul:focus:after, <br /> .sf-arrows ul li:hover > .sf-with-ul:after, <br /> .sf-arrows ul .sfHover > .sf-with-ul:after{ <br /> border-left-color:#E6E6E6; <br /> } <br /> #itbnav .sf-arrows ul li > .sf-with-ul:focus:after, <br /> #itbnav .sf-arrows ul li:hover > .sf-with-ul:after, <br /> #itbnav .sf-arrows ul .sfHover > .sf-with-ul:after { <br /> border-left-color:#E2E2E2; <br /> } <br /> .sf-menu li > i { <br /> position:absolute; <br /> top: 3px; <br /> right: 3px; <br /> width: 27px; <br /> height: 22px; <br /> cursor:pointer; <br /> display:none; <br /> background-color:#c00000; <br /> -moz-border-radius:2px; <br /> -webkit-border-radius:2px; <br /> border-radius:2px; <br /> outline:0; <br /> } <br /> .sf-menu li > i:after { <br /> content: '+'; <br /> color: #fff; <br /> font-size: 19px; <br /> position: absolute; <br /> left: 5px; <br /> top: -2px; <br /> } <br /> .sf-menu li > i.active:after { <br /> content:'-'; <br /> font-size:39px; <br /> top:-14px; <br /> } <br /> #itbnav .sf-menu li > i { <br /> width: 23px; <br /> height: 19px; <br /> top: 6px; <br /> } <br /> #itbnav .sf-menu li > i:after { <br /> top: -4px; <br /> left: 3px; <br /> } <br /> #itbnav .sf-menu li > i.active:after { <br /> top: -13px; <br /> font-size: 31px; <br /> left: 4px; <br /> } <br /> .sf-menu a.home:before,<br /> .sf-menu a.home:before, #searchnya button:before, #view a:before, .breadcrumbs .homex:before { <br /> text-indent: 0; <br /> } <br /> .sf-menu a.home:before { <br /> width: 30px; <br /> height: 30px; <br /> } <br /> .sf-menu a.home:before { <br /> content: "\f015"; <br /> top: 0; <br /> font-size: 29px; <br /> left: 11px; <br /> color: #FBFBFB; <br /> }<br /> <br /> #icon-socialmn { <br /> margin: 0; <br /> float: right; <br /> } <br /> #icon-socialmn li { <br /> float: left; <br /> } <br /> #icon-socialmn a { <br /> display: block; <br /> text-indent: -9999px; <br /> width: 26px; <br /> height: 29px; <br /> background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutP78TUssyCbsVWliAyvbpFaWYNgA78GkaWwKfRga_w0Wrrxmv8PWKhq1Ss2Uof9uSWlLqZriQK5pycOa0m21oUGSAVQDt4eZx7AbIqpdopml_110OWJdEKLnoTKHjVCAy3W2TnxxTYuZ/s575/beyaz-sosyal-ikonlar.png); <br /> background-repeat: no-repeat; <br /> -webkit-transition: background .2s ease-out; <br /> -moz-transition: background .2s ease-out; <br /> -o-transition: background .2s ease-out; <br /> transition: background .2s ease-out; <br /> } <br /> #icon-socialmn .sotw a { <br /> background-position: 1px 2px; <br /> } <br /> #icon-socialmn .sofb a { <br /> background-position: -24px 2px; <br /> } <br /> #icon-socialmn .sogo a { <br /> background-position: -49px 2px; <br /> } <br /> #icon-socialmn .sorss a { <br /> background-position: -74px 2px; <br /> } <br /> #icon-socialmn .solinkn a { <br /> background-position: -99px 2px; <br /> } <br /> #icon-socialmn .sopint a { <br /> background-position: -150px 2px; <br /> } <br /> #icon-socialmn .sotw a:hover { <br /> background-color: #2DAAE1; <br /> } <br /> #icon-socialmn .sofb a:hover { <br /> background-color: #3C5B9B; <br /> } <br /> #icon-socialmn .sogo a:hover { <br /> background-color: #F63E28; <br /> } <br /> #icon-socialmn .sorss a:hover { <br /> background-color: #FA8C27; <br /> } <br /> #icon-socialmn .solinkn a:hover { <br /> background-color: #0173B2; <br /> } <br /> #icon-socialmn .sopint a:hover { <br /> background-color: #CB2027; <br /> }

5- Sıra HTML kodları eklemeye geldik.Html kodları için bu bilgileri göz önünde bulundurun lütfen;

1. Blogger'in kendi temalarından birini kullanıyorsanız eğer Html kodlarını <div class='tabs-outer'> kodunun hemen üst kısmına ekleyin.
2. Özel veya kişisel hazır tema kullanıyorsanız Html kodlarını <div id='content-wrapper'> kodunun hemen altına ekleyin.

<!--BC Minimal Süper Menü HTML Kodları--> 
<div id='itbnav'> 
<ul class='sf-menu' id='topmenunav'> 
  <li><a href='#'>Ana Sayfa</a></li> 
  <li><a href='#'>Hakkımda</a></li> 
  <li><a href='#'>Kategoriler</a></li> 
  <li><a href='#'>Destek Ol</a></li> 
  <li><a href='#'>Takip Et</a></li> 
  <li><a href='#'>Ne İstersiniz?</a></li> 
  <li><a href='#'>Arşiv</a></li> 
  <li><a href='#'>Yardım</a></li> 
  <li><a href='#'>İletişim</a></li> 
  <li><a href='#'>Menü</a> 
    <ul>     
<li><a href='#'>Feedburner</a></li> 
      <li><a href='#'>Google Analytics</a></li> 
      <li><a href='#'>Gravatar</a></li> 
      <li><a href='#'>Paypal</a></li>
    </ul> 
  </li> 
  
</ul> 
<ul class='sociico' id='icon-socialmn'> 
  <li class='sotw'><a href='https://twitter.com/bilgicafem61' target='_blank'>twitter</a></li> 
  <li class='sofb'><a href='http://www.facebook.com/bilgicafem61' target='_blank'>facebook</a></li> 
  <li class='sogo'><a href='http://www.google.com/bilgicafem61' target='_blank'>google</a></li> 
  <li class='sorss'><a href='http://feeds.feedburner.com/bilgicafem61' target='_blank'>rss</a></li> 
  <li class='solinkn'><a href='http://linkedin.com/bilgicafem61' target='_blank'>linkedin</a></li> 
  <li class='sopint'><a href='http://pinterest.com/bilgicafem61' target='_blank'>pinterest</a></li> 
</ul> 
</div>

    HTML Kod İçinde Düzenlenmesi Gereken Yerler;
Kırmızı işaretli metin yerlerine siz kendinize göre değiştirebilirsiniz.
Mavi yazılı metin ve # işareti yerine siz menü metin başlık linklerinizi ekleyin.