Cobain 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.- Letakkan script berikut dibawah <head> atau sebelum </body>.
- Supaya script diatas bekerja, silahkan tambahkan dengan script berikut ini. 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...
- Masukkan kode CSS berikut. Letakkan diatas/sebelum kode ]]></b:skin>
- Masukkan kode HTML ini.
- SAVE dan lihat hasilnya.
<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. <script type="text/javascript">
$(function(){
$("ul#menu li img").bubbleup();
});
</script>
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;
}
<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 ^.^) http://aext.net/2010/02/learn-jquery-first-jquery-plugin-bubbleup/
Good Luck (^_^)'
Tidak ada komentar:
Posting Komentar