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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMGYXOswtx7DKi7-QFUdr6n2ThuwQjpd0fsnDWiUcFBJP_KihBYBVyfafO6-X3pdSeBDPLWPAXTPznBfeeI2Utdo79PhvFejBrkcWj7UdGmq2M1GAarQETdwuuZkmwb4D3UJgmbpQpUpE/s1600/btrix_green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGZHAIG1v8aRhmR4yyD-zf4JvRX4tgAOjGi3CUgUaXYWan226g-0KV5syoYeuOxBdCFbxaGAdA95tk-v8DijmWsjYK3srr_nFMWINELTQbn5D0Vt34Iv_epXSWIEa1z8Dx_bz8mJbxjxk/s1600/btrix_purple-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDF8heFl7C9hL86qfL1Ea-khIbgtYDY2MWtZyVTdGjckJsATlJjvnbd5Ji4dEDx36BYGvyctTPCxPjqyf5IJAuKL3c9jeVF42ZW8LKzjcrPji429fkd1HmCi-fhYYJsMYYRjMatZYfCIE/s1600/btrix_red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsZ92wTsKtDL6orfc2np0o-g1_Ia-iK3VDarbvcc5gjLTTgYE_8mP9Hzs1qu5_jQSXOqlNhZFAMd-h4jOgrWVQOit1bHkLXF08mLqgpprlwjmVMdjt85Rgbt5pdTDsfuyPr393iGZvhTo/s1600/btrix_blue-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6XdH5VBVKtHMDOkfPSwQsDxJbiWPudYRfa5Bp7rTD_uk-vgUF5_d8Ts08lgbFFReUpqWPMKNlNNmMbSrjzmGzxjbvEq7UCCVLT5WWz7ZkRwGTzY34Duan8SWgsJacWaOyZQcx5iKI2RU/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.