Blogger çoklu sekmeli navigasyon menü

●Blogger için yeni çoklu sekmeli navigasyon menü (Multi tabbed widget)

Blogger için yeni Multi Sekmeli Widget tamamen özelleştirilebilir ve düzenlenebilir. Aslında wordpress menü sekmesi olan bu eklenti, blogger için yeniden düzenlenmiştir. Tek fark, daha kolay ve hoş bir tasarım. Sekmeli Navigasyon Menüsü (Multi Tab Navigation System) özellikle sidebarı dar olanlar için şık, kullanışlı ve alternatif bir menü. Blogunuzun sidebarına ekleyeceğiniz bu eklenti ile tek bir gadgetlık alana birden fazla gadget sığdırabileceksiniz. umarım begenirsiniz. Şimdi işe koyulalım...

Önizleme

Blogger'a ekleme
Lütfen şu adımları izleyin
1. Blogger'a Git > Tasarım > HTML'yi Düzenle 2. Şablonunuzu yedekleyin! 3. Ctrl+F yardımı ile ]]></b:skin> kodunu bulun. 4. Bulduğunuz kodun hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.

.tabs-widget{height:33px;margin:0 0 10px;padding:0;}
.tabs-widget li{list-style-type:none;float:left;margin:0 0 0 1px;padding:0;}
.tabs-widget li a{color:#FFF;background:none repeat scroll 0 0 #282C2F;display:block;text-decoration:none;font:14px oswald,Helvetica,Sans-serif;box-shadow:4px 2px 9px #999;padding:8px 20px;}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#38434B;color:#FA7029;text-decoration:none;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .2s ease 0;}
.tabs-widget-content{background:none;}
.tabviewsection{margin-top:10px;margin-bottom:10px;position:relative;left:0;}

5. "Ctrl+F" yardımı ile alttaki kodu bulun;

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

Ya da bu (başka şablonlarda degişebilir).

<div id='sidebar-wrapper'>

ve bulduğunuz kodun altına, aşağıdaki kodu yapıştırın

<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 Yayınlar</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Label</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:widget id='PopularPosts1' locked='false' title='' type='PopularPosts'>
</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:widget id='Label1' locked='false' title='' type='Label'>
</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:widget id='BlogArchive1' locked='false' title='' type='BlogArchive'>
</b:section></div>
</div>
<div style='height:5px;clear:both;'/> 

6. Şablonunuzu kaydettikten sonra Sayfa ögelerinizi görüntüleyin sütununuzun en üst kısmında Sekmeli Navigasyon Menüsünü görebilirsiniz. Menü başlıklarına tıklayarak eklenen gadgetleri düzenleyebilirsiniz.

Eklentinin style kodlarıyla oynayarak Renk, yükseklik "height" ve genişlik "width" bölümlerini isteğinize göre ayarlayabilirsiniz. Mavi renkle işaretledigim bölümler örnektir (Popüler Yayınlar, Label, Blog Arşivi). Siz o bölümlere istediğiniz gadget HTML kodlarını ekleyebilirsiniz. Son Yazılar , Son yorumlar , Abone kutusu gibi. Örneğin Popüler yayınlar bölümünde Twitter Takipçi kutusu olsun istiyorsunuz; önce yeni gadgetinizi oluşturuyorsunuz. Sonra HTML kodlarınızdan gadgetinizin id'sini bulup kopyalayıp tab kodları arasına yapıştırıyorsunuz.

Örnek:

<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:widget id='HTML1' locked='false' title='' type='HTML'>
</b:section>
</div>

Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...