Drop Down Menus for Blogger

First change is under Layout, where you want to add a custom ‘HTML / Java Script’ gadget. To do this, click Layout then click ‘add a gadget’ box under your blog header.

Then scroll down to ‘HTML/Java Script’ and select

Copy the following contents and paste into the content box.            

 <div id='mbtnavbar'> 

<ul id='mbtnav'>
  <li>
  <a href='LINK TO PAGE 1’>NAME OF PAGE 1</a>
  </li>
  <li>
  <a href='LINK TO PAGE 2’>NAME OF PAGE 2 </a>
      <ul>
    <li><a href=’LINK TO PAGE 2, SUB-PAGE 1' >NAME OF PAGE 2, SUB-PAGE 1</a>
      </li>
      </ul>
  </li>
  <li>
  <a href='LINK TO PAGE 3'>NAME OF PAGE 3</a>
      <ul>
     <li><a href='LINK TO PAGE 3, SUB-PAGE 1’>NAME OF PAGE 3, SUB-PAGE 1</a>
      </li>
     <li><a href='LINK TO PAGE 3, SUB-PAGE 2’>NAME OF PAGE 3, SUB-PAGE 2 </a>
      </li>
     <li><a href='LINK TO PAGE 3, SUB-PAGE 3’>NAME OF PAGE 3, SUB-PAGE 3 </a>
      </li>
      </ul>
  </li>
</li></ul>
</div>                                                                                                                                                                                             

The sections need to be customised to your blog.

replace link and page name 

example 

For my blog 

<div id='mbtnavbar'>
<ul id='mbtnav'>
  <li>
  <a href='http://tutorialplustricks.blogspot.com/'>Home</a>
  </li>
  <li>
  <a href='http://tutorialplustricks.blogspot.comp/about-this-blog.html'>About this blog</a>
    <ul>
    <li><a href='http://tutorialplustricks.blogspot.com/p/feed-back.html'>Feed back</a>
    </li>
    </ul>                                                         

 Save your gadget.                                                                                   

2. Step go to the Template section of Blogger. You can do the following through ‘Edit HTML’       

Copy the following contents and paste into add CSS box . 

Copy the following into the ‘Add custom CSS’ box: 

 .Header h1 {text-shadow: 2px 2px #FFFFFF; } 

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

#mbtnavbar { 

/* background: #ff0000; */ 

width: 100%; 

color: #FFF; 

margin: 0px; 

padding: 0; 

position: relative; 

border-top:0px solid #960100; 

height: 41px; 

} 

#mbtnav { 

background: #909092; 

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:41px; } #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { color: #FFF; display: block; font:bold 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #mbtnav li a:hover, #mbtnav li a:active { background: #909092; 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: 200px; margin: 0; padding: 0; } #mbtnav li ul a { width: 180px; } #mbtnav li ul ul { margin: -35px 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: #909092; /* width: 140px; */ color: #FFF; display: block; font:bold 13px Arial, Tahoma, Helvetica, FreeSans, 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; } .tabs-inner .widget #mbtnavbar li a { border-left:none; } .tabs-outer .widget, .section { margin:0; } .tabs-inner { padding: 0px; } 

                                                                                                                                                                     

apply......

Share on Facebook Share on Twitter Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.