Drop Down Menü'nüzü (Açılır Menü'nüzü - Vertical/Horizontal ya da flyout fark etmiyor) kendiniz oluşturun.

Uzun zamandır beni sıkıntıya sokan bir konuya değinmek istiyorum bu blog'umda. Bir çok şablon araştırmama rağmen maalesef kendi istediğim menüye bir türlü rast gelememiştim. Bu yüzden kendi menümü kendim yapmaya karar verdim fakat bu sefer internetteki kaynak eksikliğinden bu konuda bayağı baş ağrısı çektim özellikle hazırladığım HTML kodları ve onları blogger üzerinde nereye yerleştireceğim konusunda. Hazır ben kendi sorunumu çözmüşken bunu blog'umda paylaşıp benim gibi bu konuda sıkıntı çeken arkadaşlar olursa onlarında derdine ufakta olsa çare olması için bu seminer blog'umu yazıyorum.

Amaç nedir? Amacımız kendi blog'umuzu yansıtacak bir drop down horizontal (düzey) yada vertical (dikey) flyout menü (açılır menü) oluşturmak. İngilizce adlarını da yazıyorum ki, netten bu konuda hakkında ingilizce arayarak daha detaylı araştırma yapabilesiniz diye. Bu seminerde anlatacaklarım kendi blog'umda ki drop down horizontal flyout menünün nasıl yapılacağı ile ilgili. Bunun mantığını kavradığınızda dikey, yatay, açılır menüsüz veya menülü çok rahat bir şekilde yapabileceğinizi düşünüyorum.(Şimdi yapacağımız işlemlere başlamadan önce blogger-->şablon ayarlarından herhangi bir soruna karşı şablonunuzun bir kopyası kaydetmenizi öneririm.)

Öncelikle şunu bilmenizi istiyorum, bu seminerde hiçbir yerde hiç bir şekilde hazır kod almayacağız. Kodları ve menü'nün görüntüsü tamamen kendimiz yazıp, şeklini ayarlayacağız. Karmaşık gibi gözükebilir ama aslında gözüktüğü gibi zor bir uygulama değil. İlk olarak istediğimiz menüyü yapabilmek için şu programı indiriyoruz. Ve menümüzün genel görüntüsünü ayarlıyoruz.

Sol en üst file tuşuna basarak örnek menüleri görüp onların arasından beğendiğimiz şablonu seçip, sol üstte yine 'add item ve add sub menü' tuşları ile ana tuşları ve onların alt tuşlarını ayarlıyoruz. Ben siteme uyumlu olması için mavi ve turuncu tonları kullandım. Ekranın sağındaki 'style' tuşundan renklerle değişiklik yapıp 'other' seçeneğinden tuşların genişliği ile oynama yapabilirsiniz isterseniz. Daha sonra sağda kırmızı içindeki bölümden butonların isimlerini değiştirebilir ve altta ki kırmızı kutudan da, insanlar blog'unuzda o sekmeye tıkladığında hangi sayfaya yönlendirmek istiyorsanız onun linkini ekleyebilirsiniz. Tuşların görünümü ve link eklemelerini tamamen bitirdiğinizde ekranın üstünde kırmızı kutu ile işaretlediğim 'save menu as HTML' ile kodları kolayca ulaşabileceğiniz bi klasör içine kaydediyoruz.

Şimdi kaydedilen klasörü açıyoruz. İçerisinden 7-8 tane dosya var. Bize lazım olan sadece iki tanesi. Bunlardan biri .css uzantılı. Css uzantılı olan text dosyasının içinde yazılı olan kodları tamamen kopyalıyoruz. Blogger sitemize girip şablon sekmesinden HTML düzenle diyoruz ve "]]></b:skin>" bu kodu arayıp buluyoruz.

Üstte gözüktüğü gibi kodun bir üstündeki satıra .css uzantılı text dosyasındaki bütün yazıyı kopyalıyoruz ve şablonumuzu kaydediyoruz.

Şimdi yine kaydettiğimiz kodlar arasındaki html. uzantılı index dosyasını açıyoruz.

İndex'i açınca ekrana böyle bir görüntü geliyor. Ekranın herhangi boş bir yerine mouse ile sağ tıklayıp sayfa kaynağını görüntüle diyoruz.

Ekrana gelen kısımda ul ile başlayıp ul ile biten kısmı kopyalıyoruz sadece. Yukardaki resimde kırmızı içine aldığım gibi. Ve tekrardan blogger-->şablon ayarlarından html düzenleye geliyoruz.


Burası işlemimizin son kısmı. Burda menünün nasıl gözükmesini istiyorsanız, ona göre kodu farklı iki yere yapıştırmamız gerekiyor. Ben kodumun direk header'ım altında ve ortalanmış şekilde gözükmesini istediğim için kodu şu şekilde yapıştırdım. Widget'a atla deyip direk header'ı seçtiğinizde ya da </b:section> diye arattığınızda alttaki görüntü gelecek ekrana. Kopyaladığımız kodu direk </b:section> 'ın alt satırına ekliyoruz. Ekran görüntüsü aşağıda.

Eğer menünüzün benim sayfamdaki gibi ortalanmış gözükmesi istemiyor direk sayfanın başından başlamasını istiyorsanız bu sefer index kayanğından kopyaladığınız kodu

<div class='content-outer'> kodunu aratıp hemen alt satırına kopyalıyoruz.