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 ^_^