Bloggerda Alt Kategorilere Sahip Menü Yapımı

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