Blogger Üst Yatay Menü Ekleme

Blogunuzda yer alan kategorileri gösteren yatay menülerin biçimi okuyucularınız tarafından göze çarpan ilk alan olduğu için tasarımı büyük önem taşıyor.Bu kısım için aşağı açılır menü kullanabileceğiniz gibi tek sıra bir düzen de tercih edebilirsiniz.Bu noktada alternatifinizin çok.O yüzden size yeni bir alternatif oluşturmak adına renkli blogger üst yatay menü ekleme konusunda yazı hazırladım.Bu menüyü header kısmında kullanabileceğiniz gibi footer gibi farklı alanlarda da tercih edebilirsiniz.

Ben dosyayı direkt html olarak düzenledim.Siz kodları html/Gadget ekle kısmından ekleyebileceğiniz gibi şablon düzenleyicisi menüsünden de ekleyebilirsiniz.

Renkli Yatay Menü Nasıl Oluşturulur ?

Aşağıda html kodlarını bulabilirsiniz.Bu kodları yerleşim>>html gadget ekle kısmına ekleyebilirsiniz.

   
<style> 
    
    #multicolor-bar {      
        background: #000;       
        width: 100%;       
             color: #FFF;       
            margin: 10px 0;       
            padding: 0;       
            position: relative;       
            border-top:0px solid #0099FF;       
            height:35px; 
    
    } 
    
    #multicolor-nav {      
        margin: 0;       
        padding: 0;       
    }       
    #multicolor-nav ul {       
        float: left;       
        list-style: none;       
        margin: 0;       
        padding: 0;       
    }       
    #multicolor-nav li {       
        list-style: none;       
        margin: 10px;       
        padding: 0;       
    }       
    #multicolor-nav li a, #multicolor-nav li a:link, #multicolor-nav li a:visited {       
        color: #FFF;       
        display: block;       
        font:bold 12px Helvetica, sans-serif;       
        margin: 0;       
        padding: 9px 12px 11px 12px;       
        text-decoration: none;
    
    }      
    #multicolor-nav li a:hover, #multicolor-nav li a:active {       
        background: #ee7d07;       
        color: #FFF;       
        display: block;       
        text-decoration: none;       
         margin: 0;       
        padding: 9px 12px 11px 12px;       
    } 
    
    #multicolor-nav li {      
        float: left;       
        padding: 0;       
    }       
    .color-1       
   {       
   background:#0b5394;       
   }
    
     .color-4      
   {       
   background:#990000;       
   } 
    
    .color-5      
   {       
   background:#d6253a;       
   } 
    
    .color-7      
   {       
   background:#274e13;       
   } 
    
     .color-11      
   {       
   background:#b45f06;       
   } 
    
    .color-14      
   {       
   background:#741b47;       
   } 
    
</style> 
    
    <div id='multicolor-bar'>      
              <ul id='multicolor-nav'>       
                        <li class="color-1"><a href='#'>Home</a></li>       
                        <li class="color-4"><a href='#'>Link 1</a></li>       
                        <li class="color-5"><a href='#'>Link 2</a></li>       
                        <li class="color-7"><a href='#'>Link 3</a></li>       
                        <li class="color-11"><a href='#'>Link 4</a></li>       
                        <li class="color-14"><a href='#'>Link 5</a></li>       
</ul></div>
 

Html menu kodları bunlar.Renkli kısımları kendi isteğinize göre düzenleyebilirsiniz.Size tavsiyem herhangi bir html editörü yardımıyla kodları kendinize göre düzenleyin ve en son halini blogunuza yerleştirin.Zaten kodların mantığını çözmüşsünüzdür.Color kısmına hangi renk kodu girerseniz yazınız o renk kodundaki arkaplanda yer alacak.Blogger üst yatay menü için paylaştığım farklı bir alternatif umarım hoşunuza gitmiştir.Takıldığınız bir yer olursa yorum bölümünde sorabilirsiniz.