Blogger Dikey Ve Yatay Üç Kategorili Açılır Menü Gezinme Çubuğu Eklentisi

Blogger için açılır menü sekmesinin kurulum aşamaları :

1. Blogger kumanda paneline giriş yapın.

2. Kumanda panelinde yerleşim, gadget ekle sekmesini açın, Html/javaScript gadget’i açın.

3. Aşağıda verilen kodları gadget içine ekleyin ve kaydedin.

4. Eklediğiniz gadget’i blog kayıtları yerleşiminin üst kısmına sürükleyerek konumlandırın.

Html ve Css kodları hepsi bir aradadır. Sadece gadget içine kodları yapıştırın. Dikey çubuğu kaydırarak renkli yerleri inceleyin.

<style> 
#agnavbar { 
    background: #3B5998; 
    width: 100%; 
  
    color: #FFF; 
        margin: 10px 0; 
        padding: 0; 
        position: relative; 
        border-top:0px solid #960100; 
        height:35px;
}
#agnav { 
    margin: 0; 
    padding: 0; 
} 
#agnav ul { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#agnav li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
       
} 
#agnav li a, #agnav li a:link, #agnav li a:visited { 
    color: #FFF; 
    display: block; 
   font:bold 12px Helvetica, sans-serif; 
   margin: 0; 
    padding: 9px 12px 11px 12px; 
        text-decoration: none; 
        border-right:0px solid #627AAD;
} 
#agnav li a:hover, #agnav li a:active { 
    background: #627AAD; 
    color: #FFF; 
    display: block; 
    text-decoration: none; 
        margin: 0; 
    padding: 9px 12px 11px 12px; 
              
}
#agnav li { 
    float: left; 
    padding: 0; 
} 
#agnav li ul { 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 160px; 
    margin: 0; 
    padding: 0; 
} 
#agnav li ul a { 
    width: 140px; 
} 
#agnav li ul ul { 
    margin: -25px 0 0 161px; 
}
#agnav li:hover ul ul, #agnav li:hover ul ul ul, #agnav li.sfhover ul ul, #agnav li.sfhover ul ul ul { 
    left: -999em; 
} 
#agnav li:hover ul, #agnav li li:hover ul, #agnav li li li:hover ul, #agnav li.sfhover ul, #agnav li li.sfhover ul, #agnav li li li.sfhover ul { 
    left: auto; 
} 
#agnav li:hover, #agnav li.sfhover { 
    position: static; 
} 
#agnav li li a, #agnav li li a:link, #agnav li li a:visited { 
    background: #EDEFF4; 
    width: 120px; 
    color: #3B5998; 
    display: block; 
    font:normal 12px Helvetica, sans-serif; 
    margin: 1px 0 0 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
z-index:9999; 
border:1px solid #ddd;
-moz-border-radius:4px; 
-webkit-border-radius:4px;
   
} 
#agnav li li a:hover, #agnav li li a:active { 
    background: #627AAD; 
    color: #FFF; 
    display: block; 
   
}
#agnav li li li a, #agnav li li li a:link, #agnav li li li a:visited {
    background: #EDEFF4; 
    width: 120px; 
    color: #3B5998; 
    display: block; 
    font:normal 12px Helvetica, sans-serif; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
z-index:9999; 
border:1px solid #ddd; 
    margin: 1px 0 0  -14px;    
} 
#agnav li li li a:hover, #agnav li li li a:active { 
    background: #627AAD; 
    color: #FFF; 
    display: block; 
}
</style> 
<div id='agnavbar'> 
          <ul id='agnav'> 
             
      <li> 
               <a href='#'>Kategoriler ▼</a>
                <ul> 
                    
                    <li><a href='#'>Ustmenu1</a> 
                   <ul> 
                    <li><a href='#'>Yanmenu1</a></li> 
                    <li><a href='#'>Yanmenu2</a></li> 
                    <li><a href='#'>Yanmenu3</a></li> 
                  </ul>
				  <li><a href='#'>Ustmenu2</a> 
                   <ul> 
                    <li><a href='#'>Yanmenu1</a></li> 
                    <li><a href='#'>Yanmenu2</a></li> 
                    <li><a href='#'>Yanmenu3</a></li> 
                  </ul>
				  <li><a href='#'>Ustmenu3</a> 
                   <ul> 
                    <li><a href='#'>Yanmenu1</a></li> 
                    <li><a href='#'>Yanmenu2</a></li> 
                    <li><a href='#'>Yanmenu3</a></li> 
                  </ul>
             
</li></li></li></ul>          
        </li></ul></div>

1. Blogger şablon kodlarını açın ve aşağıdaki etiketi Ctrl+F kısayol yardımı ile aratarak bulun./* Tabs

2. Bulduğunuz yukarıdaki etiketin hemen altındaki kod bitimine aşağıdaki Css kodlarını ekleyip blog’u kaydedin. Bu kodlar Blogger menü çubuğunu açılır konuma getiren yama kodlarıdır.

.tabs .widget ul, .tabs .widget ul {
margin: 0px;
padding: 0px;
list-style: none outside none;
overflow: visible;
}
.tabs-outer {
background: 0 ;
}