Sunday, 12 August 2012

CSS3 Mega Menu For blogger ! Very Stylish
















Follow simple and easy step to adding this menu to your blogger ---->>>>
* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

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

* Copy below code after <head>


<link href="https://4636338866364619332-a-1802744773732722657-s-sites.googlegroups.com/site/mauganj1/megamenu.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="topfirst"><a href="#" title="Item 0"><img src="http://santabanta.mywapblog.com/files/clock.png" alt="Item 0"/>Item 0</a></li>
 <li class="topmenu"><a href="#" title="Item 1"><span><img src="http://santabanta.mywapblog.com/files/attachment.png" alt="Item 1"/>Item 1</span></a>

 <div class="submenu" style="width:276px;">
 <div class="column" style="width:33.33%"><ul>
  <li><a href="#" title="Item 1 0"><img src="http://santabanta.mywapblog.com/files/accept.png" alt="Item 1 0"/>Item 1 0</a></li>
  <li><a href="#" title="Item 1 1"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 1</a></li>
  <li><a href="#" title="Item 1 2"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 2</a></li>
  <li><a href="#" title="Item 1 3"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 3</a></li>
 </ul></div>

 <div class="column" style="width:33.33%"><ul>
  <li><a href="#" title="Item 1 4"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 4</a></li>
  <li><a href="#" title="Item 1 5"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 5</a></li>
  <li><a href="#" title="Item 1 6"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 6</a></li>
  <li><a href="#" title="Item 1 7"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 7</a></li>
 </ul></div>
 <div class="column" style="width:33.33%"><ul>

  <li><a href="#" title="Item 1 8"><img src="http://santabanta.mywapblog.com/files/accept.png" alt="Item 1 8"/>Item 1 8</a></li>
  <li><a href="#" title="Item 1 9"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 9</a></li>
  <li><a href="#" title="Item 1 10"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 10</a></li>
  <li><a href="#" title="Item 1 11"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 11</a></li>
 </ul></div></div>

 </li>

 <li class="topmenu"><a href="#" title="Item 2"><img src="http://santabanta.mywapblog.com/files/chart-pie.png" alt="Item 2"/>Item 2</a></li>
 <li class="toplast"><a href="#" title="Item 3"><img src="http://santabanta.mywapblog.com/files/lock.png" alt="Item 3"/>Item 3</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.

No comments: