Blogger Sekmeli İçerik Kutusu Eklentisi
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.
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.
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.
YanıtlaSilTeşekkürler:)
önerilerinizin birini ekledim, şimdi bunu eklemeyi deneyeceğim...
YanıtlaSilSayenizde her geçen gün bloğumu daha çok seviyorum:)))
Teşekkürler :)
YanıtlaSilTeşekekkürler bu faydalı bilgiler için..
YanıtlaSilçok güzel bir paylaşım olmuş elinize sağlık ...
YanıtlaSilhocam teşekkürler aramıyodum desem yalan olcak (:
YanıtlaSilTeşekkürler. Faydalı olmuş.
YanıtlaSilharika deneyeceğim hızır abi.
YanıtlaSil@Dilek Dursun
YanıtlaSilMavi yeri değiştirdiğinize emin misiniz? Birden fazla tab1 var çünkü.
YAPTIM ŞİMDİ OLDU HOCAMMM
YanıtlaSilFAKAT YAZI UZUN GELDİ.TAG KISMI GENİŞLETİLEBİLİR Mİ?
YanıtlaSilwidth:50px; bu değeri arttırın.
YanıtlaSilEVET OLDUUU...
YanıtlaSilhocam paylaşımlarınız için çok teşekkür ederim
YanıtlaSilmerhaba, videoyu nasıl ekleyeceğiz. youtube videosunu.
YanıtlaSilgayet güzel sağolun.
YanıtlaSilçok işime yaradı gayet güzel.
YanıtlaSilHocam çok güzel bir eklenti teşekkür ederim..
YanıtlaSilYalnız eklentinin boyutunu büyültme konusunda yardımını rica ediyorum...
Teşekkürler...
sezer alttaki gibi width değerini ayarlıyabilirsin
YanıtlaSil#container {
width: 612px;
margin: 0 auto;
}
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ıtlaSilserdar 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@Derin Uzay
YanıtlaSilMor renkle gösterdiğim yere o sekmede göstermek istediğiniz gadgetı kodlarını koyabilirsiniz.
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ıtlaSilGadget eklediğinizde HTML düzenle bölümünde o gadgeta ait kodları görebilirsiniz.
YanıtlaSilMerhaba; İçerik olarak
YanıtlaSilTAB1 '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.
Hocam Merhaba,
YanıtlaSilTab menu sisteminı yazı içerisinde örneğin bir kaç video için yapabilirmiyiz?
Canlı tv sitesinde tab menu ile yazılarda alternatif videolar eklemek?
@Uğur Can Bek
YanıtlaSilBir 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.
Eyvallah kardeşim çok makbule geçti
YanıtlaSilHocam ben bunu sayfaya eklemek istiyorum ancak sayfada olmuyor.
YanıtlaSil