Animasi Social Bookmark MobilyBlock

Masih seputar social bookmark yang kian hari semakin variatif dan inovatif. Masih ingat dengan MobilyBlock? Sebuah plugin animasi social bookmark yang menggunakan jQuery sebagai penggeraknya sehingga menghasilkan tampilan yang menurut saya mengagumkan. Namun sayang plugin ini tidak suport dengan jQuery terbaru saat ini, maksimal harus menggunakan jQuery 1.8.3 ke bawah.

Animasi Social Bookmark MobilyBlock

Demo

Setelah berusaha keras surfing di Google™ akhirnya saya dapat juga link untuk mendownload kode-kode plugin ini. Memang ada beberapa blog yang menyediakan tutorial ini, tapi sayang mereka menggunakan link demo dari website resmi pengembang plugin ini yang sekarang ini linknya sudah tidak valid, alhasil tampilan demo pun tidak bisa ditayangkan.

Di sini saya mencoba untuk membagikan sesuatu yang saya tahu, selebihnya mau di apakan plugin ini terserah Anda. Silahkan memodifikasi sesuai dengan kreatifitas yang Anda miliki. Untuk mengintegrasikan ke dalam Blogger™ caranya relatif mudah, silahkan ikuti tutorial di bawah ini.

Membuat Template Cadangan

Masuk ke Blogger.com » Template » Cadangkan/Pulihkan » Unduh Template Lengkap. Tujuannya sebagai langkah antisipasi jika nanti terjadi kesalahan. Biasakanlah kebiasaan baik ini meskipun Anda sudah sangat yakin tidak akan melakukan kesalahan.

Menambahkan Kode CSS

Sekarang kita akan menambahkan kode CSS, salin kemudian tempel kode CSS berikut di atas kode ]]></b:skin>

/* MobilyBlocks
-----------------------------------------------*/
.socials {
 display:block;
 width:32px;
 height:32px;
 background:url(http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/img/socials/share.png) no-repeat;
 cursor:pointer;
 position:relative;
}
.nature {
 display:block;
 width:150px;
 height:150px;
 background:url(http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/img/nature/img1.png) no-repeat;
 cursor:pointer;
 position:relative;
}
.socials, .nature {
 margin:0 auto;
}
.socials {
 margin-bottom:50px;
}
ul.reset,
ul.reset li {
 display:block;
 list-style:none;
 padding:0;
 margin:0;
}
ul.reset li {
 position:absolute;
}
ul.reset li a {
 outline:none;
}

Menambahkan Kode JavaScript

Masih pada HTML Editor template, temukan kode </head>, salin dan letakkan kode JavaScript berikut di atas kode </head> kemudian simpan pengaturan ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/js/mobilyblocks.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){ 
 $(&#39;.socials&#39;).mobilyblocks(); 
 $(&#39;.nature&#39;).mobilyblocks({
  trigger: &#39;hover&#39;,
  direction: &#39;counter&#39;,
  duration:500,
  zIndex:50,
  widthMultiplier:1.15
 }); 
});
</script>

Sebagai pengecualian, kode yang saya highlight pada baris kode no. 1 di atas adalah jQuery. Jika di dalam template Anda sudah dilengkapi dengan jQuery, maka abaikan kode tersebut, sebaliknyaa jika belum maka Anda harus memasangya supaya plugin ini bisa bekerja.

Menambahkan Kode Widget

Langkah terakhir adalah menambahkan kode widget di area di mana widget ini ingin ditampilkan, saya ambil contoh misal di sidebar. Masuk ke halaman Tata Letak, klik Add Gadget, pilih HTML/JavaScript. Salin kemudian tempel kode berikut ini pada formulirnya kemudian simpan.

<div class="socials">
  <ul class="reset">
    <li><a href="#"><img src="http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/img/socials/delicious.png" alt="" /></a></li>
    <li><a href="#"><img src="http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/img/socials/digg.png" alt="" /></a></li>
    <li><a href="#"><img src="http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/img/socials/google.png" alt="" /></a></li>
    <li><a href="#"><img src="http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/img/socials/stumbleupon.png" alt="" /></a></li>
    <li><a href="#"><img src="http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/img/socials/technorati.png" alt="" /></a></li>
    <li><a href="#"><img src="http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/img/socials/twitter.png" alt="" /></a></li>
  </ul>   
</div> 
<div class="nature">
  <ul class="reset">
    <li><a href="#"><img src="http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/img/nature/img2.png" alt="" /></a></li>
    <li><a href="#"><img src="http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/img/nature/img3.png" alt="" /></a></li>
    <li><a href="#"><img src="http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/img/nature/img4.png" alt="" /></a></li>
    <li><a href="#"><img src="http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/img/nature/img5.png" alt="" /></a></li>
    <li><a href="#"><img src="http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/img/nature/img6.png" alt="" /></a></li>
    <li><a href="#"><img src="http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/img/nature/img2.png" alt="" /></a></li>
    <li><a href="#"><img src="http://ellmoo.googlecode.com/svn/trunk/Demo/mobilyblocks/img/nature/img3.png" alt="" /></a></li>
  </ul>   
</div>

Ganti kode # pada baris kode HTML di atas dengan link atau tautan milik Anda. Sebagai catatan saya tidak bisa menjamin sampai kapan image yang saya hosting di akun Googlecode bisa bertahan, untuk itu saya sarankan kepada Anda untuk menggunakan hosting sendiri di Google code untuk menghindari jika nanti terdapat link yang rusak.

Anda bebas memodifikasi kode di atas sesuai dengan tingkat kreatifitas yang Anda miliki. Adapun jika ada kekurangannya atau ada yang ingin ditambahkan silahkan kirimkan masukan baik tersebut di kolom komentar blog ini. Semoga apa yang saya tulis kali ini bermanfaat ada kurang lebihnya saya minta maaf yang sebesar-besarnya. Happy Blogging. :-)

—ς∞ς—

Tweet

Postingan terkait:

Ditulis EM — Sunday, 12 May 2013 — Add Comment — Blogger Widgets, jQuery, Social Media