Saturday, 11 August 2012

Colorful jQuery Menu For Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

jQuery is totally amazing and today we're going to get another amazing jquery menu for your blogs and sites. First of all just wanna remind you all that you can also use this menu in your html documents and sites.

  • Go To Blogger > Layout > Add A Widget > HTML / Javascript
  • And paste the following script :
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/Easing-Init.js"></script>
<style type="text/css">
#menu { float: left; position: relative; top: 0; left: 0; overflow: hidden; }
#menu .colourful { display: block; position: absolute; background: #f0ad22; height: 38px; width: 85px; top: 4px; left: -100px; }
#menu ul { margin: 0; padding: 0; list-style: none; float: left; position: relative; top: 0; left: 0; z-index: 1; }
#menu li { float: left; margin: 0 1px 0 0; }
#menu a:link, #menu a:visited, #menu a:hover, #menu a:active { color: #000; text-align: center; display: block; border: solid; border-width: 4px 0 0; line-height: 40px; width: 85px; }
#menu li a:hover { text-decoration: none; color: #fff; text-shadow: 0 0 1px #999; }
</style>
      <!-- start menu -->
      <div id="menu">
        <ul>
          <li>
            <a href="#">Home </a>
          </li>
          <li>
            <a href="#">Widgets</a>
          </li>
          <li>
            <a href="#">SEO</a>
          </li>
          <li>
            <a href="#">Tutorials</a>
          </li>
          <li>
            <a href="#">CSS3</a>
          </li>
          <li>
            <a href="#">jQuery</a>
          </li>
          <li>
            <a href="#">Blogging</a>
          </li>
          <li>
            <a href="#">RSS</a>
          </li>
          <li>
            <a href="#">Contact Us</a>
          </li>
        </ul>
      </div>
      <!-- end menu --> 
  • Now just replace all # with your links and all Menu item names with your custom names. 
Not Working : If it's not working then follow these steps :

  • Go To Blogger > Layout > And remove all other menus except this one.
  • Go To Blogger > Template > Edit HTML > And remove all css with #Menu.
Still not working ? Comment so i can help you.....

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
 
Powered by Blogger.