Memasang Icon Sosial Bookmark Christmas Bell

Untuk menyambut hari yang penuh sukacita, maka alangkah baiknya kita ganti Icon Christmas Bell untuk tampilan sosial bookmark di blog anda agar lebih menarik dan meriah.

Memasang Social Bookmarks dengan jQuery dengan tampilan Icon Christmas Bell

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'/>

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

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();     
});

3. Masukan kode HTML berikut sesudah <data:post.body/>:

<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='URL GAMBAR ICON'/></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='URL GAMBAR ICON'/></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='URL GAMBAR ICON'/></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='URL GAMBAR ICON'/></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='URL GAMBAR ICON'/></a></li>

<li><a expr:href="&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;&amp;title=&quot; + data:post.title" target="_blank"><img alt='Sumbit to Facebook' src='URL GAMBAR ICON'/></a></li>

<li><a expr:href="&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;&amp;title=&quot; + data:post.title" target="_blank"><img alt='Sumbit to Twitter' src='URL GAMBAR ICON'/></a></li>
</ul>

Catatan II
:: Icon tersebut bisa anda download dengan mengklik ICON dibawah ini, setelah itu Upload Icon gambar ke hosting penyimpanan gambar anda untuk mendapatkan URL GAMBAR. Kalo saya biasa upload di http://photobucket.com/


        
                      

 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, dan selesai.