jQuery News Ticker Recent Post Plus Thumbnails

Source Code Untuk BloggerSource Code jQuery News Ticker Recent Post Plus Thumbnails

Bismillahirrahmanirrahim, Alhamdulillah. Setelah melakukan trial and error yang cukup melelahkan, akhirnya blogger hack kali ini selesai dibuat dan Blogger Tune-Up persembahkan untuk para blogger. Blogger Tune-Up mendapat ide ini dari Blogger Plugins tentang gadget artikel terbaru yang mampu menampilkan gambar mini dan Ralf Geschke tentang News Ticker atau berita terbaru yang ditampilkan terus menerus dengan efek berjalan (slide). Dari kombinasi kedua script tersebut maka tersusunlah script kombinasi yang cukup menarik dan unik dan diberi nama jQuery News Ticker Recent Post Plus Thumbnails, berbasis JSON dan jQuery menjadikan gadget ini layak untuk teman-teman blogger coba. Tidak lupa Blogger Tune-Up sangat berharap kritik, saran, cacian, makian, donasi dan atau apapun bentuknya untuk pengembangan lebih lanjut dan semua akan diterima dengan senang hati.

Demo News Ticker Recent Post

Gadget jQuery News Ticker Recent Post Plus Thumbnails

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
Langkah 4
Masukan (copypaste) kode dibawah ini:

<style type="text/css">
#rp_plus_img{height:212px;overflow:hidden;border:solid 1px #585858;padding:6px 10px 14px 5px;background-color:#2f2f2f;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#FFF;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#DEDEDE;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://btuneup.googlecode.com/files/rpplusimgnt-v1.0.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 125;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

Judul Gadget terserah anda dan baca keterangan jika ingin memodifikasinya sesuai keinginan anda...
Langkah 5
Klik tombol "Simpan"

Keterangan:
Perhatikan kode-kode pada Langkah 4!

• Untuk membuang garis tepi ubahlah nilai 1px menjadi 0 pada kode border:solid 1px #585858; (Baris 2)
• Untuk mengubah background ubahlah nilai #2f2f2f pada kode background-color:#2f2f2f; atau jika tidak ingin menggunakan background buanglah kode tersebut (Baris 2)
• Untuk mengubah warna font judul artikel ubahlah nilai #FFF pada kode color:#FFF (Baris 6)
• Untuk mengubah warna font artikel ubahlah nilai #DEDEDE pada kode color:#DEDEDE (Baris 8)
• Untuk mengubah ukuran gambar mini ubahlah nilai 55px pada kode width:55px; dan kode height:55px; (Baris 9)
• Jika template blog anda telah terpasang framework jQuery sebelumnya buanglah kode pemanggilan jQuery (Baris 11)
• Ubahlah nilai 400 pada kode var speed = 400; untuk mengatur kecepatan (Baris 14)
• Ubahlah nilai 2500 pada kode var pause = 2500; untuk mengatur lamanya artikel tersebut tertahan (pause) sebelum diganti artikel berikutnya (Baris 15)
• Ubahlah nilai 10 pada kode var numposts = 10; untuk menentukan jumlah artikel yang akan ditampilkan (Baris 23)
• Ubahlah nilai 125 pada kode var numchars = 125; untuk menentukan jumlah karakter artikel yang akan ditampilkan (Baris 24)
• Feed harus diset "Penuh" melalui "Pengaturan - Feed Situs - Izinkan Feed Blog : Penuh"

Download News Ticker Recent Post

Special Thanks to :

• Aneesh from http://www.bloggerplugins.org/ for Recent Post Widget with Thumbnails
• Ralf Geschke from http://geschke.name/ for jQuery News Ticker

Read More

Tampilkan dan Sembunyikan Gadget dengan jQuery

Tutorial kali ini lebih ke pemahaman script jQuery karena kita akan menjabarkan script sederhana untuk menampilkan dan menyembunyikan suatu gadget. Tutorial ini digunakan Blogger Tune-Up untuk menampilkan dan menyembunyikan gadget "Arsip", silahkan anda klik menu "Arsip" maka gadget "Arsip" akan ditampilkan dan jika kita klik lagi menu "Arsip" maka gadget akan disembunyikan. Script untuk membuat efek ini tidaklah rumit, bahkan sangat sederhana. Penasaran?

Skenario Pembuatan Efek Tampil Sembunyi (Show Hide) dengan jQuery

Langkah 1

Kita buat suatu wadah/container dengan tag <div>...</div> pada kode HTML seperti dibawah ini:

<div>Isi yang akan ditampilkan dan disembunyikan</div>

Langkah 2

Tetapi jika hanya menggunakan tag <div>...</div> maka tampilan wadah/container kurang menarik dan sulit untuk diidentifikasi jika kemudian hari kita ingin mengganti atau memperbaikinya. Untuk itu kita perlu melibatkan CSS untuk memperbaiki tampilan agar tampak indah. Contoh style suatu gadget wadah/cointainer dengan CSS seperti dibawah ini:

#keranjang{
clear:both;
border:1px solid #585858;
width:800px;
margin:10px 0 10px 40px;
padding:20px 20px 20px 20px;
background-color:#000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}

Maka akan dihasilkan suatu wadah seperti illustarsi gambar dibawah ini:

Langkah 3

Setelah style wadah/container sudah siap, maka kita integrasikan (jadikan satu) antara kode HTML dengan kode CSS seperti berikut dibawah ini:

<div id="keranjang">Isi yang akan ditampilkan dan disembunyikan</div>

Berikutnya disebut wadah/container "keranjang"

Langkah 4

Setelah meng-integrasikan antara kode HTML dengan kode CSS, maka kita akan membuat suatu link yang berfungsi untuk mengatur (menampilkan atau menyembunyikan) wadah/container "keranjang", dengan contoh seperti dibawah ini:

<a id="tombol" href="#">Klik Disini</a>

Kode diatas adalah kode tag anchor^[1] yang pernah dibahas pada artikel sebelumnya dengan penambahan tag ID untuk memberi identitas pada link achor tersebut agar lebih spesifik sehingga tidak tertukar dengan link anchor yang lainnya.

Langkah 5

Dari Langkah 1 sampai Langkah 4 kita sudah dapat mengambil alur cerita atau skenario yang akan kita jabarkan dalam kode jQuery. Seperti; Pada saat halaman dipanggil (load) maka wadah/container "keranjang" akan langsung disembunyikan. Ketika kita klik link "Klik Disini" (Langkah 4) maka wadah/kontainer "keranjang" akan ditampilkan, dan ketika di klik link "Klik Disini" lagi maka wadah/container "keranjang" akan disembunyikan.

Jika kita sudah paham skenario-nya maka kontainer ini siap untuk dipengaruhi (ditampilkan atau disembunyikan) oleh kode jQuery dengan script kode seperti dibawah ini:

$(document).ready(function(){
$('#keranjang').hide();
$('a#tombol').click(function() {
$('#keranjang').toggle(400);
return false;
});
});

Jika kita baca script kode jQuery-nya adalah sebagai berikut:

1. Baris 1 $(document).ready(function(){ : Ini merupakan aturan baku untuk mendeklarasikan bahwa ini adalah fungsi jQuery;
2. Baris 2 $('#keranjang').hide(); : Pada saat halaman dipanggil (load) maka container/wadah (lihat Langkah 3) akan langsung disembunyikan (tidak ditampilkan), kode #keranjang digunakan untuk memanggil id="keranjang";
3. Baris 3 $('a#tombol').click(function() { : Kode ini digunakan untuk menjelaskan bahwa ketika anchor link dengan identitas "tombol" (lihat Langkah 4) di klik maka;
4. Baris 4 $('#keranjang').toggle(400); : wadah/container dengan id="keranjang" (Langkah 3) akan ditampilkan dengan kecepatan 400 milidetik, kita bisa saja mengganti nilai 400 sesuai keinginan kita atau dengan kata "slow" dan atau "fast" (tanda kutip diikutsertakan);
5. Baris 5 return false; : Jika ternyata pemanggilan kode jQuery tidak sesuai urutan (Baris 2 sampai Baris 4) maka fungsi akan dikembalikan (diulangi dari awal), sehingga wadah/container "keranjang" akan disembunyikan lagi. Sama artinya jika ternyata kode di panggil dari baris 3 yaitu $('a#tombol').click(function() { atau sama dengan link dengan ID tombol diklik lagi maka container/wadah "keranjang" akan disembunyikan.
6. Baris 6 dan 7 adalah kode penutup fungsi.

Bagaimana mudah bukan? Tetapi ingat, ikuti aturan-aturan penerapan tag kode pada template blog. (Baca Keterangan)

Skenario CSS (Cascading Style Sheet)

Lihat Langkah 2! Kode CSS haruslah diapit atau berada diantara tag seperti dibawah ini:

<b:skin><![CDATA[
....
....
]]></b:skin>

atau kode seperti dibawah ini:

<style>
....
....
</style>

sehingga kode pada Langkah 2 menjadi seperti dibawah ini:

<b:skin><![CDATA[
#keranjang{
clear:both;
border:1px solid #585858;
width:800px;
margin:10px 0 10px 40px;
padding:20px 20px 20px 20px;
background-color:#000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
]]></b:skin>

Skenario HTML

Lihat Langkah 3 dan Langkah 4! Kode wadah/container harus diapit atau berada diantara tag seperti dibawah ini:

<body>
....
....
</body>

Sehingga kode secara keseluruhan menjadi seperti dibawah ini:

<body>
<a id="tombol" href="#">Klik Disini</a>

<div id="keranjang">Isi yang akan ditampilkan dan disembunyikan</div>
</body>

Skenario jQuery

Agar kode-kode jQuery dapat berjalan baik maka framework jQuery haruslah terpasang pada template/halaman blog kita seperti dibawah ini:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>

Lihat Langkah 5! Kode jQuery harus di apit atau berada diantara tag seperti dibawah ini:

<script type='text/javascript'>
....
....
</script>

Sehingga kode secara keseluruhan menjadi seperti dibawah ini:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$('#keranjang').hide();
$('a#tombol').click(function() {
$('#keranjang').toggle(400);
return false;
});
});
</script>

Maka secara keseluruhan kode dari mulai kode HTML, CSS, sampai dengan jQuery adalah menjadi seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blogger Tune-Up - Tampilkan dan Sembunyikan Gadget dengan jQuery</title>
<style>
body{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#dedede;
background-color:#FFF;
background-repeat:repeat-x;
line-height:18px;
}
#keranjang{
clear:both;
border:1px solid #585858;
width:800px;
margin:10px 0 10px 40px;
padding:12px 20px 20px 20px;
background-color:#000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
a {
text-decoration:none;
}
</style>
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#keranjang').hide();
$('a#tombol').click(function() {
$('#keranjang').toggle(400);
return false;
});
});
</script>
</head>
<body>
<a id="tombol" href="#">Klik Disini</a>
<div id="keranjang">Isi yang akan ditampilkan dan disembunyikan</div>
</div>
</body>
</html>

Download Show Hide dengan jQuery

Catatan kaki:
[1] Memahami Tag Anchor

Read More

Navigasi Efek Slide Out dengan jQuery

Sekarang kita akan membuat menu navigasi dengan efek slide out yang tetap menggunakan framework jQuery. Menu ini mempunyai efek slide yang sangat halus, saat kita mengarahkan pointer mouse (mouse hover) pada menu, maka menu akan bergeser keluar (slide out) secara perlahan dan akan kembali pada posisi semula jika kita menggeser mouse keluar dari area menu selain itu menu ini akan selalu dalam posisi tetap walau kita menggeser (scroll) halaman naik ataupun turun. Kita bisa saja menggunakan navigasi menu ini untuk berbagai keperluan, misal Sosial Bookmark^[1] dan lain sebagainya. Menu navigasi ini terinspirasi dari blog Tympanus.net^[2], sedang Icon untuk menu navigasi diambil dari DryIcons.com^[3].

Demo jQuery Slide Out Navigation

Integrasi Navigasi Efek Slide Out (Slide Out Navigation)

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

]]></b:skin>

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

ul#menusisi {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#menusisi li {
width: 100px;
}
ul#menusisi li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px; 
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#menusisi .beranda a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menusisi .tentang a{
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);
}
ul#menusisi .cari a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);
}
ul#menusisi .komentar a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menusisi .rssfeed a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menusisi .alat a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);
}
ul#menusisi .kontak a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}

Langkah 6
Cari kode dibawah ini:

</head>

Langkah 7
Masukan (copypaste) kode jQuery dibawah ini diatas kode pada langkah 6:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type="text/javascript">
$(function() {
$('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);
$('#menusisi > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>

Langkah 8
Cari kode dibawah ini:

</body>

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

<ul id='menusisi'>
<li class='beranda'><a href='LINKANDA' title='Beranda'></a></li>
<li class='tentang'><a href='LINKANDA' title='Tentang'></a></li>
<li class='cari'><a href='LINKANDA' title='Cari'></a></li>
<li class='alat'><a href='LINKANDA' title='Alat'></a></li>
<li class='rssfeed'><a href='LINKANDA' title='RSS Feed'></a></li>
<li class='komentar'><a href='LINKANDA' title='Komentar'></a></li>
<li class='kontak'><a href='LINKANDA' title='Kontak'></a></li>
</ul>

[Baca keterangan untuk memodifikasi menu]
Langkah 10
Simpan template dan preview blog anda...

Download jQuery Slide Out Navigation

Keterangan:

1. Ubahlah LINKANDA sesuai dengan link keinginan anda.
2. Ubahlah keterangan didalam tag title (misal; title='Beranda' di ubah menjadi title='Home') sesuai dengan keinginan anda.
3. Perhatikan kode pada Langkah 5 baris 5 yaitu top: 50px; ubahlah nilai 50 untuk menentukan jarak antara bagian atas halaman blog dengan menu.
4. Perhatikan kode pada Langkah 5 baris 15 yaitu margin-left: -50px; ubahlah nilai -50 untuk mengatur berapa jarak menu yang akan disembunyikan.
5. Jika nilai -50 diubah (pada keterangan nomor 4) maka nilai -50 pada Pada Langkah 7 baris 7 dan baris 13 juga harus diubah atau disamakan.
6. Perhatikan kode pada Langkah 5 baris 34, 37, 40, 43, 46, 49, 52 ubahlah URL Icon sesuai dengan icon yang telah anda siapkan.

Catatan kaki:
[1] Sosial Bookmark
[2] Tympanus.net
[3] DryIcons.com

Read More

Non Aktifkan Klik Kanan Artikel dengan jQuery

Banyak cara yang bisa kita lakukan untuk melindungi artikel kita dari pembajakan, dan atau mungkin lebih tepatnya mempersulit proses pembajakan artikel. Sebelumnya Bloger Tune-Up pernah membahas artikel "Lindungi Artikel dari Pembajakan (Copy Paste)^[1]" yang masih menggunakan JavaScript murni dan tentunya dengan berbagai kelemahan yang ada. Sekarang kita akan menggunakan Framework jQuery dengan memanfaatkan Event Handler Attachment .bind()^[2] untuk menon-aktifkan tombol klik mouse sebelah kanan.

Demo jQuery Disable Right Click

Integrasi Non Aktif Klik Kanan (Disable Right Click)

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

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

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type="text/javascript" language="javascript">
$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});
</script>

Langkah 5
Simpan template dan preview blog anda...

Download jQuery Disable Right Click

Catatan kaki:
[1] Lindungi Artikel dari Pembajakan (Copy Paste)
[2] Event Handler Attachment .bind()

Read More

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmY9qFQWeWiB4r-UwMHcJAj-STusQz2iczkkVYi7Oa0bOtCA0gq7_2I5_ZlGtGa97M9tb5Xzfv-MALgUklzP2xwgRLyLVDr8_Z73kxYvBjB0qlPF5WS5MnvH_hpKKSdz57dCkvrF4ufC0/d/facebook.png";
var ic_twitter="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKFTAM1udKibiMEJE5a3PB4pYSK9Vi5Ael8R0TMxKCVQDlJ7m388IcCJwKLrNMPaj-zMNF13W2gD5GyTwcT2FJ_Sd7XpstT0sl5APJ3RdGzXbghybfKMJvRkNG6F1Je02EEclKqGOSojc/d/twitter.png";
var ic_delicious="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwG6AT9LkEoHpVoXbcMafVIGTYqTaQs2sV6S76EnL1PjPtAshLnIWba-jIAtPImX0jqQjwt1ZVnncYgcm-Ldno_oSQ89S567vNsEZihIuoNQaR1sZ-EW9s8yR5vtVfXZ6wke_SSUOw_kQ/d/delicious.png";
var ic_digg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQQ0yhkdbQJXzbzvHfzHZHVYAAeKUfTolFiFJThrPF2cNND7ueIi95ZT1qFD63vVFLhTkEjTOlfTxMPlpupdRG00eYyh02N-OF80wJVsO6Q5efAMs9zbtt7FeiLfpeopbU_sN4cMpywG0/d/digg.png";
var ic_linkedin="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw4YU2x7TVxLjZsA1QxWoMCJ_V3NYtuFdpNKv6hGPHO7GQG-gvWr878iAr0KdDHQq5UY_bK5hoeyZCH5SWX-HxUM6JlNwe3YPudJ3ae2GZBuz47dVGY6fUtxrMmEQp4QcUXYLiIqb21pA/d/linkedin.png";
var ic_reddit="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX-ADrKC0AfzsMgi6-pWkhvFTVU9EDSmIMKdd4Wpj8a0NAjKqptQrBSRjww6b0m9NhRaXePrROaG_zS0llt5pQFjPdik2Er1KztehrQgXwLhTGrBQXCyv5nsJmcezNe7HqnunBhjlOd5k/d/reddit.png";
var ic_stumbleupon="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8nj_4k1JxM4VY3ZRupFQ0dDgU-Nei9ZOPVQn_EsSHHnV6EQYmGCJ8ETk3XT4LMieMtM0eq2GII9uYg3HR6xn5DCn505E2xk8KXo37gvqi2zupjov1Ax-V4srI72lk45ntFo4tSZPO-D4/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:

1. bit.ly^[4] adalah website yang berfungsi untuk memperpendek alamat suatu halaman website.
2. Perhatikan kode Langkah 7 baris 1; ubah "hendriono" dan "R_14aed774605babeab3107d7ab9c01ee8" sesuai dengan account yang anda peroleh dari website bit.ly.
3. Untuk memperoleh API Key bit.ly silahkan klik disini dengan catatan anda sudah membuat account sebelumnya disini.
4. 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:

1. Social Bookmarking
2. Wikipedia
3. jQuery PrettySociable
4. bit.ly

Read More