Today, we are providing you the widget that surely will make you feel good to see on your blog/site. This widget is Drop Down Menu bar. Many of us seen simple navigation menu's but this one is very unique and impressive. Try and see yourself.
Steps to follow :
1) First, Download the files below and upload them into your file hosting site (eg: googlepages)
to get the DIRECT LINKS to these files.
slidemenu_hori.css &
slidemenu_horiz.js
2) Now, log in into blogger and go to LAYOUT
3) Click on Edit HTML
4) Find </head> (Use Ctrl + F)
5) Before </head> Place the code below:
<link rel="stylesheet" type="text/css" href="http://sigmirror.com/............/slidemenu_hori.css" />
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://sigmirror.com/.............../slidemenu_horiz.js"></script>
NOTE: Replace the above links with yours.
6) Save the Template.
7) Again, go to LAYOUT Section & Click on ADD PAGE ELEMENT, where you want to add
this widget.
8) Place the code below:
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://bloggerstop.net">Blogger Help</a></li>
</ul>
<br style="clear: left" />
</div>
9) Edit the above code as per your requirement and save the widget.
Credit: Bloggerstop
"If you still face any problem, do write your problem in comment box. I will try to solve it as soon as possible"
Subscribe to my feed
Awesome Tutorial !!