Blogger da renkli yatay menü nasıl oluşturabilirim?

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 her bir kategorisi farklı renge sahip bir menü 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>

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.

Takıldığınız bir yer olursa yorum bölümünde sorabilirsiniz.