02 Temmuz 2009

Bloglarda Menü Seçenekleri:

Dinamik, enerjik yerinde duramayan bir menü isteyenler için “Blogunuzun Solunda Harekeli Menü” ya da başlık alanının (Header) altına konumlandırılabilecek ve kodlarla pek uğraşmak istemeyenler için “Yatay Menü” ideal seçimler olabilir.

Her menünün kendine özgü bir artısı var. Seçenekler çok, seçim hakkı sizde! İstediğiniz tür bir menüyü blogunuza adapte edebilirsiniz. Peki, bu menünün diğer iki menüden farkı nedir?

Yatay menüde olduğu gibi menüde yer alan kategorilerin üzerine fare yardımı ile gelindiğinde renk değiştirme özelliğine sahip olduğu gibi yatay menüden farklı olarak şu özelliğe sahip; menüde yer alan kategori seçeneklerinin üstüne fare yardımı ile gelindiğinde alta doğru alt kategoriler ekleyebilme. Bu seçenek tamamen isteğe bağlı. Menüyü kategorize ederken benzer kategorileri bir başlık altında derleyip toparlayabilirsiniz.

Ancak bu menünün “Yatay Menüye” göre bir dezavantajı şu; Menüde değişiklik yapmak istendiğinde temanıza müdahale etmek gerekiyor. Tabi bu kodlarla arası iyi olanlar için pek büyük bir dezavantaj değil. Daha çok yeni başlayanların ya da temaya kod eklemeye üşenenlerin dikkatini çekmek istedim.

”Alt Kategorilere Sahip Menü” için neler yapmak gerekiyor?

Adım 1: Öncelikle başlık alanının genişliğini temamızdan öğrenmemiz ve bir yere not etmemiz gerekiyor. Çünkü eklenecek olan menünün yerini yine başlık alanının altına konumlandıracağız ve eğer başlık alanı ile menü genişlikleri farklı olursa uyumsuzluk meydana gelecektir.

Başlık alanının genişliğini bulmak için; Ctrl+F tuşları yardımı ile #header-wrapper şeklinde arama yapın. Bulduğunuz kodun hemen altında yer alan width:660px başlık alanının genişliğini gösterir. 660 değeri kullandığınız temaya göre değişik olabilir. Bu öğrendiğimiz başlık genişliğini bir yere not edin.

Adım 2: Öncelikle blogger hesabınıza kullanıcı adınız ve şifreniz ile giriş yapın. Menü Eklemek istediğiniz blogunuzun Yerleşim kısmına tıklayın. Açılan sayfada HTML düzenle seçeneğine tıklayın. Açılan sayfada Widget Şablonlarını Genişlet yazısının yanında yer alan kutucuğa tıklayın. Ctrl+F yardımı ile </b:skin> kodunu aratın.

Bulduğunuz kodun hemen yukarısına alttaki CSS kodlarını yapıştırın.
/* ----- LINKBAR ----- */
#bg_nav {
background: #000;
width: 660px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333;
border-bottom: 1px solid #000;
overflow: hidden;
}

#bg_nav a, #bg_nav a:visited {
color: #FFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #FFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 720px;
float: left;
margin: 0px;
padding: 0px;
}

#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}

#navright a img {
border: none;
margin: 0px;
padding: 0px;
}


#nav {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #222;
color: #FFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px;
border-left: 1px solid #000;
}

#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}

#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

#nav li li a:hover, #nav li li a:active {
background: #666;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}


Şimdi yukarıdaki CSS kodunda kırmızı ile renklendirilmiş olan üç haneli rakamın yerine not etmiş olduğunuz Başlık alanı genişliğinizi yazın.

Adım 3: Bilgisayarınızda Yeni bir Metin (Not Defteri) belgesi oluşturun. Ve alttaki kodu yeni metin belgesine yapıştırın.
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<li><a href='http://BLOGADI.blogspot.com'>Ana Sayfa</a></li>
<li><a href='http://BLOGADI.blogspot.com'>Hakkımda</a></li>
<li><a href='http://BLOGADI.blogspot.com'>İletişim</a></li>
<li><a href='http://BLOGADI.blogspot.com'>YAN MENU</a></li>
<li><a href='http://BLOGADI.blogspot.com'>YANA MENU</a></li>
<li><a href='http://BLOGADI.blogspot.com'>YANDAN MENU</a></li>
<li><a href='http://BLOGADI.blogspot.com'>ALT MENU AÇILIR</a>
<ul class='children'>
<li><a href='http://BLOGADI.blogspot.com'>ALT MENULER</a></li>
<li><a href='http://BLOGADI.blogspot.com'>ALT MENULER</a></li>
<li><a href='http://BLOGADI.blogspot.com'>ALT MENULER</a></li>
<li><a href='http://BLOGADI.blogspot.com'>ALT MENULER</a></li>
</ul>
</li>
</div>
</div>
</div>
Yukarıda yer alan kodda yapılması gereken değişikleri yapın. Örnek: +/- Tıkla, Gör! Tıkla, Gizle!



Yukarıdaki kodda ne gibi bir değişiklik yapılmalı?

* Anasayfa, Hakkımda, İletişim, Yan Menü, Yana Menü, Yandan Menü, Alt Menü Açılır, Alt Menüler başlıklarını kendinize özgü uyarlayın.

* http://BLOGADI.blogspot.com yazan alanlara yukarıda vermiş olduğunuz Menü İsimlerine uygun web adreslerini girin. Değişikliklerinizi bitirdikten sonra Yeni Metin Belgesini kaydedin.

Adım 4: Temanızda Ctrl+F tuşları yardımı ile alttaki kodu aratın.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Başlık Alanı' type='Header'/>
</b:section>
</div>
Bulmuş olduğunuz bu kodun altına Yeni Metin Belgesinde düzenlemiş olduğunuz kodu yapıştırın. Şablonunuzu görüntüleyin. Herhangi bir hata vermiyorsa şablonunuzu kaydedin.

Kolay gelsin.

Benzer Yazılar;
Pratik Yatay Menü
Sidebar'ınızı Menü ile Şenlendirin
Hareketli Menü
Multi Açılır Menü
Gizli yazı imkanı
Tabbed Menu
Yorum
NurullahAslan dedi ki...
Deneme sayfamda Yapmaya çalıştım ama olmadı:( Tekrar deneyeceğim sakin bir kafa ile.. Bazı temalarda kendiliğinden açılır menü oluyor ama olmayanlarda çok güzel bi eklenti...
Sade dedi ki...
Merhaba Nurullah, anlatımdakileri adım adım yaptığınızda örnek blogtaki gibi bir görünüme sahip menünüz olacaktır. Aksi bir durumla karşılaşırsanız lütfen yorumlar kısmına yazınız, en kısa zamanda yardımcı olmaya çalışırım. Kolay gelsin.
Simyacı dedi ki...
eline sağlık airrivalstr.blogspot.com da denedim güzel oldu bu menüyü dahda alt menüler olarak genişlemek mümkün mü acaba
Sade dedi ki...
Bu anlatımdaki menü ile sadece tek alt menü yapılabilir.
MSNerkiz dedi ki...
+/- Ttıkla, CSS Kodlarını Gör! Tıkla, Gizle! yazısına tıklayınca kodlar açılmıyor.düzeltin lütfen.
Sade dedi ki...
"Tıkla gizle, tıkla gör" kodunu blogumda kullanıp kullanmama arasında kaldığım bir anda siz yakalamışsınız. Şimdi herşey çok daha güzel! Buyrun...
mertkan dedi ki...
meraba.yukarıdaki kategoriyi yaptım ama içini nasıl doldurabilirim bilmiyorum
Sade dedi ki...
Adım 3'te yer alan http://BLOGADI.blogspot.com yerine yönlendirmek istediğiniz adresi, ALT MENULER gibi başlıklarada o adrese uygun isimleri vermeniz yeterli. Ekstra alt kategıri yaomak için children kodundan bir tane daha ekleyebilirsiniz.
Adsız dedi ki...
Ana basliklar gorunuyor linkleri de calisiyor ama ana basligin ustune gelince veya tiklayinca alt sayfalar gorunmuyor nasil yapicam//
GBlogger dedi ki...
Merhaba bu menüyü bende kullandım ve en işime yarayan da bu oldu tşk ederim.
Ama şöyle bi sorun var menülerin hemen altında youtube videoları var ve menüye tıklayınca yarısı videonun altında kalıyor :)

Firefox da sorun yok doğru düzgün görünüyor ama explorer ve chrome de durum dediğim gibi. Java koduna kaydırma çubuğu eklenemez mi? Yada expl da düzgün görünmesi için bir ek?
B&B KOZMETİK VE EV TEKSTİLİ dedi ki...
yukarıda yazılanları adım adım yaptım ama sayfamda her hangi bi alt menü oluşmadı.sayfam ilk hali gibi duruyor.'http://BLOGADI.blogspot.com' adresine diğer blog adreslerimi yazdım.acaba hatam buradan kaynaklanabilirmi? vereceğiniz cvp için şimdiiden teşekkür ederim.
gez-ye-ic dedi ki...
Tekrar Merhaba Sade,
Bu güzel menüyü test bloguma uyguladım. ( www.gezensello.blogspot.com)
Fakat, açılır menü, o andaki ekrandaki resimlerin altında kalıyor. Üste çıkarmak için ne yapmak gerekir.
şimdiden teşekkürler
gül dedi ki...
yaptım oldu, çok güzel bir anlatım sağolun. Sormak istediğim şey şu, menüde bir sekmeye tıkladığımızda tek bir yazı görünmemesi için, o sekmeyle ilgili(mesela sinema diyelim) bütün alt yazıların(mesela yazdığım tüm film değerlendirmelerinin) çıkması için ne yapmak gerekir. Başka bir yere mi yükleyip link vermek gerekir?

2.sorum, alt menüler açıldığında da aynı sorunu yaşamamak için, sayfa alt alta beş on tane yazı görebilmek için ne yapmak gerekir?

sağolun.
# Magic Girls # dedi ki...
Şu kodlarda takıldım:

div id='header-wrapper'>


//burdan sonra arada birsürü kod var, not defterindekileri tam olarak nereye yapıştırıyoruz. acil cevappp ltfen.


div>
Adsız dedi ki...
eline sağlık

Download Sitesi
www.yuklex.blogspot.com