Blogger Sekmeli Widget Eklentisi
Sekmeli Wigget Eklentisini blogunuza kurmak için yapılması gereken 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>
Adım 2 : CSS Kodlarımız : CSS kodlarını üst kısma yapıştırın ve blog’unuzu kaydedin.
/* Tabview Section G59P 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGe0lvyz_3hzeTrWtH1rQdi2kM_jDUbiE-ZRG9VrqbcDGmL5wWZcgRLnqKGWQ32IJIjlfEKPfTKRO9uEwQaxK-Nf4zGbMRub5nk_UaQRcURjqCu0lqwVNoOtzGGXMBXB5Co1wpLBXoVuHG/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGe0lvyz_3hzeTrWtH1rQdi2kM_jDUbiE-ZRG9VrqbcDGmL5wWZcgRLnqKGWQ32IJIjlfEKPfTKRO9uEwQaxK-Nf4zGbMRub5nk_UaQRcURjqCu0lqwVNoOtzGGXMBXB5Co1wpLBXoVuHG/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 G59P End-------*/
Adım 3 :
<div id='sidebar-wrapper'>
<div class='column-right-inner'>
<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;'/>
Özelleştirme :
1. Adım 2, içinde iki adet resim linki vardı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 renk kullanmak isterseniz aşağıda verdiğim kodtan sonrasını 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGe0lvyz_3hzeTrWtH1rQdi2kM_jDUbiE-ZRG9VrqbcDGmL5wWZcgRLnqKGWQ32IJIjlfEKPfTKRO9uEwQaxK-Nf4zGbMRub5nk_UaQRcURjqCu0lqwVNoOtzGGXMBXB5Co1wpLBXoVuHG/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGe0lvyz_3hzeTrWtH1rQdi2kM_jDUbiE-ZRG9VrqbcDGmL5wWZcgRLnqKGWQ32IJIjlfEKPfTKRO9uEwQaxK-Nf4zGbMRub5nk_UaQRcURjqCu0lqwVNoOtzGGXMBXB5Co1wpLBXoVuHG/s1600/tabs-widget-bg.png) left -126px repeat-x;color:#FFF;text-decoration:none;}
#C80000;color:#fff;text-decoration:none}
.tabs-content{background:#212121}
3. Blogunuzu kaydedin ve Ana sayfanıza bakın.
4. Ayrıca siyah başlık sekme, mavi başlık sekme resim linklerini ilgili yazılardan alarak kullanabilirsiniz. Blog’unuzda tema tasarımı ile ilgili sorun mu yaşıyorsunuz. Menü başlık çubuğunda bulunan Tema Tasarım kanularından yardım alabilirsiniz.
Blogger klasik blog’unuzu kendiniz tasarlayın nasıl mı yapacaksınız ? Buradan giriş yaparak tüm ana sayfanızı kendi emeğiniz ile tasarlayarak zevkle kullanabilirsiniz.
