jQuery Social Share Toolbar for Blogger

Ketik share pada kotak search blog aku ini, dan lihat apa yang ada disana ;)) Share atau berbagi mungkin merupakan fasilitas yg harus dimiliki bagi pemilik web/blog. Dengan adanya feature tersebut kita dapat berbagi antara sesama :) Jangan curi-curi, gak betul itu dan dilarang sama agama ;)) Masa mau nambah ilmu dosa juga ikut nambah :)) APA KATA DUNIA!!! Dunia menjawab "capek deh" :p Capek lah wong orang yg punya usaha kok malah diembat =)) Be grow up man :-bd

Sudah dilakuin belon tadi disuruh search kata share :-/ Nah kali ini beben si bloglang ganteng kalem mau berbagi trik gaya tombol berbagi (share button) kreasi dari CSS Creator. Bisa buka web tersebut dan lihat dipojok kanan bawahnya ;) For the original posted you can visit Original posted. Disana sudah ada penjelasan bagaimana trik ini berkerja :D Kalau mau diblog sobat memakai yg begituan, maka ada syarat-syarat kecil berlaku disini, syaratnya yaitu klik tombol read more pada artikel ini :">

1. Letakan kode CSS sebelum/diatas kode ]]></b:skin>
#socializethis{
background:#CCC;
border:solid 1px #666;
border-width: 1px 0 0 1px;
height:15px;
width:260px;
position:fixed;
bottom:0;
right:0;
padding:2px 5px;
overflow:hidden;
/* CSS3 */
-webkit-border-top-left-radius: 12px;
-moz-border-radius-topleft: 12px;
border-top-left-radius: 12px;
-moz-box-shadow: -3px -3px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: -3px -3px 3px rgba(0,0,0,0.5);
box-shadow: -3px -3px 3px rgba(0,0,0,0.5);
}
#socializethis a{
float:left;
width:32px;
margin:3px 2px 2px 2px;
padding:0;
}
#socializethis span{
float:left;
margin:2px 3px;
text-shadow: 1px 1px 1px #FFF;
color:#444;
font-size:12px;
}
2. Harus memiliki script jQuery
Kalau sudah punya script berikut, jangan dobel-dobel yah ;))
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Script plugin ini bisa diletakan berbarengan dengan script diatas sob.
<script type='text/javascript'>
(function($){
$(document).ready(function(){
var url=window.location.href;
var host=window.location.hostname;
var title=$('title').text();
title=escape(title);
var twit='http://twitter.com/home?status='+title+'%20'+url;
var facebook='http://www.facebook.com/sharer.php?u='+url
var digg='http://digg.com/submit?phase=2&url='+url+'&title='+title;
var stumbleupon='http://stumbleupon.com/submit?url='+url+'&title='+title;
var buzz='http://www.google.com/reader/link?url='+url+'&title='+title+'&srcURL='+host;
var delicious='http://del.icio.us/post?url='+url+'&title='+title;
var tbar='<div id="socializethis"><span>Share<br /><a href="#min" id="minimize" title="Minimize"> <img src="MINIMIZE.PNG" /> </a></span><div id="sicons">';
tbar+='<a href="'+twit+'" id="twit" title="Share on twitter"><img src="TWITTER.PNG" alt="Share on Twitter" width="32" height="32" /></a>';
tbar+='<a href="'+facebook+'" id="facebook" title="Share on Facebook"><img src="FACEBOOK.PNG" alt="Share on facebook" width="32" height="32" /></a>';
tbar+='<a href="'+digg+'" id="digg" title="Share on Digg"><img src="DIGG.PNG" alt="Share on Digg" width="32" height="32" /></a>';
tbar+='<a href="'+stumbleupon+'" id="stumbleupon" title="Share on Stumbleupon"><img src="STUMBLEUPON.PNG" alt="Share on Stumbleupon" width="32" height="32" /></a>';
tbar+='<a href="'+delicious+'" id="delicious" title="Share on Del.icio.us"><img src="DELICIOUS.PNG" alt="Share on Delicious" width="32" height="32" /></a>';
tbar+='<a href="'+buzz+'" id="buzz" title="Share on Buzz"><img src="GOOGLE-BUZZ.PNG" alt="Share on Buzz" width="32" height="32" /></a>';
tbar+='</div></div>';
$('body').append(tbar);
$('#socializethis').css({opacity:.7});
$('#socializethis').bind('mouseenter',function(){
$(this).animate({height:'35px',width:'260px',opacity:1},300);
$('#socializethis img').css('display','inline');
});
$('#socializethis').bind('mouseleave',function(){
$(this).animate({opacity:.7},300);
});
$('#socializethis #minimize').click(function(){
minshare();
$.cookie('minshare','1');
});
if($.cookie('minshare')==1){
minshare();
}
function minshare(){
$('#socializethis').animate({height:'15px',width:'40px',opacity:.7},300);
$('#socializethis img').css('display','none');
return false;
}
});
})(jQuery);
</script>
Bisa juga diletakan diatas kode </body> mana deh yg jalannya yah :) atur-atur saja :D Pada script plug-in tersebut ada gambar yg harus dimasukkan, dan gambar itu bisa disikat dimari Gambarnya.
3. Save.

Screenshot for blogger after i'm do practice...

PERHATIAN!!!

Dikarenakan semua script plugin ini nantinya dihosting, maka hostingan gambar harap diperhatikan dan juga link share yg akan sobat mau tambahkan/dipakai.

Pada artikel aslinya ada script cookies, dan beben tidak memasukannya. Jika sobat mau memakainya dapat diambil script tersebut di Cookie.Js TXT. Pas praktek jg tidak dipakai kok, tapi jalan sob :D bay bay :-h