29 Mayıs 2013 Çarşamba

Blogger Sekmeli İçerik Kutusu Eklentisi

29 yorum

Blogunuzun sidebarına ekleyeceğiniz bu eklenti ile tek bir gadgetlık alana birden fazla gadget sığdırabileceksiniz. Nasıl mı? Bu eklentide tab yani sekmeler bulunuyor. Her bir sekmeye farklı içerik ekeyebiliyorsunuz. İster resim, ister metin, ister video. Böylece hem kullanışlı hem de şık bir sidebar eklentisine sahip olabileceksiniz.

 

Tabbed Gadget

Eklenti resimde gördüğünüz şekldedir. Bu eklentiyi blogunuza eklemek için Blogger kumanda paneline girdikten sonra Yerleşim > Gadet Ekle > HTML/JavaScript yolunu izleyerek aşağıdaki kodları yapıştırmanız yeterli.

 

<!-- Blog Hocam Sekmeli İçerik Menüsü -->
<style type="text/css">
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
width: 100%;
}

ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 4px ;
height: 31px;
line-height: 21px;
border: 1px solid #999999;
border-left: none;
font-weight: bold;
background: #EEEEEE;
overflow: hidden;
position: relative;
width:50px;
}

ul.tabs li:hover {
background: #CCCCCC;
}

ul.tabs li.active{
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

.tab_container {
border: 1px solid #999999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}

.tab_content {
padding: 10px;
font-size: 1.2em;
display: none;
}

#container {
width: 280px;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
</script>

<div id="container">
<ul class="tabs">
<li class="active" rel="tab1">Tab1</li>
<li rel="tab2">Tab2</li>
<li rel="tab3">Tab3</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p>İçerik
</p>
</div>
<div id="tab2" class="tab_content">
<p>İçerik
</p>
</div>
<div id="tab3" class="tab_content">
<p>İçerik
</p>
</div>
</div>
</div>
<!-- Blog Hocam Sekmeli İçerik Menüsü -->

 

- Kodlarda mavi renkle gösterdiğim Tab1, Tab2, Tab3 yazan yerler sekmelerin başlıklarıdır. Örneğin 1. sekmenin içeriğine favori linklerinizi koyacaksanız Tab1 başlığını Linkler olarak değiştirebilirsiniz.

 

- Mor renkle gösterdiğim yerlere o sekmeye ait içeriğin HTML kodlarını yazabilirsiniz. Sekme içerisinde resim göstermek için oraya şöyle bir kod ekleyebilirsiniz:

 

<img src="https://resim.png" />


Takıldığınız bir yer olursa yorum bölümünden sorabilirsiniz.

29 yorum:

  1. Ben de geçenlerde yabancı bir sitede görmüş ve çok sevmiştim bu eklentiyi. Uğraşmayı gözümün kestiği bir ara deneyeceğim.
    Teşekkürler:)

    YanıtlaSil
  2. önerilerinizin birini ekledim, şimdi bunu eklemeyi deneyeceğim...
    Sayenizde her geçen gün bloğumu daha çok seviyorum:)))

    YanıtlaSil
  3. Teşekekkürler bu faydalı bilgiler için..

    YanıtlaSil
  4. çok güzel bir paylaşım olmuş elinize sağlık ...

    YanıtlaSil
  5. hocam teşekkürler aramıyodum desem yalan olcak (:

    YanıtlaSil
  6. harika deneyeceğim hızır abi.

    YanıtlaSil
  7. @Dilek Dursun
    Mavi yeri değiştirdiğinize emin misiniz? Birden fazla tab1 var çünkü.

    YanıtlaSil
  8. FAKAT YAZI UZUN GELDİ.TAG KISMI GENİŞLETİLEBİLİR Mİ?

    YanıtlaSil
  9. width:50px; bu değeri arttırın.

    YanıtlaSil
  10. hocam paylaşımlarınız için çok teşekkür ederim

    YanıtlaSil
  11. merhaba, videoyu nasıl ekleyeceğiz. youtube videosunu.

    YanıtlaSil
  12. gayet güzel sağolun.

    YanıtlaSil
  13. çok işime yaradı gayet güzel.

    YanıtlaSil
  14. Hocam çok güzel bir eklenti teşekkür ederim..
    Yalnız eklentinin boyutunu büyültme konusunda yardımını rica ediyorum...
    Teşekkürler...

    YanıtlaSil
  15. sezer alttaki gibi width değerini ayarlıyabilirsin

    #container {
    width: 612px;
    margin: 0 auto;
    }

    YanıtlaSil
  16. kutuyu kayıt içerisinde kullanıyordum. bir adreste problemsiz çalıştı. başka bir temada denediğimde yayının sola kaymasına sebep oldu. nasıl düzeltebiliriz acaba?

    YanıtlaSil
  17. serdar hocam peki bu sekmeleri özelleştirebilir miyiz, ben mesela ilk tab kısma popüler yazılarımı ikinci tab kısma ise etiketleri koymak istiyorum?

    YanıtlaSil
  18. @Derin Uzay
    Mor renkle gösterdiğim yere o sekmede göstermek istediğiniz gadgetı kodlarını koyabilirsiniz.

    YanıtlaSil
  19. Teşekkür ederim. sanırım benim sorunum o kodların ne olduğunu bilmemem. html sayfamda hangi kodlar oluyor acaba bu gadget kodları ?

    YanıtlaSil
  20. Gadget eklediğinizde HTML düzenle bölümünde o gadgeta ait kodları görebilirsiniz.

    YanıtlaSil
  21. Merhaba; İçerik olarak
    TAB1 'de Haber kategorisi
    TAB2'de Spor kategorisi
    TAB3'de magazin kategorisini gostermek istiyoırum
    bunun için ne yapmam lazım. Kodları widgetlere uyguladım amabaşarılı olamadım.

    YanıtlaSil
  22. Hocam Merhaba,
    Tab menu sisteminı yazı içerisinde örneğin bir kaç video için yapabilirmiyiz?
    Canlı tv sitesinde tab menu ile yazılarda alternatif videolar eklemek?

    YanıtlaSil
  23. @Uğur Can Bek
    Bir farkı yok. Aynı kodlarla yapabilirsiniz. Stil kodlarını şablonun css bölümüne ekleyin, javascripti body içine, HTTML kodlarını da direkt yazı içine.

    YanıtlaSil
  24. Eyvallah kardeşim çok makbule geçti

    YanıtlaSil
  25. Hocam ben bunu sayfaya eklemek istiyorum ancak sayfada olmuyor.

    YanıtlaSil

Picardes

LİNKLER