Slider Widget

Responsive Advertisement

Blogger Sekmeli TAB Yatay Menü Ekleme

Blogger Sekmeli TAB Yatay Menü Ekleme

Blogger sitenize sekmeli tab şık bir yatay menü eklemek için gerekli kodlar.

Sekmeli menü şeklinde paylaştığımız yatay menü,Öncelikle </head> kodunu buluruyoruz ve hemen üstüne bu kodu ekliyoruz..

<script src='https://code.jquery.com/jquery-3.1.1.min.js' type='text/javascript'/>
<script>
        $(document).ready(function() {
            $(&quot;.tab-menu a&quot;).click(function(event) {
                event.preventDefault();
                $(this).parent().addClass(&quot;current&quot;);
                $(this).parent().siblings().removeClass(&quot;current&quot;);
                var tab = $(this).attr(&quot;href&quot;);
                $(&quot;.tab-content&quot;).not(tab).css(&quot;display&quot;, &quot;none&quot;);
                $(tab).fadeIn();
            });
        });
    </script>

ardından b:skin içerisinde aşağıda ki style kodlarını ekliyoruz.

.ikincimenu {
    font-weight: 600;
    text-transform: uppercase;
}
.ikincimenu *{
    box-sizing:border-box;
}
.tab-menu {
display:block;
padding:0;
text-align:left
}
.tab-menu li {
list-style:none;
display:inline-block;
margin-left: -20px;
    width: 16.6%;
    text-align: center;
}
.tab-menu li:first-child {
    margin-left: 0;
}
.tab-menu li a {
display:block;
    border-radius: 23px 23px 0 0;
    color: #fff;
    padding: 10px 0;
    position: relative;
font-size:14px;
}
.tab-content {
display:none
}
#tab1 {
display:block
}
.tab-container {
font-family: Arial;
color:#666;
}
.tab-content li {
    display: inline-block;
}
.tab-container a{
color:#fff;
    display: inline-block;
    font-size: 12px;
    padding: 20px 20px 17px;
    transition: all .3s ease-in-out;
    font-weight: bold;
    line-height: 20px;
}
.siteRengi,#menubir{
background:#226590;
}
.gri,#menuiki{
background:#3e3e42;
}
.kirmizi,#menuuc{
background:#dc3733;
}
.yesil,#menudort{
background:#42b751;
}
.siyah,#menubes{
background:#35273e;
}
.sari,#menualti{
background:rgba(140, 148, 11, 0.99);
}
.current a {
color:#fff;
}
@media screen and (max-width:768px){
.menuli{display:block;text-align:center}
.menuAc{display:block;}
.menuler{display:none;}
.tab-content {
margin-top:10px
}
.tab-content li {
    display: block;
    text-align: center;
}
.tab-menu {
    display: inline-block;
    width: 100%;
}
.tab-menu li {
    margin-left: 0;
margin-top:5px;
    width: 33.3%;
    float: left;
}
.tab-menu li a {
border-radius: 0;
}
}
Ve son olarak görünmesini istediğiniz yere aşağıda ki kodları yapıştırıyorsunuz.

<nav class='ikincimenu'>
<div class='menuAc'>MENÜYÜ AÇ</div>
<div class='menuler'>
     <ul class='tab-menu ortala'>
       <li class='current'><a class='siteRengi' href='#tab1'>Genel</a></li>
            <li><a class='gri' href='#tab2'>Blogger</a></li>
            <li><a class='kirmizi' href='#tab3'>C# Yazılım</a></li>
            <li><a class='yesil' href='#tab4'>Program ve Crackler</a></li>
            <li><a class='siyah' href='#tab5'>Yazılım</a></li>
            <li><a class='sari' href='#tab6'>Diğer</a></li>
        </ul>
  <div class='tab-container'>
            <div class='tab-content' id='tab1'>
  <b:section data-name='Menüler 1!' id='menubir' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Menü 1' type='LinkList' version='2' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='link-5'>/search/label/Bilgi</b:widget-setting>
    <b:widget-setting name='link-3'>/label/C%23%20Otomasyon</b:widget-setting>
    <b:widget-setting name='link-4'>/search/label/Wordpress</b:widget-setting>
    <b:widget-setting name='text-1'>Haberler</b:widget-setting>
    <b:widget-setting name='text-0'>C#</b:widget-setting>
    <b:widget-setting name='text-3'>Otomasyon</b:widget-setting>
    <b:widget-setting name='text-2'>Proje</b:widget-setting>
    <b:widget-setting name='text-5'>Genel Teknoloji Bilgileri</b:widget-setting>
    <b:widget-setting name='text-4'>Wordpress</b:widget-setting>
    <b:widget-setting name='shownum'>10</b:widget-setting>
    <b:widget-setting name='sorting'>NONE</b:widget-setting>
    <b:widget-setting name='link-1'>/search/label/Haberler</b:widget-setting>
    <b:widget-setting name='link-2'>/label/C%23%20Proje</b:widget-setting>
    <b:widget-setting name='link-0'>/search/label/C%23%20%C3%96rnekleri</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
  <b:include name='content'/>
</b:includable>
  <b:includable id='content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
</b:includable>
</b:widget>
</b:section>
            </div>
            <div class='tab-content' id='tab2'>
  <b:section data-name='Menüler 2!' id='menuiki' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList2' locked='true' title='Menü 2' type='LinkList' version='2' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='shownum'>10</b:widget-setting>
    <b:widget-setting name='link-3'>/2017/03/blogger-guzel-sozler-temasi.html</b:widget-setting>
    <b:widget-setting name='sorting'>NONE</b:widget-setting>
    <b:widget-setting name='text-1'>Blogger Eklentileri</b:widget-setting>
    <b:widget-setting name='link-1'>/search/label/Blogger%20Eklentileri</b:widget-setting>
    <b:widget-setting name='text-0'>Blogger Temaları</b:widget-setting>
    <b:widget-setting name='link-2'>/2019/04/blogger-kisisel-kart-kartvizit-tema-tasarimi.html</b:widget-setting>
    <b:widget-setting name='text-3'>Güzel Sözler Teması</b:widget-setting>
    <b:widget-setting name='link-0'>/search/label/Blogger%20Temalar%C4%B1</b:widget-setting>
    <b:widget-setting name='text-2'>Kartvizit Teması</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
  <b:include name='content'/>
</b:includable>
  <b:includable id='content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
</b:includable>
</b:widget>
</b:section>
            </div>
            <div class='tab-content' id='tab3'>
  <b:section data-name='Menüler 3!' id='menuuc' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList3' locked='true' title='Menü 3' type='LinkList' version='2' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='link-5'>/2018/05/c-sharp-otel-rezervasyon-otomasyonu.html</b:widget-setting>
    <b:widget-setting name='link-3'>/2016/05/csharp-kafe-restaurant-otomasyonu.html</b:widget-setting>
    <b:widget-setting name='link-4'>/2016/05/csharp-veri-tabaniyla-sinema-otomasyonu-ornegi-kodlariyla.html</b:widget-setting>
    <b:widget-setting name='text-1'>C# Otomasyon</b:widget-setting>
    <b:widget-setting name='text-0'>C# Örnekleri</b:widget-setting>
    <b:widget-setting name='text-3'>Kafe Otomasyonu</b:widget-setting>
    <b:widget-setting name='text-2'>C# Proje</b:widget-setting>
    <b:widget-setting name='text-5'>Otel Otomasyonu</b:widget-setting>
    <b:widget-setting name='text-4'>Sinema Otomasyonu</b:widget-setting>
    <b:widget-setting name='shownum'>10</b:widget-setting>
    <b:widget-setting name='sorting'>NONE</b:widget-setting>
    <b:widget-setting name='link-1'>/search/label/C%23%20Otomasyon</b:widget-setting>
    <b:widget-setting name='link-2'>/search/label/C%23%20Proje</b:widget-setting>
    <b:widget-setting name='link-0'>/search/label/C%23%20Ornekleri</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
  <b:include name='content'/>
</b:includable>
  <b:includable id='content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
</b:includable>
</b:widget>
</b:section>
            </div>
            <div class='tab-content' id='tab4'>
  <b:section data-name='Menüler 4!' id='menudort' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList4' locked='true' title='Menü 4' type='LinkList' version='2' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='shownum'>10</b:widget-setting>
    <b:widget-setting name='sorting'>NONE</b:widget-setting>
    <b:widget-setting name='text-1'>Program Crackleri</b:widget-setting>
    <b:widget-setting name='link-1'>/search/label/Program%20Crackleri</b:widget-setting>
    <b:widget-setting name='text-0'>Program indir</b:widget-setting>
    <b:widget-setting name='link-2'>/search/label/E-Dergi</b:widget-setting>
    <b:widget-setting name='link-0'>/search/label/Program%20indir</b:widget-setting>
    <b:widget-setting name='text-2'>E-Dergi Arşivi</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
  <b:include name='content'/>
</b:includable>
  <b:includable id='content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
</b:includable>
</b:widget>
</b:section>
            </div>
            <div class='tab-content' id='tab5'>
  <b:section data-name='Menüler 5!' id='menubes' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList5' locked='true' title='Menü 5' type='LinkList' version='2' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='shownum'>10</b:widget-setting>
    <b:widget-setting name='sorting'>NONE</b:widget-setting>
    <b:widget-setting name='text-1'>HTML</b:widget-setting>
    <b:widget-setting name='link-1'>/search/label/HTML</b:widget-setting>
    <b:widget-setting name='text-0'>PHP</b:widget-setting>
    <b:widget-setting name='link-2'>/search/label/Wordpress</b:widget-setting>
    <b:widget-setting name='link-0'>/search/label/PPHP</b:widget-setting>
    <b:widget-setting name='text-2'>Wordpress</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
  <b:include name='content'/>
</b:includable>
  <b:includable id='content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
</b:includable>
</b:widget>
</b:section>
            </div>
            <div class='tab-content' id='tab6'>
  <b:section data-name='Menüler 6!' id='menualti' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList6' locked='true' title='Menü 6' type='LinkList' version='2' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='shownum'>10</b:widget-setting>
    <b:widget-setting name='sorting'>NONE</b:widget-setting>
    <b:widget-setting name='text-1'>Hakkımızda</b:widget-setting>
    <b:widget-setting name='link-1'>/p/sss.html</b:widget-setting>
    <b:widget-setting name='text-0'>Blogger Özel Sayfamız</b:widget-setting>
    <b:widget-setting name='link-2'>/p/iletisim.html</b:widget-setting>
    <b:widget-setting name='link-0'>/p/blogger.html</b:widget-setting>
    <b:widget-setting name='text-2'>İletişim</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
  <b:include name='content'/>
</b:includable>
  <b:includable id='content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
</b:includable>
</b:widget>
</b:section>
            </div>
        </div>
      </div>
</nav>

Tab menüyü nasıl düzenlerim ?

<li class='current'><a class='siteRengi' href='#tab1'>Genel</a></li> kodlarında genel yazan kısmı istediğiniz gibi düzenleyebilirsiniz. Burası görünür kısım. Bunun alt kategorisini düzenlemek isterseniz yerleşim bölümünden menü 1 bulmanız gerekiyor çünkü #tab1 bu.

Yerleşim düzenlemeli bir menü bu. Yapamayanlar yorum bırakabilirler.

Not hata veren olursa: Arkadaşlar burda 6 tane linklist widgetı var sizde ki linklist widgetlarını bulun isterseniz silin isterseniz id sini html 25 falan yapın. Bir kaç gün içerisinde buradan yerleşim bölümü css kodları paylaşacağım takipte kalın

Blogger Sekmeli TAB Yatay Menü DEMO burada

Yorum Yap