Bloggerda Tab Menü Yapımı 2

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.

Herkese Merhabalar, ben Enes İLHAN. Gaziantep'te doğdum, Adana'da Büro Yönetimi ve Yönetici Asistanlığı bölümünü okudum ve 2012'de mezun oldum. Askerliğimi uzun dönem olarak, { acemiliği Ankara/Mamak'ta , usta birliğini ise Hatay/İskenderun'da } yapıp bitirmiş bulunmaktayım. Şimdi ise hayata atılmanın çabası içerisine girmiş bulunmakta olup iş bulma derdindeyim.

14 yorum

  1. Anonymous   •  

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

  2. Anonymous   •  

    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

  3. M.Ates   •  

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

  4. Enes İLHAN   •  

    @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.

  5. bYdUyGuSaL   •  

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

  6. Enes İLHAN   •  

    @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.

  7. bYdUyGuSaL   •  

    blogger kodlardan anlamam eklemek istedigim yeri bulamam yani…

  8. Havlayan Kirpi   •  

    @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.. 🙂

  9. YepyeniBirben™   •  

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

  10. Enes İLHAN   •  

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

  11. Caner   •  

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

  12. tinlamazmodunda   •  

    Merhaba Enes,

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

  13. Serhat Gency   •  

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

  14. Haberler   •  

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

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir