01 Temmuz 2009

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ı
Yorum
NurullahAslan dedi ki...
Blogumda uyguladım uygulama esnasında sorun olmadı.. Gadget ekleme tabı yerleşim bölümünde sağ üstte gözüktü.. FAkat düzgün çalışmadığını farkettim.. Sağ tarafta tabların altındaki sütuna başka gadgetler ekli olduğunda sorun çıkarıyor tablara tıkladığımda sayfanın aşağısına doğru indiriyor..
Tam yüklenmeden sekmelerden birine tıkladığım zaman adresimin sonunda /arc gibi farklı linkler çıkıyor ve tablar tamamen kayboluyor..

Çok net ve güzel bir anlatım belki benim temamdan kaynaklanıyordur ilerde tekrar deneyeceğim teşekkürler anlatımınız için
Sade dedi ki...
Sorunsuz şekilde uygulamayı bloguna kurmana sevindim. Anlatımı en kısa sürede uygulaman ve yorum yazmandan dolayı da çok teşekkür ediyorum.

Yaşadığın sorun ise sanırım; blogların çalışma sürelerine ve yüklenme sürelerine etki eden faktörlerden kaynaklanıyor. fazla şekilde .js uzantılı dosya barındırmak, çok fazla eklentiye sahip olmak, internet bağlantıları... vb. etkenlere takılmış olabilirsin.

Zira 2 farklı temaya sahip 2 farklı blogda denedim ve herhangi bir sorunla karşılaşmadım.

Bloglarda nasıl göründüğüne dair fikir edinmek için bu ve ya bu adresleri ziyaret edebilirsin.

* /#arc, /#recent ve ya /#cat Bunlar sayfa tamamen yüklendiğinde farklı sayfalara yönlendirilmeden sayfa için de aynı alanda 3 farklı eklentiyi göstermek için kullanılıyor.

Yüklenmeden eklentilere tıkladığında da ; dediğin gibi /#arc, /#recent ve ya /#cat adreslerine yönlendirilirsin.
NurullahAslan dedi ki...
Sayfamda biraz fazla js dosyaları olduğunu kabul ediyorum belki onlarla bi çakışma vardır sorun olması ondan olablir.. İlerde tema değişikliği biraz daha sade bi görünüm gibi tercihim olursa bu anlatımı tekrar uygulayacağım işe yarayacağını düşünüyorum.. Bu güzel eklentiden ve blogunuzdaki diğer eklentilerden,anlatımlarınızdan istifadeleniyoruz emeğinize sağlık takipteyiz...
Sade dedi ki...
Çakışma olduğunu düşünmüyorum. Daha çok şöyle düşünebiliriz. Sayfa yüklenmeye başlandığından itibaren sayfa ögelerinde görünen bloklar halinde yüklemeye başlar sonra o her blokta yer alan özellikleri tek tek yüklemeye çalışır. Benim daha önceki temamda da buna benzer bir yüklenme süresi sorunu yaşamıştım. Ve eklemiş olduğım özeeliklerin bazılarından feragat ederek yüklenme süresini kısaltmaya çalıştım. Sizede bunu önerebilirim. En işinize yarayabilecek özellikleri seçip onları blogunuza ekleyin. Kolay gelsin.
Maddins dedi ki...
merhaba güzel bir eklenti acaba son yorumları nasıl gösterebilriz...
Sade dedi ki...
açıkcası bir çok farklı sitede bu bilgi yer aldığı için blogda yer vermedim. Ancak benzer bir blog olan kültür mantarı isimli siteden bu bilgilere ulaşabilirsiniz; http://www.kulturmantari.org/2009/03/minimal-bir-son-yorumlar-eklentisi.html veya http://www.kulturmantari.org/2009/02/blogger-icin-son-yorumlar-eklentisi.html adreslerini ziyaret etmenizi öneririm. Kolay gelsin...
now dedi ki...
Haftalarca araştırdığım bir konuydu.. Fakat sonunda senin bu makaleni buldum.. En kullanışlısı ve düzgün olanı seninki.. Bu konu hakkında biraz daha bilgi verip çeşit sunabilir misiniz?

Mesela=

1-) Sütunun en üst kısmı değilde alt kısmına yerleştirilmesi..

2-)Bunu resimli hale nasıl getiririz (örn.; wordpress'ten blgger'a entegre edilen bir temada, adı "mystique", böyle bir şey var..

bunlar -araştırdığım ama bulamadığım bir kaç tab menü örneği- ı yapmada yardımcı olursanız çok sevinirim..


Baki Selamlar
Arzu Çevikalp dedi ki...
Arkadaş biri nolu şu sekmeli buton işini yapabilir mi benim adıma sitemi vereyim?
Mehmet San. dedi ki...
.Js Dosyasının İndirme Linkini Yenileyebilirmisiniz