Social Bookmarking - jQuery PrettySociable

Social Bookmarking atau kurang lebih berarti penanda buku sosial adalah suatu cara/metode para pengguna internet untuk berbagi, mengorganisasi, mencari dan memanajemen bookmark (penanda buku) sumber daya web. Tidak seperti file sharing (berbagi file), sumber daya sendiri tidak di bagikan, hanya penanda untuk referensi halaman-halaman web yang pernah kita kunjungi. Hal ini membantu kita dan membantu para pengguna internet lainnya untuk menemukan sesuatu yang diperlukan. Deskripsi suatu halaman website bisa kita tambahkan untuk memperjelas penanda yang sudah kita buat dalam bentuk form metadata, sehingga pengguna internet lainnya mengerti isi dari sumber daya yang tersedia tanpa kita harus mengambil/download terlebih dahulu. Isi dari deskripsi penanda yang kita buat bisa saja berisi komentar bebas, dukungan atau mengenai kualitas sumber daya web yang kita temukan. Lebih jauh mengenai "Social Bookmarking^[1]" silahkan baca pada artikel Wikipedia^[2].

Ada berbagai cara untuk menaruh Social Bookmarking pada halaman blog kita, dari mulai link biasa, tombol gambar sampai dengan animasi-animasi yang menarik. Kali ini kita akan mencoba mengintegrasikan "jQuery PrettySociable^[3]" yang diadaptasi dari no-margin-for-errors.com. Social Bookmarking ini sangat cantik dengan efek lembut jQuery, para pembaca dapat membagikan link artikel kita tanpa perlu repot-repot, hanya dengan klik judul artikel dan drag pada icon-icon Social Bookmarking maka secara otomatis link tersebut akan masuk ke account Social Bookmarking pengunjung. Nah, untuk testing-testing sekali tetes langsung bunting silahkan klik Demo jQuery PrettySociable.

Demo jQuery PrettySociable

Integrasi jQuery PrettySociable Pada Template

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget" biar kelihatan rumitnya
Langkah 4
Cari kode dibawah ini:

]]></b:skin>

Langkah 5
Masukan (copypaste) kode CSS dibawah ini diatas kode pada langkah 4:

html,body { height: 100%; }
#ps_hover {left: 0;top: 0;position: absolute;z-index: 1000;}
.ps_hd { background: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S8lm2XXNtNI/AAAAAAAAD-I/Vs20jHnwohQ/d/tr.png) top right no-repeat; padding: 0 8px 0 0; }
.ps_hd .ps_c { background: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S8lmpO3Zz1I/AAAAAAAAD-E/PVGFY4QYeYY/d/tl.png) top left no-repeat; }
.ps_ft { background: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S8lmoVKg0pI/AAAAAAAAD94/MeMFNI60rg4/d/br.png) top right no-repeat; padding: 0 8px 0 0; }
.ps_ft .ps_c { background: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S8lmoNgGQiI/AAAAAAAAD90/0CmveAyK3Rw/d/bl.png) top left no-repeat; }
.ps_bd { background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S8lmogn-wlI/AAAAAAAAD-A/0WBF132HuN0/d/cr.png) top right repeat-y; padding: 0 8px 0 0; }
.ps_bd .ps_c { background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S8lmoq5ujHI/AAAAAAAAD98/6J4SR-erGA0/d/cl.png) top left repeat-y; padding: 0 0 0 8px; }
.ps_bd .ps_s { background: #fff; }
.ps_hd,.ps_bd,.ps_ft { position: relative; z-index: 1000; }
.ps_hd .ps_c,.ps_ft .ps_c {font-size: 1px;height: 8px;}
#ps_title {background: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S8lm2pw0-0I/AAAAAAAAD-Q/EAxpa63CWAo/d/tt_r.png) top right no-repeat; padding: 0 5px 0 0;color: #fff;font-size: 10px;font-weight: normal;left: 8px;position: absolute;top: 0;z-index: 999;}
#ps_title .ps_tt_l {background: url(http://lh5.ggpht.com/_xcD4JK_dIjU/S8lm2W6yK6I/AAAAAAAAD-M/MKJYyDDdiJQ/d/tt_l.png) top left no-repeat;line-height: 20px;padding: 0 0 0 5px;}
#ps_tooltip {font-size: 10px;left: 0;position: absolute;top: 0;width: 250px;z-index: 1010;}
#ps_tooltip p { margin: 0; }
#ps_tooltip strong {font-size: 1.2em;}
#ps_websites {left: 50%;position: absolute;top: 50%;z-index: 1005;}
#ps_websites .ps_label {color: #fff;display: none;font-size: 14px;left: 0;position: absolute;top: 0;white-space: nowrap;}
#ps_websites ul {list-style: none;position: relative;z-index: 1010;width: 400px;}
#ps_websites li {display: block;float: left;margin: 0 30px 40px 0;}
#ps_websites a {display: block;}
#ps_overlay {background: #000;height: 100%;left: 0;position: absolute;top: 0;width: 100%;z-index: 1005;}

Langkah 6
Cari kode dibawah ini:

</head>

Langkah 7
Masukan (copypaste) kode dibawah ini diatas kode pada langkah 6^[*]:

<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=hendriono&amp;apiKey=R_14aed774605babeab3107d7ab9c01ee8' type='text/javascript'/>
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<!--[if lte IE 6]><script src="http://hensblog.googlecode.com/files/DD_belatedPNG.js" type="text/javascript" charset="utf-8"></script><![endif]-->
<script charset='utf-8' src='http://hensblog.googlecode.com/files/prettySociable.js' type='text/javascript'/>

Langkah 8
Cari kode dibawah ini:

</body>

Langkah 9
Masukan (copypaste) kode dibawah ini diatas kode pada langkah 8:

<script charset='utf-8' type='text/javascript'>
//<![CDATA[
var ic_facebook="http://lh6.ggpht.com/_xcD4JK_dIjU/S8lnIrxidaI/AAAAAAAAD-c/D0m-DGajK5k/d/facebook.png";
var ic_twitter="http://lh3.ggpht.com/_xcD4JK_dIjU/S8lnUyjCBKI/AAAAAAAAD-w/CyGAMk3koQA/d/twitter.png";
var ic_delicious="http://lh6.ggpht.com/_xcD4JK_dIjU/S8lm2ptijkI/AAAAAAAAD-U/1AloYmeuW5Q/d/delicious.png";
var ic_digg="http://lh6.ggpht.com/_xcD4JK_dIjU/S8lm3Kgk_vI/AAAAAAAAD-Y/u4EvqhI3v0o/d/digg.png";
var ic_linkedin="http://lh4.ggpht.com/_xcD4JK_dIjU/S8lnIyDXHiI/AAAAAAAAD-g/NDdJvAkTqAM/d/linkedin.png";
var ic_reddit="http://lh6.ggpht.com/_xcD4JK_dIjU/S8lnI5I1pmI/AAAAAAAAD-k/oQ5ApYkR5Uk/d/reddit.png";
var ic_stumbleupon="http://lh3.ggpht.com/_xcD4JK_dIjU/S8lnJPQlNUI/AAAAAAAAD-o/HPkyAKbO2NE/d/stumbleupon.png";
var ic_tumblr="http://lh3.ggpht.com/_xcD4JK_dIjU/S8lnJURkRAI/AAAAAAAAD-s/MCKnd62QgGs/d/tumblr.png";
$.prettySociable();
$.prettySociable.settings.urlshortener.bitly.active = true;
//]]>
</script>

Langkah 10
Simpan template...

Integrasi jQuery PrettySociable Pada Artikel

A. Integrasi pada Judul Artikel
Langkah 1A
Setelah template disimpan (Langkah 10) kemudian cari kode dibawah ini:

<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Langkah 2A
Masukan kode dibawah ini pada kode yang diblok pada langkah 1A:

rel='prettySociable'

Sehingga menjadi seperti dibawah ini:

<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' rel='prettySociable'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' rel='prettySociable'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Langkah 3A
Simpan template dan preview blog anda...

B. Integrasi pada Artikel

Pada prinsipnya sama dengan integrasi pada judul artikel, hanya saja penempatan kode-nya terletak pada post editor artikel dalam mode Edit HTML, sebagai contoh dibawah ini:

<a href="http://modification-blog.blogspot.com/2010/03/info-panel-slide-vertikal-dengan-jquery.html">Slide Panel</a>

Sisipkan kode dibawah ini:

rel="prettySociable"

Sehingga menjadi seperti dibawah ini:

<a href="http://modification-blog.blogspot.com/2010/03/info-panel-slide-vertikal-dengan-jquery.html" rel="prettySociable">Slide Panel</a>

Dan terbitkan artikel...

Keterangan:

bit.ly^[4] adalah website yang berfungsi untuk memperpendek alamat suatu halaman website.
Perhatikan kode Langkah 7 baris 1; ubah "hendriono" dan "R_14aed774605babeab3107d7ab9c01ee8" sesuai dengan account yang anda peroleh dari website bit.ly.
Untuk memperoleh API Key bit.ly silahkan klik disini dengan catatan anda sudah membuat account sebelumnya disini.
Jika anda tidak menginginkan bit.ly digunakan silahkan hapus code pada Langkah 7 baris 1 dan ubah kode true menjadi false pada kode Langkah 9 baris 12.

Catatan kaki:

Belajar Ngeblog

Saturday, April 17, 2010