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

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

• Tweet
• Share
• Share
• Share
• Share

About Blog Düzenim

Blog Düzenim bloggeri geliştirmek ve yeni blog kullanıcılarına yardımcı olmak amacıyla açılmıştır. We love blogger.

Related Post