Add Jquery Bouncing Effect Navigation Menu Bar

0
Add Jquery Bouncing Effect Navigation Menu Bar

How To Add Jquery Bouncing Effect Navigation Menu Bar For Blogger

1. Log in to blogger account
2. Now select Template
3. Now Click EDIT HTML Button
4. Find this tag by using Ctrl+F </head>
5. Paste below code Before</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js?ver=3.2.1' type='text/javascript'/>
<script src='http://bloggertrixcode.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://bloggertrixcode.googlecode.com/files/animated-menu.js' type='text/javascript'/>
6. Go to blogger and click Layout
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.
<style>
ul{
 margin:0;
 padding:0;
}
a:link {
color: #F8F8F8;
text-decoration: none;
font-weight: bold;}
li{
 width:100px;
 height:50px;
 float:left;
 color:#191919;
 text-align:center;
 overflow:hidden;
}
a{
 color:#FFFFFF;
font-size:15px;
 text-decoration:none;
}
p{
 padding:0px 5px;
}
 .subtext{
  padding-top:15px;
 }
/*Menu Color Classes*/
.green{background:#6AA63B url('http://3.bp.blogspot.com/-3cLBeUu-1R0/UTgpxWnSwKI/AAAAAAAAHIk/2h3-L7TZ_gw/s1600/btrix_green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('http://4.bp.blogspot.com/-EzBNw2YVc7Q/UTgpxf566uI/AAAAAAAAHIo/Sob7Coasfr8/s1600/btrix_purple-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('http://3.bp.blogspot.com/-12cl-ExmtYQ/UTgpyR2j_4I/AAAAAAAAHIs/aGoTV2vhII8/s1600/btrix_red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('http://1.bp.blogspot.com/-j-GJUBRUWOE/UTgpxW6-ETI/AAAAAAAAHIw/TPHf5UHYokI/s1600/btrix_blue-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('http://1.bp.blogspot.com/-c-QpLECnz4c/UTgpyg_c_LI/AAAAAAAAHJA/2CxSN50MOiA/s1600/btrix_yellow-item-bg.jpg') top left no-repeat;}
</style>
<ul>
  <li style="overflow: hidden; height: 50px; display: block;" class="green">
   <p><a href="#">Home</a></p>
   <p class="subtext">The front page</p>
  </li>
  <li style="overflow: hidden; height: 48px; display: block;" class="yellow">
   <p><a href="#">About</a></p>
   <p class="subtext">More info</p>
  </li>
  <li style="overflow: hidden; height: 50px; display: block;" class="red">
   <p><a href="#">Contact</a></p>
   <p class="subtext">Get in touch</p>
  </li>
  <li style="overflow: hidden; height: 50px; display: block;" class="blue">
   <p><a href="#">Submit</a></p>
   <p class="subtext">Send us your stuff!</p>
  </li>
  <li style="overflow: hidden; height: 50px; display: block;" class="purple">
   <p><a href="#">Terms</a></p>
   <p class="subtext">Legal things</p>
  </li>
 </ul>
 <script type="text/javascript">
 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
 </script>
 <script type="text/javascript">
 try {
 var pageTracker = _gat._getTracker("UA-6444047-1");
 pageTracker._trackPageview();
 } catch(err) {}</script>
*Change All # With Your Links.

9. Now save your HTML/Javascript'. Done!

If you have any query regarding Bouncing Jquery  Navigation Menu Bar for blogger.it give amazing look to your website or blog.Feel free to ask,just drop your comment below.
how to add Jquery Bouncing Effect Navigation Menu Bar into for blogger blogspot.jquery bouncing hover effect on navigation colourful menu bar for website,green,yellow,red combination menu bar
How To Add Jquery Bouncing Effect Navigation Menu Bar For Blogger 1. Log in to blogger accou...
SUMMARY

how to add Jquery Bouncing Effect Navigation Menu Bar into for blogger blogspot.jquery bouncing hover effect on navigation colourful menu bar for website,green,yellow,red combination menu bar

You Might Also Like:

We hope this article helped you to learn Add Jquery Bouncing Effect Navigation Menu Bar. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Add Jquery Bouncing Effect Navigation Menu Bar" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

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