Menu

Blogger Yeşil Navigation Menü Tasarımı

Blogger Navigation Menü eklenti oldukça kullanışlıdır sitenizin renklerine uygun olarak istediğiniz renklerde ve ölçülerde kullanabilirsiniz.

Navigation Menüler ile site ziyaretçileriniz site kategorilerinize rahat bir şekilde ulaşabilirler,SEO açısından oldukça önemli olan site ziyeretçilerinin sitede kalma oranı bu gibi eklentilerle oldukça etkili olmaktadır.






Blogger CSS Kodları ile oluşturulan aşağıdaki Navigation Menü sade ve şık bir şekilde tasarlanmıştır.


Blogger Yeşil Navigation Menü Tasarımı
                                                                 Demo

CSS3 ile Blogger Navigation Menu Ekleme 

1-İlk önce Blogger.com giriş yapınız sonra Şablon/ HTML Düzenle adımlarını takip ediniz.

2-Kodu yükleyeceğiniz yeri bulmak için,kodumuz CSS olduğu için
 ]> </ b:skin> buluyoruz.
Bu kodu bulmak için
 ]> </ b:skin> kodunu kopyalayarak Ctrl + F tuşlarına basıp kodlarınızın içinde aratın

3-Bulduğunuz
 ]]> </ b:skin> kodunun üstüne aşağıda verdiğim kodu ekleyiniz ve son olarak Şablonunuzu kaydediniz.

Blogger Yeşil Menü Tasarımı

/*----- SEO Mektebi Menu ----*/
#mbtnavbar {
    background: #009999;
    width: 960px;
    color: #009999;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #009999;
        height:35px;
}
#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #009999;
        border-right:1px solid #009999;
        height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;    
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;  
   }
#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #000000;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #009999;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

4-İlk önce Blogger.com giriş yapınız sonra Yerleşim/Gedget Ekle/ HTML/JavaScript adımlarını takip ediniz.
Blogger Yeşil Menü Tasarımı

Blogger Yeşil Menü Tasarımı

HTML/JavaScript tıkladıktan sonra aşağıdaki kodu kopyalayarak resimdeki gibi boşluğa yapıştırınız,Blogger Yeşil Menü Tasarı eklentisini site tasarımınıza uygun olarak istediğiniz yere ekleyebilirsiniz.

<div id='mbtnavbar'>
      <ul id='mbtnav'>    
<li>  <a href='#'>Ana Sayfa</a> </li>
 <li> <a href='#'>SEO</a>
         <ul><li><a href='#'>Sub Menu1</a></li></ul></li>
<li> <a href='#'>İnternet</a><ul>
          <li><a href='#'>Sub Menu1</a></li></ul></li>
 <li> <a href='#'>Blogger</a>  </li>
  <li> <a href='#'>Twitter</a></li>
<li> <a href='#'>Facebook</a></li>
 <li> <a href='#'>Kodlar</a></li>
  <li> <a href='#'>Temalar</a><ul>
          <li><a href='#'>Sub Menu1</a></li>
        </ul></li></ul></div>



Düzenleme:
Yayınladığımız bu eklentiler içinde ki CSS renk kodları #XXXX şeklinde olan kodlardır bunları aşağıdaki SEO Mektebi renk kodları sayfasından istediğiniz renkleri seçerek ekleyebilirsiniz.

SEO Mektebi CSS Renk Kodlarına Buradan Ulaşabilirsiniz

Ayrıca eklentiler içindeki sayısal değerlerle oynayarak site tasarımına uygun olan ölçüleri sağlayabilirsiniz.


Sonraki Yazılar
« Prev Post
Önceki Yazılar
Next Post »

Henüz Yorum Yapılmamış " Blogger Yeşil Navigation Menü Tasarımı "

Önerilen Yazı
×