CSS3 Multicolumn Blocks Blue Navigation menu for blogger . ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

CSS3 Multicolumn Blocks Blue Navigation menu for blogger.

Follow simple and easy step to adding this special menu to your blog --->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger Template.

* Now find this code <head> by CTRL+F key.

* Copy below code and paste after <head>

 <link href="https://4636338866364619332-a-1802744773732722657-s-sites.googlegroups.com/site/mauganj1/CSS3Multicolumn.css" rel="stylesheet" type="text/css"></link>

* Now click to save your blogger Template.

* Again go to your blogger Dashboard and click in design tab.

* Now you are here --->>> Page Element.

* Click in Add Gadget which is in blog sidebar.

* When open new window click in HTML/javascript from list.

* When open new blank box copy below code and paste in blank box.

<ul id="css3menu" class="topmenu" style="position: relative;top: -25px">
 <li class="topmenu"><a href="#" title="HOME">HOME</a></li>
 <li class="topmenu"><a href="#" title=""><span>PRODUCT INFO</span></a>

 <div class="submenu" style="width:376px;">
 <div class="column" style="width:50%"><ul>
  <li><a href="#" title="">2.1 Features</a></li>
  <li><a href="#" title=""><span>2.2 Installation</span></a>
  <div class="submenu">
  <div class="column"><ul>
   <li><a href="#" title="">2.2.1Description of Files</a></li>

   <li><a href="#" title="">2.2How to Setup</a></li>
  </ul></div></div>

  </li>
  <li><a href="#" title="">2.3 Parameters Info</a></li>
 </ul></div>
 <div class="column" style="width:50%"><ul>
  <li><a href="#" title="">2.4 Dynamic Functions</a></li>

  <li><a href="#" title=""><span>2.5 Supported Browsers</span></a>
  <div class="submenu" style="width:286px;">
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="">Firefox</a></li>
   <li><a href="#" title="">Internet Explorer</a></li>
   <li><a href="#" title="">Opera</a></li>
  </ul></div>

  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="">Safari</a></li>
   <li><a href="#" title="">Google Chrome</a></li>
   <li><a href="#" title="">Konqueror</a></li>
  </ul></div></div>

  </li>
  <li><a href="#" title="">CSS3 Info</a></li>

 </ul></div></div>

 </li>
 <li class="topmenu"><a href="#" title=""><span>SAMPLES</span></a>
 <div class="submenu" style="width:441px;">
 <div class="column" style="width:33.33%"><ul>
  <li><a href="#" title="">Android Template</a></li>
  <li><a href="#" title=""><span>Blocks Template</span></a>

  <div class="submenu" style="width:342px;">
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="">Blue Theme</a></li>
   <li><a href="#" title="">Green Fodder Theme</a></li>
   <li><a href="#" title="">Grey Theme</a></li>
  </ul></div>
  <div class="column" style="width:50%"><ul>

   <li><a href="#" title="">Light Theme</a></li>
   <li><a href="#" title="">Orange Theme</a></li>
   <li><a href="#" title="">Purple Theme</a></li>
  </ul></div></div>

  </li>
  <li><a href="#" title="">Elegant Template</a></li>

 </ul></div>
 <div class="column" style="width:33.33%"><ul>
  <li><a href="#" title="">Frame  Template</a></li>
  <li><a href="#" title="">Fresh Template</a></li>
  <li><a href="#" title="">Mac Template</a></li>
 </ul></div>
 <div class="column" style="width:33.33%"><ul>

  <li><a href="#" title=""><span>Neon Template</span></a>
  <div class="submenu" style="width:266px;">
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="">Green Theme</a></li>
   <li><a href="#" title="">Liliac Theme</a></li>
   <li><a href="#" title="">Blue Theme</a></li>
  </ul></div>

  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="">Neon Theme</a></li>
   <li><a href="#" title="">Orange Theme</a></li>
  </ul></div></div>

  </li>
  <li><a href="#" title="">New Templates</a></li>
 </ul></div></div>

 </li>
 <li class="topmenu"><a href="#" title="">DOWNLOAD</a></li>
</ul>

* Now click to save your HTML/javascript and after saving this element Drag and drop below header and again click to save button ok.

* Now you are done Cheers.