En yeni: Dünyanın en iyi 10 video düzenleme programı Trending: İnternetten para kazanmak, Ekgelir, En iyi Tıkla Kazan (PTC) Siteleri

Blogger çoklu sekmeli navigasyon menü

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...

9 yorum:

  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
    Yanıtlar
    1. ben de çalışmadı sorunu nasıl çözdün

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

    YanıtlaSil

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!

 
  • Meftun Apart

    Meftun Apart Fethiye

    Apartlarımız deniz ve plaja 50 metre mesafede olup, klimalı, full eşyalı 2+1, 1+1, 4-6 kişilik ve havuzlu apartlardan oluşmaktadır.

  • Meftun Mede Blogger

    MEDE Blogger Tema Yardım

    Blogger şablonuzda, temanızda yardımamı ihtiyacınız var? Hertürlü blogger tema yardımı ücretsiz yapılır...

  • Sitemap sayfası oluşturma

    Sitemap sayfası oluşturma

    Sitemap bir web sitesinin haritasıdır.Arama motorlarının web sitelerini hızlı, daha çabuk ve tam olarak indexlemesi için oluşturulurlar.

  • hit arttırma

    Sitenizin hitini arttırın!

    Kaliteli hit arttırma sitemi ile ücretsiz hit kazanın, sitenizi Google'da yükseltin! Sitenizi ekleyin ve binlerce ziyaretçi kazanın!

  • internetten para kazan

    İnternetten para kazan !

    Boş zamanınızı internetde reklam izleyek ve bundan para kazanarak geçirebilirsiniz. Ek gelir elde edebilirsiniz!