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 :)


12 komentar:

  1. Social networking itu apa y? LOL

    sorry OOT, tapi gw minta template yg dijadikan sample live preview thread ini dunks.

    BalasHapus
  2. Ada Sampel live demonya om???

    klo ada lebih bagus . . .

    BalasHapus
  3. terima kasih om beranda dah lama saya nyari tutorial ini, @biyan 'n @hacker, tuh contohnya kaya di blog si assadotcom cekidot --> http://assadotcom.blogspot.com/

    BalasHapus
  4. Biyan
    Apa ya?? :))

    silakan mampir ke Quite Random


    Hacker Bukan Cracker
    Ada sob, silakan disimak lagi
    :D


    Anonim
    sama-sama
    :)


    secangkir teh dan sekerat roti
    silakan dicoba sob biar tambah asik
    :)

    BalasHapus
  5. wah keren nih jqurynya 1.4.2 ya?
    nanti aku coba di blogku yang satunya, kalu di hilangkan charset='utf-8' di script pengaruh ga sob?

    oia, aku mau ngucapin selamat hari raya idul fitri mohon di maafkan ya sob kalu aku ada kesalahan yang di sengaja maupun yang tidak di sengaja.

    BalasHapus
  6. blogger admin
    Sebenarnya di website resminya pakai JQuery 1.3.2, tapi saya coba pakai yang terbaru (1.4.2) bisa jalan Mas. Untuk charset='utf-8', saya belum coba
    :D

    Sama-sama, maaf untuk segala salah
    :)

    BalasHapus
  7. mantap nih ada slider pas masuk ke sesi full post view
    ck ck ck
    emang good good nih sobat atu ini ;))

    BalasHapus
  8. Yap,

    tapi para pembaca mungkin agak kurang ngeh utk cara men-sharenya kali ya . . . .

    masih baru jadi pada bingung . . .

    BalasHapus
  9. kalo pake wordpress bisa gak??

    BalasHapus
  10. keren gan ...
    pengen pasang tp blog ane dah terlalu berat

    BalasHapus

Formulir Kontak

Nama

Email *

Pesan *

[ Instagram M2D ]

[ Favorit ]

Malam Marah Malam Ramah

Apalah yang istimewa dengan malam? malam tak lebih dari kegelapan yang menyelimuti sesuatu yang tak pantas menikmati kelembutan cahaya, kera...

[ Referral ]

Ardhiansyam | Kontak | Sitemap | ke atas ↑