Blogger Sekmeli Widget Eklentisi

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.

Blogger özel temalarda sıkca rasladığı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 sunacağınız yer sağlayabilirsiniz.

Sekmeli Wigget Eklentisi İçin İlgili Adımlar;

Adım 1 : Blog’unuzun önce yedeğini alın. Blogger şablon kodları içinde (Ctrl+F) aşağıdaki etiketi bulun.

]]></b:skin> 

Yukarıda verilen etiketi bulduğunuzda aşağıdaki CSS kodlarını eksiksiz üst kısma 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ı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($){
 $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
 $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
 $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
 
 $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
 $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;); 
 $(this).addClass(&quot;tabs-widget-current&quot;); 
 $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); 
 var activeTab = $(this).attr(&quot;href&quot;); 
 $(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.

Yazar Adnan Güney

Samsun-Turkey doğumlu. 1989-2005 Temsa Mitsubishi Sabancı Otomotiv grubunda çalıştı. Araştırma, Geliştirme, Web siteleri ile uğraşma ve Paylaşımı seven biri.

Yorumlar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yükleniyor …

0

Botnet Nedir Nasıl Bulaşır?

Google’un Chrome Pil Tüketimi ve Hız Hakkındaki Açıklaması