Memasang Menu Bar jQuery Efek Bouncing Keren untuk Blogger

Dalam tutorial kali ini saya akan menjelaskan bagaimana menambahkan Menu Efek Bouncing menggunakan jQuery. menu ini memiliki efek Hover yang bagus. Setiap menu Warnanya Berbeda beda. Saya Menggunakan HTML dan jQuery untuk membuat menu ini, menu ini mudah untuk di tambahkan ke blogger anda, untuk melihat Menu Lainya klik disini.

1. Buka Akun "Blogger" anda.

2. Sekarang Pilih "Template".

3. Sekarang Anda dapat melihat Langsung pada blog, klik "EDIT HTML" Button.

4. Sekarang klik tombol Lanjutkan.

5. Cari tag ini dengan menggunakan Ctrl + F </ head>.

6. Paste kode di bawah Sebelum </ head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js?ver=3.2.1' type='text/javascript'/>
<script src='https://mycodewebsite.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='https://mycodewebsite.googlecode.com/files/animated-menu.js' type='text/javascript'/>

7. Pergi ke blogger dan klik Layout
8. Klik Tambah Gadget dan pilih "HTML / Javascript"
9. Paste kode di bawah ini. 

 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/AVvXsEg9oI-45Ug1qeI-dPfFHCygTiB1HC1QbqNXq-l_7QP-gGlRRv4M41cOR-86k5yGE9j3k7AxwxFo8HFSBoTdUPp1Hb2ucbCZAbK7OuDllIDL5rJgHdAtDr9EJVpkxcF03LUcqNbuwUyWu2Y/s1600/btrix_green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFrqQqgc2fgYAC91lBRPMgzIvHTTGYIJ4HlMg3vSX4yF_oA3-eWI5k766SDd5fMZ0h3UHezXJxJ3fotX5UNtuSWe2rn6be0qbaLiE0C6s0tO01ahm4pJlTAZGqqgWj1pq2iHT33MssTO8/s1600/btrix_purple-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6OSHN8giMnsdCZtiAYVpQYIbZhxcDIQd9iNfRCVeC-aHjr4izqxZsVOyNMcZ2sQmUTHkE8fvh-vjpWK7n0Hloq_eXgzmEsQ0fzsIaa-Y34MUKktOSCpSkhZjVFcY2royb7w3AW6ltMtQ/s1600/btrix_red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhLRIjcNtaU3FFldeBW01Cl8tH_9yP5abmxQJwSDOyWzaC2Y4W8MaSlnhFlzBUT4luJsb1h4EV2E3OpwRslqN3Q4901wAYsIlscqIgUTYYZ8_yR_5maX24_eOiHTtcNf0pQ19M6T6_NQY/s1600/btrix_blue-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr1PtWH_DWIxajj1Hw9Y4mChd1GXeU-o612TsyNu59DSqTjmQOJN0FcnJvBSpb5c3_p7-2cXdQ-MkOjvKvaCRK-s5tCLAa1UrWUPySXg2nN1CnvIaILKngBvxTDDPAUab7eCkJTGrLE2c/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>

Informations :
Ganti tanda # Link kamu.

10. Sekarang menyimpan HTML / Javascript '.

Sekian dulu tentang Artikel Memasang Menu Bar jQuery Efek Bouncing Keren untuk Blogger semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.sumber