Bazı bloglarda 3 veya 2 sekmenin birleştirilmiş olduğunu görürsünüz. Çoklu Sekme Widgeti hem bloğa güzel bir görünüm sağlar hemde blog yükleme hızını iyileştirir. Peki biz bunu nasıl yapabiliriz?

Blogger'e Çoklu Sekme Özelliği Ekleme

  • Blogger kumanda panelindeki "Tema" bölümüne gelin.
  • "HTML'yi düzenle" butonuna basarak "</head> "etiketini bulun.
  • Aşağıdaki kodu bu etiketin üstüne yapıştırın ve temayı kaydedin.
<script type='text/javascript'>


//<![CDATA[


function tabtampil_oom(TPID, id)     
{       
  var Tabtampil = document.getElementById(TPID);       
  var TTs = Tabtampil.firstChild;       
  while (TTs.className != "TTs" ) TTs = TTs.nextSibling;       
  var TT = TTs.firstChild;       
  var i   = 0;       
  do       
  {       
    if (TT.tagName == "A")       
    {       
      i++;       
      TT.href      = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";       
      TT.className = (i == id) ? "Active" : "";       
      TT.blur();       
    }       
  }       
  while (TT = TT.nextSibling);       
  var Hatextarea _mce_style="width: 300px; height: 500px;" class="bginput" cols="42" name="kod kutusu" rows="5" style="height: 156px; margin: 0px; width: 472px;"il.firstChild;       
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;       
  var Halaman = Halamans.firstChild;       textarea  var i    = 0;       
  do       
  {       
    if (Halaman.className == 'Halaman')   &

nbsp;  {       
      i++;       
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";       
      Halaman.style.overflo

w = "auto";       
      Halaman.style.display  = (i == id) ? 'block' : 'none'; textarea _mce_style="width: 300px; height: 500px;" class="bginput" cols="42" name="kod kutusu" rows="5" style="height: 60px; margin: 0px; width: 171px;"nbsp;  } 
 textarea     
  while (Halaman = Halaman.nextSibling);       
}       
function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);       
}       
function tabtampil_inisial(TPID) { tabtampil_oom(TPID,  1);       
document.write('');}


//]]>


</script>

 Çoklu Sekmeyi Bloğa Ekleme

Yukarıda çoklu sekme widgetinin çalışması için gereken kodutemamıza yükledik. Şimdi widgeti temamızın istediğimiz yerine yükleyelim.
  • Blogger kumanda panelinden "Yerleşim" bölümüne gelelim.
  • Widgetin gözükmesini istediğimiz yere "widget ekle" diyerek "HTML / Javascript" seçeneğine aşağıdaki kodları yapıştıralım.
  • Kaydetmeden önce aşağıda belirtilen yerleri değiştirelim.
<style type="text/css">     
div.TabTampil div.TTs       
{height: 24px; overflow: hidden; }       
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active       
{ background-color: #eee; }       
div.TabTampil div.Halamans       
{ clear: both; border: 1px solid #fff; overflow: hidden; background-color: #ffffff;}       
div.TabTampil div.Halamans div.Halaman       
{ height: 100%; padding: 0px; overflow: hidden; }       
div.TabTampil div.Halamans div.Halaman div.Alas       
{ padding: 3px 5px; }       
div.TabTampil div.TTs a       
{ border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;       
display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;       
font-size: 11px; font-weight: 900; color: #000000}       
</style>       
<form action="tabtampil.html" method="get">       
<div id="TabTampil" class="TabTampil">       
<div style="width: 300px;" class="TTs"> <a>Sekme 1</a> <a>Sekme 2</a> <a>Sekme 3</a></div>       
<div style="width: 300px; height: 300px;" class="Halamans">       
<div class="Halaman">       
<div class="Alas">       
<br/>       

Sekme 1 içeriği buraya

</div>     
</div>       
<div class="Halaman">       
<div class="Alas">       
<br/>

Sekme 2 içeriği buraya

</div>       
</div>       
<div class="Halaman">       
<div class="Alas">       
<br/>

Sekme 3 içeriği buraya

</div>     
</div>       
</div>       
</div>       
</div></form>

<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
Dikkat Edilecekler
#eee: Bu, Sekmelerin arka plan rengidir. Varsayılan olanı gridir. Seçtiğiniz farklı bir renge değiştirmek isterseniz renk kodunu değiştirmeniz yeterli.

#fff: Bu, çoklu sekme widget'ınızın kenarlığının rengidir. Varsayılan olan beyazdır. Bunu, yukarıda belirtilen aynı renk grafiğini kullanarak istediğiniz bir renge göre özelleştirebilirsiniz.

 #ffffff: Bu, widget'ınızın ana gövdesinin arka plan rengidir. Widget'a içerik ekleyeceğiniz yer burasıdır. Varsayılan olan beyazdır. Seçtiğiniz farklı bir renge değiştirmek isterseniz renk kodunu değiştirmeniz yeterli.

 #eee: Bu dikdörtgen sekmelerin çevresindeki sınırların rengi. Varsayılan olanı gridir. Seçtiğiniz farklı bir renge değiştirmek isterseniz renk kodunu değiştirmeniz yeterli.

#000000: Bu, sekmelerinizi adlandırmak için yazacağınız metnin / yazı tipinin rengidir. Başka bir deyişle, sekme başlıklarınızın rengi. Varsayılan olan siyahtır.

 Sekme 1,2,3: Bunları sekme başlıklarınız ile değiştirin.

Sekme 1,2,3 içeriği buraya: Buralara sekmelerin kodlarını veya ne gelmesini istiyorsanız onları yazmalısınız.