Blogger çoklu sekmeli navigasyon menü
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. Bir örneğini sağ taraftaki sidebarımda görebilirsiniz. Umarım beğenirsiniz. Şimdi işe koyulalım...

● Blogger için yeni çoklu sekmeli navigasyon menü
● Multi tabbed widget for blogger

Blogger'a ekleme

1. Blogger kontrol panelinize giriş yapın > Şablon sekmesine tıklayın.
2. Şablonunuzu yedeklemeyi unutmayın.
3. HTML'yi Düzenle'ye basın.
4. Düzenleme ekranındayken CTRL+F tuş kombinasyonuyla ]]></b:skin> kodunu aratıp bulun ve hemen üzerine 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.
Sekmeli Navigation tema
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...

10 Yorumlar

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

  1. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  2. Merhabalar, benim internetten indirdiğim tema içinde yüklü olan bir widget bu. Yalnız kayıt sayfalarımda görünmekte. Ben yalnız anasayfamda görünsün istiyorum. Ne yapmam gerekir, yardımcı olur musunuz?

    YanıtlaSil
  3. Sadece Ana sayfada yayınlanmasını istediğiniz öğeyi şu kodlar arasına alın.
    <b:if cond='data:blog.pageType == "item"'>
    Buraya eklenti kodları...
    </b:if>

    YanıtlaSil
  4. hocam menü çalısmamaya basladı bi problem var heral de kontrol edebılırmısın

    YanıtlaSil
  5. hocam çözdüm problemi menü çalışıyor problem yok

    YanıtlaSil
  6. jquery olmadan çalışmıyor.ben jquery olmadan çalışan bi tab menü aarıyorum.

    YanıtlaSil
  7. Hata veriyor ayrıştırılırken bilmem kaçıncı sütun diyor oraları nasıl halletcez

    YanıtlaSil

Yorum Gönder

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

Önceki Makale Sonraki Makale