MonozCore

Blogging for fun - no terms & condition

Followers

Memasang Menu Bar jQuery Efek Bouncing Untuk Blogger


Dalam tutorial kali ini saya akan menjelaskan bagaimana menambahkan Menu dengan Efek Bouncing menggunakan jQuery. Menu ini memiliki efek Hover yang bagus dan setiap menu Warnanya Berbeda beda. Cukup menggunakan HTML dan jQuery untuk membuat menu ini dan menu ini mudah untuk di pasang ke blog anda, untuk melihat contoh Menu seperti yang terlihat di bawah ini.


Cara Pemasangan
  • Login ke blog sobat.
  • Klik "Design" kemudian klik "Edit HTML".
  • Cari kode </Head> kemudian copy-paste kode dibawah ini tepat di atas kode </Head>.

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

    • Jika di template blog sobat sudah ada kode jQuery silakan hapus baris kode script pertama "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js?ver=3.2.1' type='text/javascript'></script>".
    • Pastikan hanya memakai satu kode jQuery.

  • Cari kode <Body> kemudian copy-paste kode dibawah ini tepat di bawah kode <Body>.

    <style>
    .bounce{margin:0;padding:0;}
    .bounce a:link{font-family:Arial;color: #F8F8F8;text-decoration: none;font-weight: bold;}
    .bounce li{ width:100px; height:50px; float:left; color:#191919; text-align:center;overflow:hidden;}
    .bounce a{color:#FFFFFF; font-size:15px; text-decoration:none;}
    .bounce 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 class="bounce">
    <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: 50px; 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>

    • Ganti " # " dengan URL Link untuk masing-masing menu.
    • Silakan sesuaikan ukuran pada kode CSS dan style supaya sesuai dengan tema template sobat.

  • Klik "Save" dan lihat hasilnya...
.:Selamat Mencoba:.
Bagikan :
+
Previous
Next Post »
Comments
Tweets
0 Comments

0 Komentar untuk "Memasang Menu Bar jQuery Efek Bouncing Untuk Blogger"

Yahoo Minion UpinIpin Kaskus Special-Code

Recent Comments

 
Copyright © 2010 MonozCore - All Rights Reserved
Back To Top