Blogger, Ana sayfanızda statik sayfalar, açılır dikey menü ve sosyal paylaşım site linklerini kullanıp istediğiniz gibi özelleştirme ...

...

Blogger, Ana sayfanızda statik sayfalar, açılır dikey menü ve sosyal paylaşım site linklerini kullanıp istediğiniz gibi özelleştirme yapabileceğiniz sabit ve dikey açılır menü çubuk eklentisi. Yakın bir zamana kadar yeni bir blog açmadı iseniz şu anda açılan yeni bloglarda açılır menü çubuğunun çalışmadığını fark edebilirsiniz.

Bir test blogunuz varsa hemen deneme yaparak bu durumu inceleyin. Eski kurulan bloglarda sorun olmayan bu durum, yeni bloglar için maalesef çalışmıyor. Birkaç gündür yeni açtığım bloglarda yaptığım araçtırma sonuçları bunlar ilede sınırlı kalmıyor. Blogger şablon kodlarında henüz araştırmasını yapamadığım, blogger geliştiriciler tarafından bazı farklı kodlarında eklendiğini gördüm. Ayrıca sidebar başlık ismi ve alt bağlantı ismi altında eskiden yatay kesme renkli sekme çizgisi yoktu.

Ancak artık bu eklentide temalar arasında farklılık göstersede şu anda var. Şablon özelleştir → Yayın arka planı → çerçeve rengi temanızda varsa kontrol edin. İstediğiniz herhangi bir rengi sidebar, footer alt bilgi gadget isimlerinin altında düz ince bir çizgi olarak gösterebiliyorsunuz. Biraz sonra demo olarak vereceğim test blogu bu anlatılanlar için güzel bir örnek olabilir.

Durum böyle olunca, ne yapılabilir düşüncesi ile açılır menü çubuğunu bende farklı şekilde çalıştırmayı düşündüm.

Blog temanızı değiştirdiğinizde sizde aynı sorunu yaşayacağınızı hatırlatmak isterim. Yapacağımız işlem sonucu blog yerleşim görüntüsünde birkaç nokta görülüyor. Ancak sorun yapılacak bir işlem değil. Bizim için önemli olan, eklentinin duyarlı ve çalışır olması önemlidir. Blogunuza açılır menü çubuğu eklemeye hazırsanız aşağıda anlatılanları takip edebilirsiniz. Öncelikle test blog’umdan DEMO görüntüsünü inceleyin.

Ayrıca okuyun ⇒ Klasik Blogger navbar nasıl kaldırılır

Blogger için açılır menü çubuğu kurulum aşamaları :

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 → Şablon kodlarınızı açık konuma getirin.

3. Menü çubuğuna stil veren diğer ismide CSS olan aşağıdaki etiketi şablon kodunuzda bulun.

Şablonda boş bir yere tıklayın ve CTRL + F ile arama kısa yolu kullanın.


]]></b:skin>

4. Bulduğunuz bu etiketin hemen üstüne aşağıda verilen CSS stil kodlarını ekleyin.Blog’u kaydedin.

/*----- GP Drop Down Menu ----*/
#gpnavbar { 
    background: #13114A; 
    width: 1349px; 
    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; 
}

5. Blog şablon üst menüde, Widget atla ok simgesine tıklayın ve Header1 ismine tıklayarak kodların en üst kısmında doğru yerde olduğunuzu kontlar etmek için aşağıdaki resmi inceleyin.

6. Resim üzerinde 1248 satır numarasını görüyorsunuz.Bu rakam sizde farklı olabilir. Şablon kodlarınızda aynı hizada iken 1248 rakamına tıklayın, tıkladınız yer ok işareti şekline dönüşecektir. Böylece kodların bir küme içinde olmasını sağlamış oluyoruz. Bu açıklamayı bilmiyorsanız hoşunuza gittiğine eminim. Şimdi tüm kodların toplandığı bir link gibi görülen kümeyi göreceksiniz. Tıpkı aşağıdaki görüntülünen resim gibi resmi inceleyin.

7. Sarı ile belirlediğim, 1319 satır numarasın hemen karşısında 2 ad. div etiketini görüyorsunuz.

İkinci div etiketinden itibaren enter çekin ve arada bir boşluk bırakarak aşağıda verdiğim Html kodlarını bu satıra kopyalayıp yapıştırın ve blog’u kaydedin.

<div id='gpnavbar'> 
      <ul id='gpnav'> 
        <li> 
          <a href='http://guney12.blogspot.com'>Ana Sayfa</a> 
        </li> 
        <li> 
          <a href='#'>Link1</a> 
       </li> 
        <li> 
          <a href='#'>Link2</a> 
        </li> 
       <li> 
          <a href='#'>Link3</a> 
        </li> 
       <li> 
          <a href='#'>Link4</a> 
        </li> 
  <li> 
           <a href='#'>Kategori1</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>
                <li><a href='#'>Alt Sayfa #4</a></li> 
              </ul>
<li> 
           <a href='#'>Kategori2</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>
                <li><a href='#'>Alt Sayfa #4</a></li> 
              </ul> 
<li> 
           <a href='#'>Kategori3</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>
                <li><a href='#'>Alt Sayfa #4</a></li> 
              </ul> 

       <li> 
          <a href='#'>Link5</a> 
       </li> 
        <li> 
          <a href='#'>Link6</a>

        </li>
       <li> 
          <a href='#'>Link7</a> 
       </li> 
        <li> 
          <a href='#'>Link8</a>
        </li>
        <li> 
          <a href='#'>Takip Et</a>

        <li> 
          <a href="https://www.facebook.com/guney59paylasim" rel="nofollow" target="_blank">Facebook</a>
        </li>        
        <li> 
          <a href="https://twitter.com/guney59" rel="nofollow" target="_blank">Twitter</a>
        </li>
        <li> 
          <a href="http://www.linkedin.com/in/guney59" target="_blank">Linkedin</a>
        </li>
        <li> 
          <a href="https://plus.google.com/114021536527450214647" rel="nofollow" target="_blank">Google Plus</a>
        </li>
</li>
</li>
</li>
</li>
</ul> 
</div>

Blogger açılır menü çubuğunun özelleştirilmesi :

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 taraftaki Ana Sayfa ismi de sizin değiştirebileceğiniz isim alanıdır.

2. 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. Yan tarafta Kategori1 yanındaki 1 rakamını silebilir yada kullanabilirsiniz.

3. 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 linkini 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,

4. 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.

5. Sosyal paylaşım linklerinin sonunda mavi ile gösterilen kısımlara kendi paylaşım isminizi girin.

Manuel değişiklik için :

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

⇒ Yazı tipi renk, boyut ailesini değiştirmek için kırmızı 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. Bir CSS kodu ve Html kodlarının Şablona eklemesi şeklinde konuyu sadeleştirirseniz rahat ve huzurlu çalışabilirsiniz. Hiçbir kod değişikliği yapmadan da kullanabilirsiniz. Bu kadar uzun gibi görülen anlatım sizi ürkütmesin. Anlaşılmayan yerleri sormaktan çekinmeyin. Yorumlar bu amaçla kullanıldığına göre sorun yok demektir.