Pages

Tuesday, May 12, 2015

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:.
DMCAProtected by CopyscapeMyFreeCopyright.com Registered & Protected
Share :
Comments
Tweets
0 Comments

No comments:

Post a Comment