Blogger Sekmeli Widget Eklentisi

Blogger, Klasik blogunuzda kullanabileceğiniz, blogger’un üç gadget eklentisini bir gadget sekmesinde birleştirip sidebar alanından yer...

...

Blogger, Klasik blogunuzda 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ı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.

Eklenti kodlarını şablonunuza uyguladığınızda tek yapmanız gereken işlem ingilizce yazılı olan başlık isimlerini değiştirmektir.

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>

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 (Farklı bir blog ile inceleyin)

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/AVvXsEjpkHoS7apzNSpZt2d-2n-YH9v-NEh06bslyCcrQYyAHzMJMABepJIsm-VFfquK3m7wzRjio8hqaV23PPrDg9Jq3dur0jmyRLXyyzqliPWsE1ZCtrj01ZDlNpip7PrxkE3pxAYVEBt8EkB-/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/AVvXsEjpkHoS7apzNSpZt2d-2n-YH9v-NEh06bslyCcrQYyAHzMJMABepJIsm-VFfquK3m7wzRjio8hqaV23PPrDg9Jq3dur0jmyRLXyyzqliPWsE1ZCtrj01ZDlNpip7PrxkE3pxAYVEBt8EkB-/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 :

Ö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 :

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/AVvXsEjpkHoS7apzNSpZt2d-2n-YH9v-NEh06bslyCcrQYyAHzMJMABepJIsm-VFfquK3m7wzRjio8hqaV23PPrDg9Jq3dur0jmyRLXyyzqliPWsE1ZCtrj01ZDlNpip7PrxkE3pxAYVEBt8EkB-/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/AVvXsEjpkHoS7apzNSpZt2d-2n-YH9v-NEh06bslyCcrQYyAHzMJMABepJIsm-VFfquK3m7wzRjio8hqaV23PPrDg9Jq3dur0jmyRLXyyzqliPWsE1ZCtrj01ZDlNpip7PrxkE3pxAYVEBt8EkB-/s1600/tabs-widget-bg.png) left -126px repeat-x;color:#FFF;text-decoration:none;}

2. 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} 

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.