Image Buble with jQuery pada blog

Hallo ketemu lagi sama Karya Anak Kidoel ini ada sedikit tips buat para bloger yang menginginkan aplikasi ini. Untuk melihat Demonya silahkan klik di salah satu situsnya kang ciamis bloger disini



Cara membuatnya :



1. Login blogger

2. Rancangan, Edit Html, Cari kode ]]></b:skin>

3. Dan Simpan kode di bawah ini berikut diatasnya : 

/* Buble Image with jQuery



----------------------------------------------- */



.bubblewrap{

list-style-type:none;

margin:0;

padding:0;

}

.bubblewrap li{

display:inline-block;

zoom:1; /*Trigger haslayout in IE7 and less*/

*display:inline; /*For IE7 and less*/

position:relative;

width: 65px;

height:60px;

}



.bubblewrap li img{

position:absolute;

width: 55px; /*default width of each image.*/

height: 60px; /*default height of each image.*/

left:0;

top:0;

border:0;

}



.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/

position:absolute;

font:bold 12px Arial;

padding:2px;

width:100px;

text-align:center;

background:white;

}



/*CSS for 2 demos on the page*/

#orbs li{

width: 65px; /*width of image container. Should be wider than contained images (before bubbling) */

height:60px; /*height of image container. Should be taller than contained images (before bubbling) */

}



#orbs li img{

width: 55px; /*width of each image before bubbling*/

height: 60px; /*height of each image*/

}



#squares li{

width: 45px; /*width of image container. Must be wider than contained images (before bubbling) */

height:40px; /*height of image container. Must be taller than contained images (before bubbling) */

}



#squares li img{

width: 31px; /*width of each image before bubbling*/

height: 31px; /*height of each image*/

}

4. Selanjutnya simpan java script berikut diatas kode</head> :   

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

 

5. jika sudah, sekarang simpan kode berikut tepat diatas kode </body>



<script src='http://kangdadang.googlecode.com/files/imgbubbles.js' type='text/javascript'>

</script>

<script type='text/javascript'>

jQuery(document).ready(function($){

    $(&#39;ul#orbs&#39;).imgbubbles({factor:1.75}) //add bubbles effect to UL id=&quot;orbs&quot;

    $(&#39;ul#squares&#39;).imgbubbles({factor:2.5}) //add bubbles effect to UL id=&quot;squares&quot;

})

</script>

6. Simpan template.....

Maaf sebelumnya masih ada 1 x lagi pekerjaan yang belum selesai ok langsung saja

Untuk pengerjaannya silahkan ikuti langkah - langkah di bawah ini :



1. Masuk dulu ke Rancangan,

2. Kemudian klik Tambah Gadget,

3. Terus klik Html/Java Script :

4. Terserah kalian mau yang mana ....!!!!!



Untuk Contoh 1

<h4>Contoh 1</h4>

<ul id="orbs" class="bubblewrap">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Fj9m6fLnk175fqmAMHqqkrI1vQoo577Q4dA2IHpz2XPL7MqSr39g6jiS8r480l1UoILGgxLKH4kHRw1HKSGTzJTGw_avX52L2NwTvPWdiNHHkerzTDP1J55c4eJeY_XY-tjnR2EaLms/s1600/stumbleupon.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRXHRWxLDu7CIG06XucVzkcDgPjws8wxRBvwPEvvE83MXLOvAQuFkl_29yuo-J9QWKBHw3OBHDJhLd1YLFs7FmBhDuqB671LNzupHYR2XCyWS9YLpYdqxasJdWanlgRGLN73LMLiIurfM/s1600/facebook.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfHh2ze4BBN01X2ZQYi47jkB05eUz9PieOMvxnEnznKeXrvaYUQnHw09aZd9YbtKkvzyKiNdaYcmTDM9S6hv9UjZieHb2pSIQW4C3EFG5UcsbuJRaCMgDKgxCE6gUDWDonpFrRNj-u7qg/s1600/digg.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSZO4froF3Se71TI1qynEGjd6YPhfvmQWRKz8yHz4HBu8cJN5Va2yhd5MuORrbVso82TfLCG44eaU0-s7bcxukK3QTKLE7jPUJ1tMWk0KoHoSMiVBBgTjy-x6sM6rr4P9r5QwUtrkvXcM/s1600/twitter.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZsIYmh3yXxQmX3EyCHCT5Bp9BCzZamyuFCGQD702fOskR_gknjgDhn3Zx53XN0Mh5WE3X5rjB9XOFPP2y2OdPT0UbZ6i5jfvTGYyY_LzZqiSfvJAUYycTTP1RcKXODYXgQdyw-luEmI4/s1600/rss.png" /></a></li>

</ul>

Untuk contoh 2

<h4>Contoh 2</h4>

<ul id="squares" class="bubblewrap">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnkSKpfhu-cU3mecmu1jJOsFGUBL-LsniuPg8cTHX0vs6lB3GRSdBCem_MOZ8W_dcwQ8vJBAr7KVSgLk0tu72bKuSIDJd-vVTKmsjx_uvCOOY2ItaW3LK7cDSs4utcAo286jFNbkYkzPs/s1600/facebook1.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUQvqzjcYIuTkmO3GVhnbLZwJAIVPuxQYapDjU2zFR2zunYdv5l2zKZeCSfsYo6ECEekXc0mmkjNOwgaT7Pu7mo7JW2H-3QGqkauwiZ64a3eIfghsSfC0i573gN7jOC2NQqmcxqXAYamM/s1600/delicious.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFhnRtWRxTj-0yffdrfIwQ12kFvYI-QMC2Zo2LgnJp7l40S2FjTL2tH1FIvG2eJGc1srroa7bAYkYbF_vUf5oWCPaKuwQe_jJxt-8frr7UV-PUsFJYdBSbwWC_fVG9xQhjL8nI1AU9lmA/s1600/digg1.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJY9IUhbPxEUk4XZPl6rVLTlLlEsXTRAuqrPm5o_fLolOwi4107vRBEdpkbHQDisqjFsciq-F5DXeJMGLUa8Yc_MuSuqq3n_qP-creKhnTERsMaNcCqR4xxu-4liHKRnq7_FZc7cCLrc/s1600/stumbleupon1.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3HmYDJQZH9tj12xM7FXZgYXK6TxB_1dF3-YuXIokBdH9ca3CJIOjW1kg0wYv8mDkiIRtjGf5sVaGum_qfiKZVoNbBs-sH1ExTTic9upBZwCFmrNaabu5X1XFur9RFUG9jm2Kk0nZiA1A/s1600/rss1.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik9-XUVfNhjletqB15OAwISXjWe5LgmPwLbmQdceEBWy5poR4Pm7HbCKSlZD9_559wZFik-YnBo5_m47MDxZNm0ZLjcSiAuL9v-dKQSeVyUrdPP6RWEMS1D7iMIhB7MfqjGlKWAcFd1XE/s1600/twitter1.png" /></a></li>

</ul>

4. Simpan.......





Untuk penempatan image buble nya silahkan ganti sesuai kebutuhan baik itu pada header nav, gadget, ataupun pada postingan..

Selamat mencoba.....

Keterangan : sebagai tambahan. jika script http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js  ini sudah ada pada template kawan-kawan, kawan semua tak perlu lagi mnambahkan script tadi pada template yang dipakai

Terima Kasih

Created By Syarief Hidayat



------------------------------------------------------------------------------------------