Enes İLHAN\ Bloggerda Tab Menü Yapımı 2

Blogger İpuçları 14 yorum 8.573 17 Eylül 2010

Daha önce şurada Blogger’da tab menü yapımını anlatmıştım. Bugün ise tab menü yapımının 2.bölümünü anlatacağım. Bugün kü anlatacağım tab menü ilkine nazaran daha görünüşlü ve daha estetik + ilkinden çok daha hızlı yükleniyor. Savaş Çalışkan arkadaşımız daha hızlı bir tab menü istemişti bu tab menü tam ona göre. Hemen bu menünün nasıl yapılacağına geçelim: Eklentinin çalışır haline ***DEMO*** adresinden bakabilirsiniz. Bu menü yapımının kod satırı ilkinden daha kısa olacak bunu bilmenizi isterim. Yani kısacası her bakımdan bu tab menü daha hoş geldi bana.

Öncelikle tab menümüzün CSS kodlarını </b:skin> kodundan önce ekliyoruz:

/*tab menümüz*/
ul.tabNav { float: left; list-style: none; width: 100%; }
ul.tabNav li { float: left; margin: 0 4px 0 0; padding: 4px 0 0;}
ul.tabNav li.current { padding-top: 0; }
ul.tabNav a { background: #EEE; border: 2px solid #CCC; border-width: 1px 1px 0; color: #333; display: block; padding: 4px 4px 5px 4px; text-decoration: none;}
ul.tabNav li.current a { background: #EEE; border-top: 2px solid #CCC;border-right: 2px solid #CCC;border-left: 2px solid #CCC; padding: 6px; }
div.tabContainer { clear: both; float: left; width: 100%; }
div.tabContainer div.tab {  background:#FFF; border: 2px solid #CCC; color: #000; display: none; padding: 10px;}
ul.tabNav a:hover {text-decoration:none;}
div.tabContainer div.current { display: block; background:#EEE;}
div.tab p:last-child { margin-bottom: 0; }
div.tabContainer ul li {background:#FFF;padding:0px;margin-left:15px;margin-bottom:1px;list-style-type:square;list-style-image:url(img/li.png);list-style-position:outside;}

CSS kodumuzu ekledikten sonra </head> kodundan önce şu kodları ekliyoruz:

<script src='http://konfor.enesilhan.net/js/jquery-1-4-2.js' type='text/javascript'/>
<script src='http://konfor.enesilhan.net/js/tabs-yeni.js' type='text/javascript'/>

Daha sonra da blogumuzun uygun bir yerine şu kodları ekleyerek tab menü yapımını tamamlıyoruz:

<!-- tab menu başlangıç -->
    <ul class='tabNav'>
    <li class='current'><a href='#'>Tab 1</a></li>
    <li><a href='#'>Tab 2</a></li>
    <li><a href='#'>Tab 3</a></li>

</ul>
<div class='tabContainer'>

    <!-- 1st tab -->
    <div class='tab current'>
<ul>
Birinci tab menü içeriği.
</ul>
    </div>

    <!-- 2nd tab -->
    <div class='tab'>
<ul>
İkinci tab menü içeriği.
</ul>
    </div>

    <!-- 3rd tab -->
    <div class='tab'>
<ul>
Üçüncü tab menü içeriği.
</ul>
    </div>

<!-- 4th tab -->
    <div class='tab'>
<ul>
Dördüncü tab menü içeriği.
</ul>
    </div>

<!-- 5th tab -->
    <div class='tab'>
<ul>
Beşinci tab menü içeriği.
</ul>
    </div>

<!-- 6th tab -->
    <div class='tab'>
<ul>
Altıncı tab menü içeriği.
</ul>
    </div>

</div><!-- tab menu bitiş -->

Ben 6 bölüm ekledim. Size 3 bölüm yetiyorsa kodlardan şu kısmı silersiniz:

<!-- 3rd tab -->
    <div class='tab'>
<ul>
Üçüncü tab menü içeriği.
</ul>
    </div>

<!-- 4th tab -->
    <div class='tab'>
<ul>
Dördüncü tab menü içeriği.
</ul>
    </div>

<!-- 5th tab -->
    <div class='tab'>
<ul>
Beşinci tab menü içeriği.
</ul>
    </div>

<!-- 6th tab -->
    <div class='tab'>
<ul>
Altıncı tab menü içeriği.
</ul>
    </div>

Takıldığınız yer olursa sorabilirsiniz, kolay gelsin arkadaşlar…

Bu yazıdan önce yazmış olduğum "Blogger Lazy Load JQuery Eklentisi" başlıklı yazımı da okumanızı tavsiye ederim.

Yorumlar ;

Anonymous
18 Eylül 2010 - 17:21:59

Birincisinden daha şık olmuş bu, teşekkürler.

Anonymous
23 Kasım 2010 - 01:36:49

I like reading your site because you can always bring us new and awesome stuff, I think that I ought to at least say thanks for your hard work.

– Henry

M.Ates
30 Kasım 2010 - 18:43:22

yapamadım arkadaşım heralde script kodları bozuk? çünkü düz yazı şeklinde gösteriliyor

Enes İLHAN
2 Aralık 2010 - 00:59:23

@M.Ates
Olmaması imkansız gibi bir şey çünkü bu anlattığım eklentiyi ben blogumda sağ sidebarda kullanıyorum. Yani kodlarda herhangi bir sorun yok, uygulama hatası yapmış olabilirsiniz.

bYdUyGuSaL
11 Aralık 2010 - 14:26:05

anlamadıgım bi olay var bu kodu konu eklerken kullandım çalıştı ama sidebara koyunca çalışmadı neden ???

Enes İLHAN
11 Aralık 2010 - 23:40:07

@bYdUyGuSaL
İnan bilmiyorum kardeşim ama dediğinde haklılık payı var çünkü bende konu içine değilde htlm'yi düzenle kısmından yapmıştım. Yani sidebardan eklemedim. O yüzden kodların içinden sidebara uygun yere yapıştırdım oldu, sende öyle bir dene bence.

bYdUyGuSaL
12 Aralık 2010 - 09:19:49

blogger kodlardan anlamam eklemek istedigim yeri bulamam yani…

Havlayan Kirpi
15 Aralık 2010 - 11:23:34

@bYdUyGuSaL,

Tab Menu adlı bir widget ekle. Daha sonra Html'ti Düzenle kısmından şablonları genişletip CTRL+F yardımıyla ara. Bulduktan sonra data.content gibi bir yazı olacak içinde o kısıma yapıştır tab menü kodlarını. Bu kadar anlamicak bişey yok.. 🙂

YepyeniBirben™
27 Nisan 2011 - 17:05:49

ekledim ama içerik ekleyemiyorum eklediğim zamanda tab menü çalışmıyor yardım lütfen enes kardeş… http://www.nettebilgi.com

Enes İLHAN
27 Nisan 2011 - 23:22:58

@YepyeniBirben™,
Bir yerlerde hata yapıyorsundur mutlaka. Aynı tab menüyü ben kullanıyorum sağ tarafta.

Caner
31 Temmuz 2011 - 12:31:36

Selam kardeşim konu çok güzel fakat ben içine resim eklemek istiyorum ama resim kodunu bilmiyorum onu söylermisin

12 Temmuz 2012 - 15:32:34

Merhaba Enes,

konfor.enesilhan.net subdomainini kaldırdığın için eklentiyi bloguma ekleyemiyorum. Gerekli .js dosyalarını nerden temin edebilirim?

7 Aralık 2012 - 19:35:45

Yah Demoyu bastan düzenlermisin sub domaini silmissinde demo yu olursa herkes daha cok yorum yazar….

15 Temmuz 2015 - 06:09:22

Çok başarılı site ama güncellenmiyor sanırım artık?