Blogger, Klasik blogunuz için kullanabileceğiniz, blogger’un üç gadget eklentisini bir gadget sekmesinde birleştirip sidebar alanından yer kazandırarak kullanım kolaylığı sağlayan sekmeli widget eklentisi. Blogger özel temalarda sıkça rastladığınız Popüler yayınlar, Etiketler, Arşiv, gadget modül seçeneklerini bir gadget içinde birleştirerek okuyucularınıza daha fazla seçenek sunarak yer sağlayabilirsiniz. Eklenti kod içindeki Ingilizce kelimeleri değiştirin.
Sekmeli Wigget Eklentisi için ilgili adımlar;
Adım 1 : Blog’unuzun önce yedeğini alın. Blogger şablon kodları içinde (Ctrl+F) aşağıdaki kod’u bulun.
]]></b:skin>
Yukarıda verilen etiketi bulduğunuzda aşağıdaki CSSkodlarını eksiksiz üst kısmına yapıştırın ve blog’u kaydedin. Tasarımı yapılan Sekmeli Wigget Eklentisini mevcut blog ile inceleyin. Canlı DEMO
Adım 2 : CSS Kodlarımız : CSS kodlarını üst kısma yapıştırın ve blog’unuzu kaydedin.
/* Tabview Section AG Start-------- */
.tabs-widget{list-style:none;list-style-type:none;height:26px;margin:0 0 10px;padding:0;}
.tabs-widget li{list-style:none;list-style-type:none;float:left;margin:0 0 0 4px;padding:0;}
.tabs-widget li:first-child{margin:0;}
.tabs-widget li a{color:#FFF;background:url(http://4.bp.blogspot.com/-BUO29v0Vs90/Uw9eGbdS-BI/AAAAAAAALiA/I71etsx_nq4/s1600/tabs-widget-bg.png) left top repeat-x;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;display:block;text-decoration:none;font-size:12px;line-height:12px;padding:6px 16px;}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(http://4.bp.blogspot.com/-BUO29v0Vs90/Uw9eGbdS-BI/AAAAAAAALiA/I71etsx_nq4/s1600/tabs-widget-bg.png) left -126px repeat-x;color:#FFF;text-decoration:none;}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}
.tabs-widget {height: 40px;}
}
/* Tabview Section AG End-------*/
Adım 3 : Özel tasarım şablon kullanıyor iseniz bulacağınız kod aşağıda verilmiştir.
<div id='sidebar-wrapper'>
Blogger’un Klasik blog şablonunu kullanıyor iseniz bulacağınız kod aşağıda verilmiştir.
<div class='column-right-inner'>
Blogger’un hangi tür şablonunu kullanıyor iseniz yukarıdaki kodu bulun. Bulduğunuz kod’un hemen altına aşağıdaki kodları ekleyin.
<div class='tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Popüler</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Kategoriler</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Arşiv</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='height:5px;clear:both;'/>
Adım 4 : Özelleştirme: Adım 2, içinde iki adet kırmızı ile belirtilmiş resim linki bulunmaktadır. Resim linkinin yanındaki bağlantıyı kaldırarak aşağıdaki kodları ekleyip arka plan renklerini değiştirebilirsiniz.(Görünüm bozulduğundan tavsiye edilmez.) Resim Linkleri yerine sadece renk kodlarını kullanmak isterseniz aşağıda verdiğim kottan sonrasını (Sarı ile belirtilen) silin ve hemen aşağıda verdiğim renk kodunu sildiğiniz yere ekleyin. Kodlar #C80000 ile başlayan pencere içindekilerdir.
Silinecek kodların olduğu bölüm bilgisi 1. Resim linki:
.tabs-widget li a{color:#FFF;background:url(http://4.bp.blogspot.com/-BUO29v0Vs90/Uw9eGbdS-BI/AAAAAAAALiA/I71etsx_nq4/s1600/tabs-widget-bg.png) left top repeat-x;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;display:block;text-decoration:none;font-size:12px;line-height:12px;padding:6px 16px;}
2. Resim linki:
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(http://4.bp.blogspot.com/-BUO29v0Vs90/Uw9eGbdS-BI/AAAAAAAALiA/I71etsx_nq4/s1600/tabs-widget-bg.png) left -126px repeat-x;color:#FFF;text-decoration:none;}
Sildiğiniz her iki resim kodları yerine aşağıdaki kodları ekleyin. #C80000 resim rengini istediğiniz renk kodu ile değiştirebilirsiniz. Renk kodları için ayrıca burdan bakabilirsiniz.
#C80000;color:#fff;text-decoration:none}
.tabs-content{background:#212121}
Blogunuzu kaydedin ve Ana sayfanıza bakın. Blog’unuz Tema tasarımı ile ilgili sorun mu yaşıyorsunuz? Menü başlık çubuğunda bulunan Tema Tasarım konularından yardım alabilirsiniz.
