Blogger da Drop Down Menu Nasıl Oluşturulur

Bu yazımızda blogger sayfanızda aşağıya doğru açılan çok şık bir menu oluşturacağız.Eğer hali hazırdaki menunuzu beğenmeyip biraz farklılık oluşturmak istiyorsanız bu menuyü kullanmanızı tavsiye ediyorum.

dropdown_menu

Gelelim nasıl yapılacağına:

Blogger hesabınıza giriş yaparak Blogger >>> Design >>> Page Elements yolunu izleyin.Header kısmının hemen altındaki Gadget Ekle (Header Yerine Gadget Nasıl Eklenir)kısmına gelerek Html/JavaScript ekleye tıklayın ve aşağıdaki kodları yapıştırın:

<div id='mbtnavbar'>
      <ul id='mbtnav'>
        <li>
          <a href='#'>Anasayfa</a>
</li>
        <li>
          <a href='#'>Hakkında</a>
</li>
        <li>
          <a href='#'>İletişim</a>
</li>
  <li>
           <a href='#'>SubMenu</a>

<ul>
                <li><a href='#'>Sub Menu #1</a></li>
                <li><a href='#'>Sub Menu #2</a></li>
                <li><a href='#'>Sub Menu #3</a></li>
              </ul>
</li>

      </ul>
    </div>

Daha fazla eklemek isterseniz <li> kodları arasındaki yeri kopylayıp isteğinize göre düzenleyebilirsiniz.

Şimdi bu pencereyi kaydedip çıkıyoruz.Daha sonra Edit Html kısmına geliyoruz.Her ihtimale karşılık blogunuzun yedeğini alın ve ]]></b:skin> kodunu aratın ve hemen üstüne aşağıdaki kodları yapıştırın:

/*----- Drop Down Menu ----*/

#mbtnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        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 #333;
        border-right:1px solid #333;
        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: #BF0100;
    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: #060505;
    color: #FFF;
    display: block;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

Renkli ve kalın yazılı kısımları isteğinize göre değiştirebilirsiniz.Eğer gerekli düzenlemeleri yaptıysanız şablonunuzu kaydedip görüntüleyin.Menu kısmının değiştiğini göreceksiniz.Html kodlarından göreceğiniz üzere kodda düzenlemeler yapabilirsiniz.Takıldığınız bir yer olursa yorum bölümünde belirtin.

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.

2 yorum:

  1. gamerpat70 eklediğimiz menü deki iletişim hakkımda kutularına tıklayınca bir şey olmuyor nasıl düzenleyecez ?

    YanıtlaSil
    Yanıtlar
    1. Hemen yanındaki # işaret yerine nereye yönlenmesini istiyorsanız o linki gireceksiniz.

      Sil

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