Sidebar Multi-Tab widget alanı nasıl eklenir?

Sidebar Multi-Tab widget alanı nasıl eklenir? 3 sütunlu blogger widget ekleme

Sidebar alanında çok fazla widget bulunan bloglar için multi-tab (3 sütunlu widget alanı) ekleme.

Multi-tab widget nasıl eklenir?

Multi-tab widget alanı nedir? öncelikle sizlere biraz bundan bahsedeyim. Bu eklenti sidebar alanında yeni bir widget alanı oluşturur, 3 sütunludur. Belki bir çoğunuz diğer blog sayfalarında da denk gelmişsinizdir. Blog sayfanızda çok fazla widget varsa, sayfanız bu yüzden aşağı doğru uzayıp gidiyorsa Blogger muti-tab widget alanı sayesinde en azından biraz sıkıştırarak daha sade ve kullanışlı bir görünüm elde etmiş olursunuz.


Kurulum :


Öncelikle Blogger kumanda panelinde > Şablona tıklayın > daha sonra HTML Düzenleyi seçerek kodlarınızı açın. >  ]]></b:skin> kodunu aratarak hemen altına aşağıdaki kodları ekleyin.


/* Multi Tab Widget */
.multitab-section{background:#fff;text-transform:uppercase;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-widget li{list-style:none;padding:0;margin:0;float:left}
.multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}


Hemen ardından </body> kodunu bularak üzerine aşağıdaki kodları ekleyin.


<script type='text/javascript'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>


Daha sonra  <div id='sidebar-wrapper'> kodunu şablonunuzda aratın. Bulduğunuz kodun hemen altına da aşağıdaki kodları ekleyin.

<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>


Temanızı kaydederek çıkın.

Temanızın yerleşim alanına geldiğinizde üç sütunlu bir widget alanı göreceksiniz. Şimdi istediğiniz wigetleri bu alana sürükleyebilir ya da yeni widgetlerinizi ekleyebilirsiniz.


Demo
click to view


Previous
Next Post »

4 yorum

Hızlı yorum Comments
Gökhan TEKİN
Geliştirici
18 Kasım 2015 15:00 ×

Yine çok güzel bir paylaşım yapmışsın, eline sağlık

Cevap ver
avatar
Emrah Güngör
Geliştirici
20 Kasım 2015 02:59 ×

Tam da bunun gibi bir şey arıyordum, sitene bakarken rastgele karşıma çıktı :) Teşekkür ederim :)

Cevap ver
avatar
kaan
Geliştirici
25 Temmuz 2017 20:26 ×

her şeyi yaptım ama aralarında geçiş yapamıyorum. yani popüler yayınlar, blog arşivi ve etiketler var diyelim bunlar arasında geçiş yapamıyorum.

Cevap ver
avatar
smskcntr
Geliştirici
26 Ekim 2017 22:42 ×

"Öncelikle Blogger kumanda panelinde > Şablona tıklayın > daha sonra HTML Düzenleyi seçerek kodlarınızı açın. > ]]> kodunu aratarak hemen """"altına"""" aşağıdaki kodları ekleyin."

üstüne olacak sanırım?

Cevap ver
avatar
Yorumunuz için teşekkür ederim.

Katkıda Bulunanlar

Geliştirici ol