Blogger Sekmeli Kenar Çubuğu Eklentisi Videolu Anlatım

Blogger’un Sidebar yerleşim alanından daha fazla alan kazanarak farklı eklentileri de eklemenize yardımcı olan, Popüler yayınlar , Katego...

...

Blogger’un Sidebar yerleşim alanından daha fazla alan kazanarak farklı eklentileri de eklemenize yardımcı olan, Popüler yayınlar, Kategori ve Arşiv gadget’lerini mavi ve siyah renk olarak gösteren Sidebar kenar çubuğu sekmeli widget eklentisi. Blog’unuzun sidebar kenar çubuğuna okuyucularınızın dikkatini çekmesi için eklediğiniz Popüler yayınlar, Kategoriler ve Arşiv gadget eklentilerinin ne kadar çok alanı işgal ettiğini bir düşünün ! İşgal edilen bu alanları daha verimli kullanarak farklı gadget eklemenize yardımcı olacak sekmeli kenar çubuğu eklenti kodlarını kullanarak değerlendirebilirsiniz.

Blogger’un varsayılan şablonlarında bulunmayan, ancak birçok site ve özel tasarım blogger şablonlar da kullanılan Sekmeli kenar çubuğu eklentisini Blogger şablonunuzun hiçbir özelliğini bozmadan sizde kullanmanın zevkini yaşayabilirsiniz. Sekmeli widget eklentisini çok rahatlıkla kurabilmeniz için birde anlatım videosunu aşağıda izleyin. Kafanızın karışmaması için çok fazla detaya girmeden sekmeli widget eklentisi nasıl kurulacak aşağıda adım adım görelim.

Ayrıca okuyabileceğiniz yazı : Sekmeli Widged Nedir? Neden Sekmeli Widget Kullanılır?

Sekmeli Kenar Çubuğu Eklentisinin kurulumu :

1. Blogger şablon kodlarınızı açın ve aşağıda verilen CSS stil etiketini CTRL+F arama ile bulun.

]]></b:skin>

2. Bulduğunuz stil etiketinin hemen üstüne aşağıdaki CSS kodlarını yapıştırıp blog'u 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:#E4C2B1;background:#343434;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:#4285F4;color:#FFF;text-decoration:none;}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}
.date-header {display :none !important;}
body .navbar {
height: 0px;
padding: 0;
margin: 0
}

3. Blogger, Şablon kodlarınızın içinde aşağıdaki etiketi arayın.

<div class='column-right-inner'>

4. Bulduğunuz etiketin hemen altına aşağıda verilen 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şivi</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;'/>

5. Eklediğiniz kodlar için de, Popüler yayınlar, Kategoriler, Blog arşivi, isimlerini dikey çubuğu aşağıya kaydırdığınızda mavi renkli olarak göreceksiniz. Bu isimleri isterseniz değiştirebilirsiniz. Blog’unuzu kaydedin ve ana sayfada yaptığınız işlemleri inceleyin.

6. Şablon kodlarından artık çıkabilirsiniz. Blogger kumanda paneli yerleşim sekmesine tıklayarak yaptığımız işlemleri görelim.

7. Yerleşim sekmesinde iken sidebar sağ tarafta 3 nokta göreceksiniz. Bu eklediğimiz 3 ad sekme başlıklarının yansıtmaktadır.

8. Hemen alt kısımda alt alta aralarında boşluk olan gadgetleri göreceksiniz.
a. İlk gadget sekmesini açın ve gadget ekle semesinde Popüler yayınları ekleyin.
b. İkinci gadget için etiketleri ekleyin. Etiketlerin nasıl görüleceği isteğinize bağlı seçenekler ile yapılandırın.
c. Üçüncü gadget için arşiv gadgeti’ni ekleyin ve blog’unuzu kaydedin.

9. Yukarıda anlatılan 3 ad gadgetl’eri daha önceden ekledi iseniz en üstte boş görülen gadget alanlarına sırası ile taşıyıp blogunuzu kaydedin. Renklerin ve diğer ayarları kafanız karışmasın diye anlatmıyorum.

Anlayamadığınız herhangi bir konuda yorum yazarak yardım alabilirsiniz. Ayrıca menü çubuğunda Sekmeli Widget ismi ile ilgili yazılan yazıları inceleyebilirsiniz. İnceleyeceğiniz konular içinde sekmeli witget görünümü ile ilgili CSS kodlarını kullanabilirsiniz. Diğer eklediğiniz kodları ellemeden. Şu anda yazıyı yazarken test blog’un da çekim yaptığım anlatım videosunu izleyin.

Önemli not: Şablon kodlarınızda Jquery kütüphanesinin kodları varsa eklenti çalışacaktır. Aşağıda verilen jquery kütüphanesinin kodları yoksa veya eski sürüm ise eski kod linkini kaldırıp, yeni kodları ekleyerek kullanmanız tavsiye edilir.

Bu kodlar blog şablonuna eklenmediğinde Sekmeli Widget eklentiniz çalışmayacaktır. Sekmeli Widged Jquery Kod linki ; Google Drive'e yüklüdür açın.

Jquery kodları nereye konulur :

1. Blog şablonunuzu açın. </b:skin> kapanış etiketini bulun ve hemen altına ekleyin. Kod linkinin şablon içine eklenmiş resmini inceleyin. Anlaşılmayan yerler için yorum yazarak yardım alabilirsiniz.