Drag to Share Blogger dengan prettySociable

Anda mempunyai akun di Facebook? tidak? jejaring sosial lain? Twitter mungkin? tidak juga? Astaga, ke mana saja Anda selama ini? :D. Nah, saya yakin sebagian (besar) dari Anda mempunyai akun jejaring sosial, demikian juga pembaca blog Anda. Melihat kenyataan tersebut, alangkah baiknya kita sebagai narablog menyediakan fasilitas kepada pembaca blog (yang juga pengguna jejaring sosial) berupa kemudahan dalam berbagi tautan (link) atau pun foto/gambar. Untuk itu kita memerlukan widget yang sering disebut dengan social bookmark. Bosan dengan social bookmark biasa? Mungkin tutorial ini dapat Anda jadikan alternatif :). Adalah prettySociable, sebuah plugin JQuery serupa social bookmark dengan konsep drag to share.


Penerapan prettySociable di template blogger atau blogspot pada dasarnya cukup mudah, hampir sama dengan penerapan plugin JQuery pada umumnya. Penasaran? ikuti langkah saya :)

Langkah 1
Unduh prettySociableCustom.js dan prettySociableCustom.css (password: berandabumi.co.cc)


Langkah 2
Login ke akun Blogger Anda dan tuju halaman Edit HTML, unduh template Blogger Anda untuk jaga-jaga.


Langkah 3
Buka prettySociableCustom.css menggunakan notepad, salin semua kode di dalamnya, lalu tempel di atas ]]></b:skin>


Langkah 4
Cari kode JQuery di halaman Edit HTML, bila belum ada, tempatkan kode JQuery berikut di atas kode </head>


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



Langkah 5
Unggah prettySociableCustom.js pada hostingan Anda (Google code atau Fileave.com)

Tempatkan tautan file yang telah Anda unggah seperti kode berikut

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



Langkah 6
Letakkan kode pada Langkah 5 di bawah kode JQuery (Langkah 4)


Langkah 7
Taruh kode berikut di atas </body>

<script charset='utf-8' type='text/javascript'>
$(document).ready(function(){
$.prettySociable();
});
</script>



Langkah 8
Simpan template Anda.

Lalu bagaimana cara prettySociable pada tautan maupun gambar?
Terdapat tiga pilihan pemasangan prettySociable:

Pertama
Default Sharing:
Pemasangan pada tautan biasa
<a rel="prettySociable" href="#">Default sharing</a>

Kedua
Custom Sharing
Pemasangan pada tautan dengan judul tertentu
<a rel="prettySociable;title:Judul Anda;excerpt:Judul Anda yang lain." href="#">Custom sharing</a>

Ketiga
Image Sharing
Pemasangan pada tautan gambar
<a rel="prettySociable" href="#"><img src="gambarAnda.jpg" alt="gambar" /></a>


Oke, selesai. Anda mencari Live Demo? :)

Terima kasih untuk Stephane Caron.

Sebagai penutup, saya ucapkan “Selamat Hari Raya Idul Fitri 1431 H” untuk semua Sobat "Di Atas Bumi Kita Berpijak" yang merayakannya :) Taqoballahu minna wa minkum, Minal aidin walfaidzin, Mohon Maaf Lahir Batin :)


Ardhiansyam | Find us on Google+ | Kontak | Follower? klik di sini | Sitemap | Versi Mobile | ke atas ↑