Blogger Açılır Menü Yapımı

İlk Olarak Blogumuzun kumanda panelinden Yerleşim>Html/JavaScript Gadget'ini Seçiyoruz ve aşağıdaki kodu yapıştırıyoruz.

<div id='mbtnavbar'> 
      <ul id='mbtnav'> 
        <li> 
          <a href='#'>Home</a> 
        </li> 
        <li> 
          <a href='#'>About</a> 
       </li> 
        <li> 
          <a href='#'>Contact</a> 
        </li> 
  <li> 
           <a href='#'>Sitemap</a>
            <ul> 
                <li><a href='#'>Sub Page#1</a></li> 
                <li><a href='#'>Sub Page#2</a></li> 
                <li><a href='#'>Sub Page#3</a></li> 
              </ul> 
        </li>
      </ul> 
    </div>

•  "Sub Page#1-2-3" Kodlarını kendiniz ayarlıyabilirsiniz.
• "#" Buraya İse Yönlendirilecek Web Adresini koyabilirsiniz.
• <li İle başlayıp li> İle Biten Kodu kopyalayıp altına yapıştırarak yeni bir menü ekleyebilirsiniz.
• </ul> ile başlayıp </ul> ile biten kod ise açılır menü kodudur.Yeni Eklediğiniz Kodun altına ekleyebilirsiniz.
• Gadget'ini Kaydet'ebilirsiniz.

Şimdi İse Şablo/Html'yi Düzenle Diyerek Aşağıdaki kodu aratıyoruz.(ctrl+f) 

]]></b:skin>

Bulduğumuz kodun hemen üstüne aşağıdaki kodu ekliyoruz. 

/*----- MBT Drop Down Menu ----*/

#mbtnavbar { 
    background: #060505; 
    width: 960px; 
    color: #FFF; 
        margin: 0px; 
        padding: 0; 
        position: relative; 
        border-top:0px solid #960100; 
        height:35px;
}

#mbtnav { 
    margin: 0; 
    padding: 0; 
} 
#mbtnav ul { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#mbtnav li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
        border-left:1px solid #333; 
        border-right:1px solid #333; 
        height:35px; 
} 
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { 
    color: #FFF; 
    display: block; 
   font:normal 12px Helvetica, sans-serif;    margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
        
} 
#mbtnav li a:hover, #mbtnav li a:active { 
    background: #BF0100; 
    color: #FFF; 
    display: block; 
    text-decoration: none; 
        margin: 0; 
    padding: 9px 12px 10px 12px; 
        
    
        
}
#mbtnav li { 
    float: left; 
    padding: 0; 
} 
#mbtnav li ul { 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 160px; 
    margin: 0; 
    padding: 0; 
} 
#mbtnav li ul a { 
    width: 140px; 
} 
#mbtnav li ul ul { 
    margin: -25px 0 0 161px; 
} 
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { 
    left: -999em; 
} 
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul { 
    left: auto; 
} 
#mbtnav li:hover, #mbtnav li.sfhover { 
    position: static; 
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { 
    background: #BF0100; 
    width: 120px; 
    color: #FFF; 
    display: block; 
    font:normal 12px Helvetica, sans-serif; 
    margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
z-index:9999; 
border-bottom:1px dotted #333;
    
} 
#mbtnav li li a:hover, #mbtnavli li a:active { 
    background: #060505; 
    color: #FFF; 
    display: block;     margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
}

• #060505 Kodu ana menünün arka plan renki değişimi içindir
• #BF0100 Kodu İse Fare ile sekme üzerine gelince arka plan değişimi içindir.