13 Nisan 2015 Pazartesi

Bloğunuza Açılır Üst Menü Ekleyin!




Mutlu pazartesiler!

Bloğuma cuma gününden bu yana girenler varsa muhakkak farketmişlerdir. Önce bir güzel üst menüyü yok ettim, bugün sabah saatlerinde onu halledeyim derken şablondaki yerleşim düzenini mahfettim.Neyse ki öğlene doğru tamamen normale döndürebilmeyi becerebildim.



Aslına bakılırsa, bloğa üst menüyü ilk ekleyen Değmesin Yağlı Boya adlı sitenin sahibi olan Sevgi Abla idi. Zamanla kategoriler çoğalınca, bir deli cesareti göstererek üst menünün HTML'sini kendi kendime güncellemeye kalkıştım. Tabii sonuç hüsran. Var olan üst menü HTML kodundan da oldum.

Cuma günü denedim ancak başarılı olamadım. Haftasonunu vakit bulamadığım için bugün iş başa düştü. Birkaç deneme sonrasında bloğumu normale döndürmeyi sanırım başardım.

Hazır bu işin de üstesinden gelmişken, bloğuna üst menü eklemek isteyen, ancak nereden başlayacağını bilmeyen arkadaşlara yol gösterici olur düşüncesiyle,  üst menü ekleme işini anlatmak istedim.

Üst menü eklemenin birden çok yolu vardır belki ama ben yapılışını HTML kodu üzerinden anlatacağım.

İlk yaptığım şey, Sevgi Abla'nın eklemiş olduğu HTML kodunu incelemek oldu. Dikkatlice baktığımda tekrar eden bir kod yapısı olduğunu farkettim. Biraz internetten de araştırınca genel mantığı anladım. Mevzunun özü şuymuş aslında:  ( <li> ) ile başlayan ve ( </li> ) ile biten biten her kod, üst menüdeki yeni bir kategoriyi temsil ediyor.  
 
Ben bu taktikle, ayrı ayrı her kategoriyi alt alta sıraladım. Öyle ki, HTML kodunda yirmiye yakın kategorim oldu. Kaydedip görüntüleme yapınca bazı kategorilerin alt satıra düştüğünü ve onların da kullanılmaaz halde olduğunu farkettim. Sonradan deneme yanılma yöntemiyle kategori sayısını azaltınca kullanmış olduğum gadgetin sadece 11 etiketi kabul ettiğini farkettim. Bu nedenle bir kategoriyi birden çok alt kategoriye ayırmam gerekti.

Sevgi Ablanın hazırladığı HTML kodunu dikkatlice incelediğimde bir kategoriye ait diğer alt kategorilerin nasıl oluşturulduğunun mantığını da kavradım. Bunun için yapılması gereken, her kategorinin altına ( <ul> ) ile başlayan ve ( </ul>) ile biten açılır menü kodu eklemek. Bu şekilde, kodu her defasında kopyalayarak ikinci, üçüncü bir açılır menü kategorisi eklenebiliyor.

    Şimdi anlattıklarımı gösterebilmek için basit bir üst menü HTML si yazıyorum:



    <!-- start navmenu -->

    <div id='NavMenu'>

    <div id='NavMenuleft'>

    <ul id='nav'>


    <li><a href='LINK'>X</a></li>


    <li><a href='LINK'>Y</a>

    <ul>

    <li><a href='LINK'>Y1</a></li>

    <li><a href='LINK'>Y2</a></li>
    <li><a href='LINK'>Y3</a></li>
    </ul>

    </li>


    <li><a href='LINK'>Z</a>

    <ul>

    <li><a href='LINK'>Z1</a></li>

    <li><a href='LINK'>Z2</a></li>
    <li><a href='LINK'>Z3</a></li>
    </ul>

    </li>

    <li><a href='LINK'>Q</a></li>


    </ul></div>

    </div>

    <!-- end navmenu -->




    Yukarıda yazmış olduğum HTML koduna göre, benim üst menümde X, Y, Z ve Q olmak üzere dört kategori yer alıyor. Y ve Z kategorileri kendi içinde üçer alt kategoriye ayrılıyor. HTML kodunun başında yer alan kahverengi olan kodlar başlangıç ve bitişleri temsil ediyor.

    Peki üst menü oluşturma aşamalarım neler ve hangi yolları izledim?

    HTML kodunu oluşturmak için;
     Yukarıda vermiş olduğum HTML kodunu ve verdiğim talimatları izleyerek kategorilerimi alt alta çoğaltıyorum.

    (<li><a href='LINK'>X</a></li>)   ifadesinde tırnak içinde X yazan yere kategoride kümelenmesini istediğim etiket ismini, LINK yazan yere o etiketin URL'sini yazıyorum.
    Örneğin;

    (<li><a href='http://yenilerkendinihayat.blogspot.com/search/label/Kitap%20Yorumlar%C4%B1m'>KİTAP</a></li>)
     

    Etiketin URL'sini bulmak için;
    Etiket isminin URL sini bulmanın belki daha kolay yolu vardır ancak benim izlediğim yol şu şekilde: 

    Öncesinde, yazımı yazarken sağ kenarda yer alan Yayın Ayarları - Etiketler kısmına gelerek, yazı hakkında anahtar kelime hükmündeki etiketleri sıralıyorum. Yazıyı yayınladıktan sonra yazının en altında bu etiketler görünüyor. Bu etiketler içerisinde, üst menüdeki kategoride kümelenmesini istediğim etikete tıklıyorum. Karşınıza çıkan sayfada o etikete ait tüm yayınlar sıralanmış oluyor. İşte bu sayfanın URL'sini alıyorum ve LINK yazan yere yapıştırıyorum.  

    X,Y, Z yazan yerlere de üst menüde görülmesini istediğim kategori ismini yazıyorum. Tüm kategoriler ve alt kategorileri anlatmış olduğum gibi alt alta çoğaltarak sıralıyorum. Başlangıç ve bitiş kısımlarına da yukarıda ve aşağıda kahverengi ile belirttiğim kodları yazarak kapatıyorum.

    Üst menüyü blog şablonuna eklemek için;

    Blog ayarları kısmından, "Yerleşim" sekmesine tıklıyorum. Açılan sekmede bloğumun yerleşimi görülüyor. Blog ismimin yer aldığı "Yeniler Kendini Hayat (Üstbilgi)" gadgetinin altına yeni bir Gadget eklememiz gerekiyor. Bunun için, sağda görülen "Gadget Ekle" ye tıkladığım zaman, karşıma gadget listesi çıkıyor. Bu liste içerisinden HTML/Javascript Gadgetini ekliyorum. Açılan yeni sekmede HTML/Javascripti Yapılandır şeklinde yeni bir sekme açılacak, orada İçerik kısmına yazmış olduğum HTML kodunu ekleyip kaydet diyorum. Sonrasında yeniden Yerleşim sekmesine gelerek eklemiş olduğum gadgeti  "Yeniler Kendini Hayat (Üstbilgi)" gadgetinin altına sürüklüyorum.

    *

    Olabildiğince yalın anlatmaya çalıştım, umarım kafanızı daha fazla karıştırmamışımdır ^_^

    Bloğa üst menü eklemek aslında hiç zor değil,  mantığını anladıktan sonra HTML kod işi de gerçekten basit geliyor insana.

    Deneyecek olanlara tavsiyem, ilk seferde istediğiniz başarıya ulaşamazsanız sakın yılmayın, çünkü bendeniz tam 5. denememde başarılı oldum ^_^


     

    14 yorum:

    1. Çok bilgilendirici olmuş gerçekten. Bu konuda araştırma yapmama rağmen doyurucu bilgi edinememiştim. Teşekkürler :) Bu arada bloğunuzun takipçisi oldum. Bana da gelirseniz çok sevinirim... Sevgiler :)

      YanıtlaSil
    2. teşekkürler


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

      YanıtlaSil
    3. Bu güzel bilgilendirme için çok teşekkür ederim.Sayenizde blogumun menüsünü düzenleyebildim :)

      YanıtlaSil
    4. ben siyaharaba.blogspot.com.tr isminde bir blog açıyorum hocam fakat yüklediğim temada oluşturduğum menülerde yazı çıkmasını nasıl sağlayacağım? yazı yazdıktan sonra sürekli ana sayfa da çıkıyor ben menü içlerine nasıl yazı yazarım? şimdiden teşekkür ederim

      YanıtlaSil
    5. Sabahtan beri açılır menü konusunda okumadığım doküman ve sayfa kalmadı. Kimse layıkı ile anlatamamış. Yazınızı bir kez okudum ve anladım. Elinize kolunuza sağlık. Çok teşekkürler.

      YanıtlaSil
    6. Bu arada keşke bu açıklamaya, aynı menüye etiketin yanı sıra statik sayfa eklenmesinide dahil etseymişsiniz. çok isabetli olacakmış.

      YanıtlaSil
    7. Çook çok çok teşekkürler. :)

      YanıtlaSil
    8. menüye link i ekleme kısmını anlamadım :(

      YanıtlaSil
    9. harika bir bilgilendirme olmuş çok teşekkürler..

      YanıtlaSil
    10. Merhaba;
      Blogger üzerinde olan www.dikiskalipvepatronlari.com isimli siteme söylediğiniz kodları yerleştirmeye çabalıyorum üç gündür, benim içinde olması gereken kodlar bir türlü içine yerleşmedi, sanırım ben bir yerde hata yapıyorum ama nerede çözemedim :((( içindekiler de dışında görülüyor, tüm talimatlara uydum :( çıldıracağım!

      YanıtlaSil
    11. s.a mesela ANASAYFA katagorisi actım üst menude buna alt sayfa nasıl eklıcez ??

      YanıtlaSil
    12. Şu anki menünüzün stilini paylaşır mısınız :)

      YanıtlaSil
    13. Harika anlatmışsınız çok teşekkürler..

      YanıtlaSil

    Can-u gönülden yapılan birkaç satır kelamdır bu blog sahibesini sevindiren :)

    BLOG DESIGN-Değmesin Yağlı Boya