Açılır Menü Acemi Blogger Eklentisi

Blogger ile yeni, eski blog kurmuş kullanıcılar için, kumanda paneline ekleyeceğiniz kod ile açılır ve sabit menü yapabilir, Blogger’un k...

...

Blogger ile yeni, eski blog kurmuş kullanıcılar için, kumanda paneline ekleyeceğiniz kod ile açılır ve sabit menü yapabilir, Blogger’un kendi ayarları ile arka plan rengi, sekme renk ve üzerine gelince değişen renkli yazı menü çubuğu eklentisi düzenleyebilirsiniz.

Blogger başlık menü çubuğundaki eklenti kodlarını Türkçe çeviri yaparak anlayabileceğiniz biçime getirdim. Eklenti kodlarını iki yere ekleyip kullanmaya başlayacaksınız. Yazının hemen altında sorularınız için özelleştirme kısmını göreceksiniz. Herşeyden önce cesur olun ve korkmadan başlamak için, Blog temanızın yedeğini alın. Blog yedeğinin nasıl alınacağını bilmiyorsanız önce aşağıdaki yazıyı tarayıcınızın yeni sekmesinde açarak okuyun ve sonra hemen başlayalım.

⇒ Blogger yedekleme nasıl yapılır ?

Gelişmiş CANLI DEMO

Açılır Menü Çubuğu Eklenti Oluşturma adımları :

1. Blog’unuza ekleyeceğiniz kodlar üzerinde değişiklik yapabilmenizi kolaylaştırmak için mutlaka bir metin editörü kullanmalısınız. Bilgisayarınızda bulunan metin dosyası haricinde gelişmiş ücretsiz metin editörü Notepad++ indirmek için bağlantı linki.

2. Blogger → Yerleşim → HTML/JavaScript Gadget’ini açın ve aşağıdaki kodu yapıştırın.

<div id='gpnavbar'> 
      <ul id='gpnav'> 
        <li> 
          <a href='http://guney4.blogspot.com/'>Ana Sayfa</a> 
        </li> 
        <li> 
          <a href='#'>Hakkında</a> 
       </li> 
        <li> 
          <a href='#'>İletişim</a> 
        </li> 
  <li> 
           <a href='#'>Kategoriler</a>
            <ul> 
                <li><a href='#'>Alt Sayfa #1</a></li> 
                <li><a href='#'>Alt Sayfa #2</a></li> 
                <li><a href='#'>Alt Sayfa #3</a></li> 
              </ul> 
        </li>
      </ul> 
    </div>

Kod açıklamaları :

1. Ana Sayfa : # Hashtag olarak bilinen bu işaretlerin olduğu yerlere linkler eklenir. Ana sayfanız tek bir link bağlantısından oluşur. Bu kısmı blog URL’niz ile diğiştirin.Tırnaklara dikkat edin. Hemen yan tarafdaki Ana Sayfa ismi de sizin değiştirebileceğiniz isim alanıdır.

2. Hakkında : Her blog’un genelde hakkında veya hakkımda statik link sayfası vardır. Statik linkler tek bir sayfalarlardan oluşur. Yani menü çubuğunda Hakkında ismine tıklandığında sadece bir sayfa açılır. Diğer yazı bağlantılarınız görülmez.

3. Açılır menü yapımına geçmeden önce statik olan sayfaların hemen önünde veya yan tarafında farklı bir isimde yine statik link oluşturabilirsiniz. Bunun için <li> başlangıç ve </li> bitiş etiket arasındaki kodları kopyalayıp, bitiş etiketi olan </li> işaretin altına yapıştırarak link ve ismi değişebilirsiniz. Aşağıdaki örnek de renkli olan yer değişim yapacağınız kısmı göstermektedir.

<li>

<a href='#'>Hakkında</a>

</li>

<li>

<a href='#'>İletişim</a>

</li>

Şimdi açılır menü linklerinin nasıl yapılacağını görelim :

1. Kategoriler’in sol tarafındaki # Hashtag işaretinin olduğu yere herhangi bir yazı etiket linki eklemiyoruz. Dolayısı ile tıklandığında açılmayacak sadece Kategorilerin burada olduğunu ifade edeceğiz.

2. Hemen alt kısımda (UL) ile (sıralı etiket demek) başlayan # Hashtag işaretinin olduğu yer açılır link bağlantısıdır. Buraya yazınızın etiket linki eklenir. Etiket link örneği.

Etiket ismi şu olsun : Pinterest

Etiket linki de şu olsun : http://guney59.blogspot.com.tr/search/label/Pinterest

# Buraya : Etiket linkini ekle,

3. Hemen sağındaki “ Alt Sayfa #1 ” olan kısma eklediğiniz link için isim verirseniz tıklandığında o isme ait tüm yazıların açılmasını sağlarsınız.

4. Farklı bir açılır menü eklemek için <ul> ile başlayan </ul> ile biten kodları kopyalayın ve </li> kapanış etiketi altına yapıştırdığınızda 2. açılır menü oluşturmuş olursunuz. Yukarıda verdiğim örnekte “<li>.....</li>” arasındaki kodlar yerine, baş kısımlarında <ul> ile başlayan </ul> biten kod'u kopyalayıp yapıştıracaksınız.

Yukarıda anlatılanlar kafanızı karıştırıyorsa, yukarıda ve aşağıda verdiğim kodların içine linkleri ekleyin ve kaydedin.

Gadget olarak eklediğimiz menü çubuğumuza stil veren kodların eklenmesi :

1. Blog şablon → HTML’yi Düzenleyi açın ve aşağıdaki kod bulun (Ctrl+F)

]]></b:skin>

2. Bu kodun hemen üstüne aşağıdaki CSS stil kodlarını yapıştırın.

/*----- GP Drop Down Menu ----*/
#gpnavbar { 
    background: #060505; 
    width: 1020px; 
    color: #FFF; 
        margin: 0px; 
        padding: 0; 
        position: relative; 
        border-top:0px solid #960100; 
        height:35px;
}

#gpnav { 
    margin: 0; 
    padding: 0; 
} 
#gpnav ul { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#gpnav li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
        border-left:1px solid #333; 
        border-right:1px solid #333; 
        height:35px; 
} 
#gpnav li a, #gpnav li a:link, #gpnav li a:visited { 
    color: #FFF; 
    display: block; 
   font:normal 12px Helvetica, sans-serif;    margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none;         
} 
#gpnav li a:hover, #gpnav li a:active { 
    background: #BF0100; 
    color: #FFF; 
    display: block; 
    text-decoration: none; 
        margin: 0; 
    padding: 9px 12px 10px 12px;                 
}
#gpnav li { 
    float: left; 
    padding: 0; 
} 
#gpnav li ul { 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 160px; 
    margin: 0; 
    padding: 0; 
} 
#gpnav li ul a { 
    width: 140px; 
} 
#gpnav li ul ul { 
    margin: -25px 0 0 161px; 
} 
#gpnav li:hover ul ul, #gpnav li:hover ul ul ul, #gpnav li.sfhover ul ul, #gpnav li.sfhover ul ul ul { 
    left: -999em; 
} 
#gpnav li:hover ul, #gpnav li li:hover ul, #gpnav li li li:hover ul, #gpnav li.sfhover ul, #gpnav li li.sfhover ul, #gpnav li li li.sfhover ul { 
    left: auto; 
} 
#gpnav li:hover, #gpnav li.sfhover { 
    position: static; 
}
#gpnav li li a, #gpnav li li a:link, #gpnav 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;
    
} 
#gpnav li li a:hover, #gpnavli li a:active { 
    background: #060505; 
    color: #FFF; 
    display: block;     margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
}

3. Menü çubuğu, Sekme ve Arka plan renklerini değiştirmek için ;

Şablon → Özelleştir → Gelişmiş seçeneklerinden Sekme metni, Sekme arka planı isimlerindeki seçenekler ile istediğiniz renkleri seçin. Veya ;

Manuel değişiklik için :

⇒ #060505 Kodu Ana menü arka plan rengi değişimi için

⇒ Yazı tipi renk, boyut ailesini değiştirmek için sarı vurgular

⇒ # BF0100 Fare ile sekme üzerine gelince arka plan değişimi için

⇒ # BF0100 Açılır menü arka plan rengini değiştirmek için

⇒ #060505 Fare üzerine gelince açılır arka plan rengi değişimi için

Tüm işlemleri yaptığınızda yukarıdaki resimde gördüğünüz gibi menü çubuğunu kullanabileceksiniz. Konu anlatımında çok fazla detaya girdiğimi düşünebilirsiniz. Ancak yapılacak işlemi özetlersek. 1. Gadget ekleme 2. Şablon stil kodlarını ekleme şeklinde konuyu sadeleştirerek düşünüp işleme başlayın. Anlaşılmayan yerleri sormaktan çekinmeyin.