Social Bookmarking dengan jQuery

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/AVvXsEiNApUSUFameFq273Gql7Rb2ZtRmGSzPpGm7dEd4WbeobvwDyVl6TDZQ8SIIUJzjDao52kQExZFaV08riP7Iac9nyHMVleBv2fRYM5kE6-fKvMrEZV21Aj7LaagVX3IWzTiB3IQ_OEcOos/d/facebook.png";
var ic_twitter="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDKYOIn_XkbkcdGGQrz62pCaByNWlIdf8sjLpCbYf3SgDk10-UEoIKgEHbgtRHfdds84VZ8g5zzY6jE_Gyyi97w22aHmz7n4TT5ddZwMTPQ2RjP47HpD9v5DfqIK5TOQIUTPHIUoyD7Og/d/twitter.png";
var ic_delicious="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggvaqia4G_Zxg0R97t1CofZ7rpghyphenhyphenDXNhGWjwXE7LTXMQ9lOu4XZaSgs_qWsnseq7urK3Lo9W9UXWRmwrubOdXGq_DAEecfxvzGXBR-RFMk5QMGCVrlwgLm3dQUwfWGvVta1YaP-bjKP4/d/delicious.png";
var ic_digg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPRKHtSCDRboRAGx7nvpKk_Hqo5kfgfblwhTY3vi3d8xHYYreDmUmYNOBReabms1DIrNqcIO_x0yQFBR5BYakdKvCstVFa4A_zdcrZLXFMqtfNm9d8166_7bpETMLyeP6YdfAGJ4hh_LI/d/digg.png";
var ic_linkedin="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGgc-I_c43jO1Z69YzvSIFP5qRudpbBRCQcYNnZIUf8-UrDqL9C8sqebaNiCKn-MTno0dxIEzt4Z2uOOyKyS-V2xLnvVF6sofURv5xRISrLQIV23CBkhYqUS2_NJH-nittlHDyvxwoSiM/d/linkedin.png";
var ic_reddit="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUFAgWnlx5m8OHHyTcyQyESHtiv5MzIscrJAvRx8ABWDI32sHJN4WSK30b80jqanYyZ-1OqKudTP03BYf0yZMbQ0qWEIyWvEra-rUq8A3x70DMWqUNp3QSO7BoqzxHGYIFTmQKDk3mL28/d/reddit.png";
var ic_stumbleupon="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKbYO3pSBfLxKt6piFkjkuk75oG3U5DJLyUUM7fM2-2AI5-PlfL59dlthjvw_ibAHHAMcoGrpTUO710ZJP-L-uAO7I_w_mwJviZ2s_hXHDYQjA3XQBAOY6JjeVsJjypuoNLn_eF0HTJ3E/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...
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" href="http://www.blogger.com/post-edit.g?blogID=1042166990073427187&amp;postID=8471183729767326051" rel="prettySociable"><data:post.title></data:post.title></a>
<b:else>
<b:if cond="data:post.url">
<a expr:href="data:post.url" href="http://www.blogger.com/post-edit.g?blogID=1042166990073427187&amp;postID=8471183729767326051" rel="prettySociable"><data:post.title></data:post.title></a>
<b:else>
<data:post.title>
</data:post.title>
</b:else>
</b:if></b:else></b:if></h3>

Simpan template dan preview blog anda... sukses ya..
.::Artikel Menarik Lainnya::.