Cara Pasang Social Bookmarks dengan jQuery di Blogger

SALAM SEJAHTERA !!!Tutorial ini akan menunjukkan cara untuk mengubah daftar unordered (UL) ke dalam kotak social bookmarking sharing box, dan bagaimana membuat plugin jQuery yang akan mengubah UL apapun ke dalam sharing box. Menurut saya Social Bookmarks dengan jQuery ini tampilannya sangat eksotis apalagi ditambah dengan efek jQuery semakin menambah kesan sexy.

Untuk lebih jelasnya bisa anda lihat diatas konten ini, dan kalo tertarik mari ikuti langkah-langkahnya sbb:

1. Masukan script jQuery berikut sebelum </head>

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

2. Masukan javascript berikut dibawah script jQuery tadi:

<script type='text/javascript'>
(function($){
$.fn.sharebox = function(){
var element = this;
$(element).find(&quot;li&quot;).each(function(i){
$(this).css(&quot;z-index&quot;, 10- i);
if (i&gt;0)
$(this).css(&quot;left&quot;, i * 24 + 100);
});
}
})(jQuery);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#sharebox&quot;).sharebox();     
});
</script>

3. Masukan kode HTML berikut sesudah <data:post.body> atau dibawahnya tag <div class='post-header-line-1'/>

<ul class='sharebox' id='sharebox'>
<li><img alt='Share this' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmkuLMrwEhI/AAAAAAAABm8/SF6x9UfvEJA/s800/sharethis.png'/></li>

<li><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Digg' src='http://lh5.ggpht.com/_dfnTVAxeWMI/Smktud4qk8I/AAAAAAAABmk/z5vZVjTmD7k/s800/digg_48.png'/></a></li>

<li><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to StumbleUpon' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuLCBTubI/AAAAAAAABm4/KwVHDJnT-EQ/s800/sumbleupon_48.png'/></a></li>

<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Delicious' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmktubnHpoI/AAAAAAAABmg/b31Po_kEbnc/s800/delicious_48.png'/></a></li>

<li><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Technorati' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuK1y0_cI/AAAAAAAABm0/C8EExNM-xjE/s800/technorati_48.png'/></a></li>

<li><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Reddit' src='http://lh3.ggpht.com/_dfnTVAxeWMI/Smkturrni-I/AAAAAAAABmw/AbGticB0wAs/s800/reddit_48.png'/></a></li>
</ul>

4. Masukan kode CSS berikut diatas code ]]></b:skin>:

#sharebox{
height:48px;
width:400px;
margin:0;
padding:5px 0;
}
ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}
ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;}
ul.sharebox li a { margin:0 0 0 -24px; display:block;}
ul.sharebox li a:hover { margin:0 0 0 -8px; }
ul.sharebox li img { border:none;}

5. Simpan template anda, dan selesai.

Catatan :

Jika anda telah memiliki script jQuery di template anda, maka script ini tidak diperlukan lagi.

Gambar Icon bisa anda ganti dengan icon share yang anda suka atau untuk mendapatkan icon silakan donwload disini

Selamat Mencoba - Happy Blogging

Thanks to: Create fancy share box with CSS and jQuery - Janko At Warp Speed