Blogger Açılır Menü Oluşturma

Blogger Açılır Menü Oluşturma
+ - 6

Blogger, Blog’larınıza iki adımda açılır menü nasıl oluştururuz ? Açılır menüyü biçimlendirme veya yeni menü eklemek için yapılması gereken işlemler nelerdir ? Klasik Blogger kullanan birçok arkaşımıza yardımcı olmak ve arayış çabalarını biraz olsun hafifletmek için blog’unuza iki adımda açılır menü ekleyebileceğiniz çok basit iki kod veriyorum. Şimdi açılır menü kategorimizi nasıl yapacağız adım adım bakalım. Kodları blog’larınıza eklediğinizde manuel ayarlar yapabildiğiniz gibi Blogger’un özelleştirme seçeneklerini de kullanarak menünün arka plan renklerini, sekme renklerini, yazı renklerini değiştirme şansına sahipsiniz.

acemi-blogger-menu-olusturma

Bu yazıyı yazmamdaki en büyük etken, yeni blog’cuların açılır menü oluşturarak bloglarını güzelleştirmeleri ve bloglarını severek yazılarına devam etmeleridir.

Açılır Menü nasıl oluşturulur?

1. BloggerYerleşimHTML/JavaScript Gadget’ini açın ve aşağıdaki kodu yapıştırın.

blogger-javascript-gadgeti

<div id='gpnavbar'> 
 <ul id='gpnav'> 
 <li> 
 <a href='#'>Home</a> 
 </li> 
 <li> 
 <a href='#'>About</a> 
 </li> 
 <li> 
 <a href='#'>Contact</a> 
 </li> 
 <li> 
 <a href='#'>Sitemap</a>
 <ul> 
 <li><a href='#'>Sub Page #1</a></li> 
 <li><a href='#'>Sub Page #2</a></li> 
 <li><a href='#'>Sub Page #3</a></li> 
 </ul> 
 </li>
 </ul> 
 </div>
 

2. Sayfa bağlantıları ve sayfa isimlerini kalın metin ile # değiştirin.

⇒ Kırmızı renk ile vurgulanan etiket açılır Menü‘yi belirlemektedir.

<li> ile başlayan ve </li> ile biten satır etiketini kopyalayıp alt satıra yapıştırarak ikinci bir menü yapabilir, bu sayıyı çoğaltabilirsiniz.

Ayrıca BakınızBlogger açılır menü başlığı nasıl yapılandırılır ?

<ul> ile başlayan ve </ul> ile biten mavi satır etiketi açılır Menü’dir. Etiketi kopyalayıp ikinci bir açılır menü ekleyebilirsiniz. Aşağıda tek satılık link bağlantı kod örneği verilmiştir.

<li> 
<a href='#'>Home</a> 
</li> 

3. Her zaman kod eklemeden önce blog’u yedekleyin.

4. Blog şablon → HTML Düzenle açın ve aşağıdaki etiketi (Ctrl+F) arama kısa yolu ile bulun.

]]></b:skin> 

5. Bulduğunuz bu etiketin hemen üst kısmına gelecek şekilde aşağıdaki kodları kopyalayıp yapıştırın.

6. Şablon kodlarını kullanmadan da CSS kodunu farklı bir şekilde kullanabilirsiniz. ilgili adımlar…
ŞablonÖzelleştirGelişmişCSS ekle, yolunu takip edin ve kodu yapıştırdıktan sonra ( } ) bu işaretten sonra enter çekin. Blog’u kaydedin. Her iki şekilde de aynı işlemi yapmış olursunuz. Acemi blog kullanıcıları için bir tavsiyedir.

/*----- GP Drop Down AG Menu ----*/
#gpnavbar { 
 background: #060505; 
 width: 960px; 
 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; 
}

 

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

Son işlemi yaptık. Ancak bu işin bir kısmını sekme biçimleme kısmından da yapabilirsiniz.
Kendi Blog açılır menü’nü ücretsiz proğram ile yapmayı düşünürseniz buyrun, link aşağıda.

Blogger Menü Oluşturucu – Ücretsiz Türkçe İndir

Önemli Not: Blogger temanızın özelliğine göre, menü çubuğu açılır olarak görülmüyorsa lütfen aşağıdaki açıklayıcı bağlantı linkini takip ederek “ /* Tabs ” ayarlarınızı yapılandırın.

Yazar Hakkında

1959 yılında Samsunda doğdu. 1989-2005 Yılları arasında Temsa, Mitsubishi, Sabancı Holding grubunda Otomotiv, Bilgi işlem ve Yazılım bölümlerinde Müdür olarak çalıştı. Adnan Güney, şu anda, Network Dizayn Yazılım ve Tasarım koordinatörü olarak çalışmalarına devam etmekte. Ayrıca Blogger, Wordpress, Tumblr, Google sites gibi alanlara ilgili olup, uzun yıllardır SEO ve Alexa üzerinde çalışmakta.

Yorum Yap

Yorumlar (6)

  1. İyi günler, Adnan Bey, söylediğiniz şeyleri yaparak bir açılır menü ayarladım. Yardımınız için çok teşekkür ederim. Ancak sorun yaşadığım bir iki nokta var, bunlara da yardım etmenizi bekliyorum:
    Blog: https://kalitekreatif.blogspot.com.tr/

    Bloga girince zaten açılır menüyü göreceksiniz.
    1-Açılır menüde ”Teknoloji” sekmesi altında 3 tane başlık var. İnternetten Para Kazanma başlığı sığmadığı için alt satıra geçmiş fakat gözükmüyor. O satırın boyutunu nasıl uzatabilirim?

    2-Açılır menünün sağ tarafına bakın beyaz bir boşluk var. (Arama kısmının hemen üzeri) Orada siyah bir çizgi var. O çizgiyi nasıl yok edebilirim?

    3-Ben menüde ”Lobster” yazı stilini kullanıyorum. Boyutunu değiştirmek istiyorum olmuyor.Sizin verdiğiniz kodlarda ”normal 12px Helvetica” bölümündeki Helvetica’yı değiştirdim Lobster yaptım fakat yazı stili değişmedi. Bende bu kodun tamamını silip yerine Lobster yazdım, yazı stili değişti. Ama bu seferde boyutta bir oynama yapamadım.

    • Kalite Kreatif Merhaba, Öncelikle yorum için teşekkür ederim. Hemen gözüme çapan kısımları size aktarayım. CCS kod kısmında width: 960px yazan rakamı temanızın düzenine göre 1280 genişlik olarak düzeltin. Uygunluk sağlamazsa bu rsksmlsrds değişiklik yaparak devam edin. Munu genişliği oturacaktır.
      Teknoloji kısmının oturması için şu yazıyı “Blogger Açılmayan Menü Çubuğu Nasıl Açılır Yapılır.” inceleyin.

      Kodlar ayrıca komplikedir. Değiştirebileceğinizi sanmıyorum. Ancak Googla yazı fontu ekleyerek tüm yazı fontlarında değişiklik yapabilirsiniz.

  2. Visitor Rating: 1 Stars

  3. Visitor Rating: 5 Stars

  4. Visitor Rating: 1 Stars

  5. Visitor Rating: 5 Stars

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.