Sekmeli Navigasyon Menü Yapımı (Tabbed Navigation System)

Sütunlara yerleştirilebilecek "Sekmeli Navigasyon Menüsü" (Tabbed Navigation System) özellikle yerim dar bahanesine sığınmaya çalışanlar için şık, kullanışlı ve alternatif bir menü. Blogger Buster isimli blogda daha önce "Tabbed Sidebar Navigation for Recent Posts, Labels and Archives" konu başlığı altında ele alınmış ve Sütunlarda Son Yazılar, Etiketler ve Arşiv eklentilerini aynı alanda Sekmeli Menü yardımı ile nasıl gösterebileceğimizi anlatmış. Farklı sitelerden farklı yöntemler izlenerek bu menüyü blogunuza ekleyebilirsiniz. Farklı sitelerin "Sekmeli Navigasyon Menüsü Yapımı" için önerilerini değerlendirdiğimde iki tür sorun ile karşılaştım. Bunlardan birincisi hız faktörü, çok yavaş çalıştıkları için blogun çalışma hızına negatif etki etti. İkincisi de harici .js dosyalarını kullanmaları oldu. Fakat bu anlatacağım yöntem nispeten diğer yöntemlere göre daha hızlı ve herhangi bir harici dosyaya ihtiyaç duymuyor.

Anlatım kısmına geçmeden önce; Blogger'a kullanıcı adınız ve şifrenizle giriş yapın ve temanızın bir yedeğini almanızı öneririm.

Yükleme
Öncelikle .js uzantılı dosyayı bilgisayarınıza yüklemeli ve kaydetmelisiniz. Bunun için şu adreste yer alan dosyayı bilgisayarınıza indirin ve kaydedin. Bu dosyayı yükleyici sitelerden birine yükleyin. Ben bu dosyayı yüklemek için hem .js uzantılı dosya yüklebilme hemde istenilen süre boyunca saklama opsiyonu sebebiyle bir blog sistemi olan weebly'yi tercih ettim. Ayrıca, Blogger'da JavaScript Nasıl Kullanılabilir? isimli yazımdan yardım alabilirsiniz. Sizlerin farklı yükleyici site önerileriniz varsa yorum kısmında belirtebilirsiniz.

Dosyayı herhangi bir yükleyici siteye yüklediğinizi varsayarak devam ediyorum.
Yerleşim > HTML'yi Düzenle > Widget Şablonlarını Genişlet' e tıklayın. Ve "Ctrl+F" yardımı ile </head> kodundan önce alttaki kodu yapıştırın.

<script src='http://www.weebly.com/uploads/2/2/1/0/2210502/domtab.js' type='text/javascript'> </script>

Yukarıdaki kodda kırmızı ile renklendirilmiş .js uzantılı dosyayı ihtiva eden web adresi yerine yükleyici siteye yüklemiş olduğunuz .js uzantılı dosyanın web adresini yapıştırmayı unutmayın.

Düzenlemeler
Sekmelerin şeklini şemalini belirleyebileceğiniz CSS kodlarını temanzıda CTRL+F yarımı ile bulabileceğiniz ]]</b:skin> kodundan hemen önce yapıştırın.

/*main container*/
div.domtab {margin: 0; padding: 0;}

/*tabs*/
ul.domtabs {float: left; margin: 0; padding: 0;}

ul.domtabs li {
background: #999;
float: left;
margin: 0 2px 0 0;
padding: 2px 3px;
text-align: center;
}

ul.domtabs li:hover, ul.domtabs li.active {background: #CCC;}
ul.domtabs li a {color: #333; font-weight: bold; text-decoration: none;}

/*tabs containers*/
div.domtab div.tab-container {
border: 3px solid #ccc;
clear: both;
display: block;
padding: 10px;
}

Bu kısımda Menü başlıkları için arka plan, kenarlık, metin renkleri, hızalama, özellikleri mevcuttur. Menü başlıklarına tıklandığında hemen altında açılacak eklentilerin arka plan, renk, metin renkleri sizin temanızda sütunlarınız için kullandığınız özelliklerle aynı olacaktır. "Temama uyum sağlamazsa" gibi bir endişeye kapılmanıza gerek yok.

Renkler

#CCC : Sekmeli Navigasyon Menünün sınır renklerini ve aktif olan menünün arka plan renginin kodudur.

#999 : Aktif olmayan menülerin arka plan rengidir.

#333 : Menülerde yer alan başlıklarının yazı rengidir.

Bu renkleri temanıza uygun şekilde düzenleyebilirsiniz. Renk Paletleri için Web 2.0 Colour Palette adresini ziyaret edebilirsiniz.

Genişlik
Bu eklenti sütununuzun en üst kısmında yer alacak ve özellikle 220px genişliğindeki sütunlar için mükemmel bir uyum göstermektedir. Sekmeler ayrı ayrı boyutlandırılamaz, sadece eklenti başlıklarınıza göre kendiliğinden boyutlanacaktır. Çok uzun eklenti başlıkları kullanmamanızı öneririm. 220px genişlikte bir sütuna 3'lu sekme eklemek en uygunudur. Üçten fazla sekme kullanmak isteyenler görsel olarak bir felaketle karşılaşabilirler. Esas konu sütununuza uygun sekme ayarı yapabilmektir.

Son Yazılar, Etiketler, Arşiv Eklentileri

Adım 1: "Ctrl+F" yardımı ile alttaki kodu bulun;

<b:section class='sidebar' id='sidebar' preferred='yes'>

Adım 2: Yukarıda bulduğunuz kodun yukarısına alttaki kodu yapıştırın;

<div class='domtab'>

<ul class='domtabs'>
<li><a href='#recent'>Son Yazılar</a></li>
<li><a href='#cat'>Etiket</a></li>
<li><a href='#arc'>Arşiv</a></li>
</ul>

<div class='tab-container'>
<a id='recent' name='recent'></a>
<b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'>
<b:widget id='Feed99' locked='false' title='' type='Feed'/>
</b:section>
</div>

<div class='tab-container'>
<a id='cat' name='cat'></a>
<b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'>
<b:widget id='Label99' locked='false' title='' type='Label'/>
</b:section>
</div>

<div class='tab-container'>
<a id='arc' name='arc'></a>
<b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'>
<b:widget id='BlogArchive99' locked='false' title='' type='BlogArchive'/>
</b:section>
</div>

</div>

Yukarıda kırmızı ile renklendirilmiş olan Son Yazılar, Etiket ve Arşiv başlıklarını kendinize özgü değiştirebilirsiniz.

Adım 3: Şablonunuzu görüntüleyin ve eğer herhangi bir hata ile karşılaşmıyorsanız şablonunuzu kaydedin.

Adım 4: Şablonunuzu kaydettikten sonra Sayfa ögelerinizi görüntüleyin sütununuzun en üst kısmında Sekmeli Navigasyon Menüsünü görebilirsiniz. Menü başlıklarına tıklayarak eklenen gadgetleri düzenleyebilirsiniz.

DEMO : Blogda Nasıl göründüğüne dair fikir edinmek isteyenler bu veya bu adresi ziyaret edebilirler.

Not: Eğer Son Yazılar eklentisi tam olarak açılmıyorsa. Temanızda Widget Şablonu genişlet kutucuğuna tıklamadan alttaki kodu aratın;

<b:widget id='Feed99' locked='false' title='' type='Feed'/>

Bulmuş olduğunuz bu kodu silin ve şablonu kaydedin. "Lütfen aşağıdaki widget’ların silinmesi gerektiğini doğrulayın. Tüm widget’ların yapılandırma verileri kaybolacak." Şeklinde bir uyarı alacaksınız. Onaylayın ve eklentiyi silin. Tekrar sayfa ögelerine gelin ve Son Yazılar başlığına tıklayıp, "İçerik Takibi" isimli gadgeti ekleyin. Sitenizin beslemesini yazın ve kaydedin.

Kolay Gelsin...

Benzer Yazılar;
Pratik Yatay Menü
Alt Kategorili Menü
Sidebar'ınızı Menü ile Şenlendirin
Hareketli Menü
Multi Açılır Menü
Gizli yazı imkanı