Jquery Unique Colorful Drop Down Navigation Menu Bar
In this tutorial i'm going to explain how to add unique colorful jquery navigation menu bar for blogger.There are lot of jquery menu bars available on internet but this one is unique because i foucsed on making colorful and user friendly,it will give attractive look to your blospot blog or website.just follow the steps mentioned below to grab this unique colorful hover style navigation menu bar.
How To Add 3D Effect Css Jquery Colorful Navigation Menu bar for blogger
1. Go to Blogger Dashboard > Edit Template
2. Now click anywhere inside your code area and Find by using ctrl+f </head>
3. Paste below code just above it.
5. paste below code just above it.
7. Now go to Layout and click Add a gadget and select HTML/JAVASCRIPT
8. Now paste below code in html/javascript gadget
9.Save your template,Done !!
<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/boilerplate.css" rel="stylesheet" type="text/css"/>4. Now Find </body>
<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css"/>
<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarVertical.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'/>
<script src='https://googledrive.com/host/0B58fhAmOxE7ENUdLWUNMRXVZVG8' type='text/javascript'></script>
<script src='https://googledrive.com/host/0B58fhAmOxE7EbGJPSk9ZbTV6UEU' type='text/javascript'></script>
<style>
.menubar {width: 750px;float: left;-moz-box-shadow: 0px 0px 19px #000000;-webkit-box-shadow: 0px 0px 19px rgb(0, 0, 0);box-shadow: 0px 0px 8px rgb(0, 0, 0);padding: 7px;border-radius: 4px;position: relative;margin-top: 50px;background-color: rgb(255, 255, 255);margin-left: 23%;
</style>
5. paste below code just above it.
<script type="text/javascript">6. Now save your template.
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"http://3.bp.blogspot.com/-jOaKkNotN_s/VcB5tbMh8QI/AAAAAAAABOg/88xnltShm8o/s1600/SpryMenuBarDownHover.gif", imgRight:"http://1.bp.blogspot.com/-wXA7XZQa2dw/VcB5tS7UG-I/AAAAAAAABOk/oNpVfp4UNzY/s1600/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"http://1.bp.blogspot.com/-wXA7XZQa2dw/VcB5tS7UG-I/AAAAAAAABOk/oNpVfp4UNzY/s1600/SpryMenuBarRightHover.gif"});
</script>
7. Now go to Layout and click Add a gadget and select HTML/JAVASCRIPT
8. Now paste below code in html/javascript gadget
<div class="menubar">Note: Replace # with your urls.
<ul id="MenuBar1" class="MenuBarHorizontal">
<li style="text-indent: 10px;width:80px;height:44px;background-color:#1d75bd";><a id="navhd" href="#">Home</a></li>
<li class="choosedestination"><a id="navhd" class="MenuBarItemSubmenu" href="#" style="">Free blogger tricks</a>
<ul id="destination1">
<li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul id="destination1" class="" style="margin-left: 175px;margin-top: -2px;">
<li id="desti_nav"><a href="#" class="">Item 3.1.1</a></li>
<li id="desti_nav"><a href="#" class="">Item 3.1.2</a></li>
</ul>
</li>
<li id="desti_nav"><a href="#">Item 3.2</a></li>
<li id="desti_nav"><a href="#">Item 3.3</a></li>
<li id="desti_nav"><a href="#">Item 3.3</a></li>
<li id="desti_nav"><a href="#">Item 3.3</a></li>
<li id="desti_nav"><a href="#">Item 3.3</a></li>
<li id="desti_nav"><a href="#">Item 3.3</a></li>
<li id="desti_nav"><a href="#">Item 3.3</a></li>
<li id="desti_nav"><a href="#">Item 3.3</a></li>
<li id="desti_nav"><a href="#">Item 3.3</a></li>
</ul>
</li>
<li class="holidaytp" style=""><a id="navhd" class="MenuBarItemSubmenu" href="#">CSS Tricks</a>
<ul id="holidayt" >
<li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul id="holidayt" style="margin-left: 175px;margin-top: -2px;">
<li id="holiday_nav"><a href="#">Item 3.1.1</a></li>
<li id="holiday_nav"><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li id="holiday_nav"><a href="#">Item 3.2</a></li>
<li id="holiday_nav" ><a href="#">Item 3.3</a></li>
</ul>
</li>
<li class="retriveb" style=" width: 145px;"><a id="navhd" class="MenuBarItemSubmenu" href="#">JQuery Menu bars</a>
<ul id="retrivemy">
<li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul id="retrivemy" style="margin-left: 175px;margin-top: -2px;">
<li id="Retrivebk"><a href="#">Item 3.1.1</a></li>
<li id="Retrivebk"><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li id="Retrivebk" ><a href="#">Item 3.2</a></li>
<li id="Retrivebk" ><a href="#">Item 3.3</a></li>
</ul>
</li>
<li class="makeanen" style="width: 127px;" ><a id="navhd" class="MenuBarItemSubmenu" href="#">Make an Enquiry</a>
<ul id="makenanEnquery">
<li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul id="makenanEnquery" style="margin-left: 175px;margin-top: -2px;">
<li id="mkeinq"><a href="#">Item 3.1.1</a></li>
<li id="mkeinq"><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li id="mkeinq"><a href="#">Item 3.2</a></li>
<li id="mkeinq"><a href="#">Item 3.3</a></li>
</ul>
</li>
<li style="text-indent:10px;width: 109px;background-image: url(http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/images/naw-bar6.png);background-repeat: repeat-x; margin-left: 1px;"><a id="navhd" href="#">Contact Us</a>
</ul>
</div>
9.Save your template,Done !!
Post a Comment