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-menu

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.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

9 yorum:

  1. Güzel bir eklentiymiş , paylaşım için teşekkürler

    YanıtlaSil
  2. Teşekkürler, peki örnek olarak menüye koyduğumuz HAKKIMDA kısmına tıklandığında hakkımızdaki detayların görünmesini nasıl sağlayabiliriz?
    Saygı ve selamlar.

    YanıtlaSil
  3. çok güzel.bu menüye açılır alt menü nasıl eklenir

    YanıtlaSil
  4. http://gokhantezcan.blogspot.com/
    Linklerin arkasındaki siyah renkteki şeyi nasıl kaldıracam.Yazıları nasıl ekleyecem bu linklere ve blogta nasıl ortalayacam.

    YanıtlaSil
    Yanıtlar
    1. Online htlm editrlerine giriş yaparak kodlarda oynayabilirsiniz. Anında ön izlemeyle değişikliklerinizi görebilirsiniz.

      Sil
  5. teşekkürler

    http://www.yuklex.blogspot.com.tr

    YanıtlaSil
  6. merhaba aynısını bende yaptım fakat tıklatıldığında açılmıyor bunu bana daha net anlatırmısnız lütfen

    YanıtlaSil
    Yanıtlar
    1. Merhaba! Kodu doğru uyguladığınıza emin misiniz? Farklı tarayıcılardan kontrol etme şansınız oldu mu?

      Sil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.