0

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 (jawascript) kısmından ekleyebileceğiniz gibi şablon düzenleyicisi menüsünden de 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.

BU YAZI DAHA ÖNCE KAÇ DEFA OKUNDUĞUNU ALT TARAFTAN BAKABİLİRSİNİZ

BU YAZIMIZ DAHA ÖNCE counter KİŞİ TARAFINDAN OKUNDU.

Yorum Gönder

 
Top