Rabu, 24 Februari 2010

BUBBLE UP PLUGIN WITH JQUERY

PicCobain posting tentang jquery ah ^_^ Para sobat blogger mungkin sudah tidak asing lagi dengan istilah Plug-in!!! Secara kasar dapat diartikan memanggil script yang ada di satu directory utama script. Gitu deh pokoknya +_+' Sudah banyak sekarang script yang menggunakan teknik plugin ini guna mempermudah pengunaannya. jQuery, MooTools, JavaScript dan masih banyak lagi. Sekarang BeBeN mau berbagi bagaimana menggunakan plugin jQuery ini dalam tombol share/save, bookmark atau lainnya. Itu yang ada dibawah postingan adanya tuh.
  1. Letakkan script berikut dibawah <head> atau sebelum </body>.
  2. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> <script type="text/javascript" src="js/bubbleup.jquery.js"></script>
    Kalau http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js sudah ada tidak usah dipasang lagi. Pasang saja yang bawahnya itu. Ini scriptnya di download dulu Bubbleup jQuery.
  3. Supaya script diatas bekerja, silahkan tambahkan dengan script berikut ini.
  4. Oh iya, letakkan script yang ini selama masih ada di dalam tag <head> atau <body>. Kalau pusing letakkan saja bersama dengan langkah pertama diatas. Boleh juga diletakkan sebelum/diatas tag </body>. Ini dia scriptnya...
    <script type="text/javascript">

    $(function(){

    $("ul#menu li img").bubbleup();

    });

    </script>
  5. Masukkan kode CSS berikut.
  6. Letakkan diatas/sebelum kode ]]></b:skin>
    ul#menu {
    padding-top:30px;
    margin: 5px 0px;
    }

    ul#menu li {
    padding: 0px;
    display: inline-block;
    *display: inline; /* IE 7 and below */
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    width: 48px;
    height: 48px;
    }

    ul#menu li img {
    width: 48px;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    margin: 0 8px 0 0;
    border: none;
    }
  7. Masukkan kode HTML ini.
  8. <ul id="menu"> <li> <a href="#" title="Full RSS Feed"> <img src="/images/feed.png" alt="Full RSS Feed"> </a> </li> <li> <a href="#" title="E-Mail Delivery"> <img src="/images/email.png" alt="E-Mail Delivery"> </a> </li> <li> <a href="#" title="Follow me on Twitter"> <img src="/images/twitter.png" alt="Follow me on Twitter"> </a> </li> <li> <a href="#" title="I'm on FaceBook"> <img src="/images/facebook.png" alt="I'm on FaceBook"> </a> </li> <li> <a href="#" title="E-Mail Delivery"> <img src="/images/delicious.png" alt="Save it!"> </a> </li> <li> <a href="#" title="E-Mail Delivery"> <img src="/images/technorati.png" alt="Favorite this blog"> </a> </li> </ul>
    Download gambar berikut Gambarnya. Lalu hosting gambar tersebut dan masukkan ke dalam kode HTML di atas. (bisa juga kode HTML ini diletakkan di bawah kode akhiran bagian postingan blog sobat ^.^)
  9. SAVE dan lihat hasilnya.
Download Complete Script + CSS.
http://aext.net/2010/02/learn-jquery-first-jquery-plugin-bubbleup/

Good Luck (^_^)'

Tidak ada komentar:

Posting Komentar