Also Read
Also Read
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 !!
SUMMARY
how to add Jquery stylish unique beautiful Colorful Drop Down Navigation Menu Bar for blogger blogspot,red,green,blue,purple,magenta colour combination menu bar with hover effect,3d css effect bar
Post a comment Blogger Disqus
0 Comments on "Jquery Unique Colorful Drop Down Navigation Menu Bar" So Far - Comment Now!
MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>
Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand