Share/Bookmark Mobilyblocks Style

Masih sekitar share and bookmark, kemarin sudah dibagi jQuery Bookmark yang gaya punya dan cool abis b-) :D Masih menggunakan trik jQuery plugins, Beben si bloglang anu ganteng kalem tea akan bagi cara memasukan tombol share/bookmark bergaya mobilyblocks. Dimana ketika tombolnya diklik akan tampak berupa lingkaran dengan gambar² web bookmark/share yg mengelilingi tombol yg diklik tadi :P Puyeung-puyeung dah penjelasannya tuh :-" biar enggak pusing cek gi dot deh ini live demo [..]

Demo disana ada 2 biji, nah Beben mengambil trik yang bergambar

Kode CSS

.socials {
display:block;
width:32px;
height:32px;
background:url(http://link-gambar/share.png) no-repeat;
cursor:pointer;
position:relative;
}
.socials {
margin:0 auto;
z-index:2;
}
ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}
ul.reset li {
position:absolute;
}
ul.reset li a {
outline:none;
}

Ganti link gambar (kode warna merah) dengan gambar tombol share.

jQuery Plugin

Letakin diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.mobilyblocks=function(options){var defaults={animateTime:750,zIndex:10,widthMultiplier:1.2};var sets=$.extend({},defaults,options);return this.each(function(){var $t=$(this),w=$t.width(),h=$t.height(),parent=$t.find("ul"),list=parent.find("li"),size=list.length;var socials={init:function(){parent.hide().css({zIndex:sets.zIndex});$t.append($("<a />").addClass("trigger").css({display:"block",position:"absolute",zIndex:1,top:0,left:0,width:"100%",height:"100%"}));socials.click()},click:function(){var trigger=$t.find("a.trigger");trigger.bind("click",function(){if($t.hasClass("close")){parent.fadeTo(sets.animateTime,0);socials.animation.close();$t.removeClass("close")}else{parent.fadeTo(sets.animateTime,1);socials.animation.open();$t.addClass("close")}return false})},animation:{open:function(){socials.ie.open();list.each(function(i){var li=$(this);li.animate({path:new $.path.arc({center:[0,0],radius:w*sets.widthMultiplier,start:0,end:360/size*i,dir:-1})},sets.animateTime)});list.hover(function(){var li=$(this);li.css({zIndex:sets.zIndex}).siblings("li").css({zIndex:sets.zIndex-1})})},close:function(){list.each(function(i){var li=$(this);li.animate({top:0,left:0},sets.animateTime,function(){socials.ie.close()})})}},ie:{open:function(){if($.browser.msie){list.show()}},close:function(){if($.browser.msie){list.hide()}}}};socials.init()})}}(jQuery));(function($){$.path={};$.path.arc=function(params){for(var i in params){this[i]=params[i]}this.dir=this.dir||1;while(this.start>this.end&&this.dir>0){this.start-=360}while(this.start<this.end&&this.dir<0){this.start+=360}this.css=function(p){var a=this.start*(p)+this.end*(1-(p));a=a*3.1415927/180;var x=Math.sin(a)*this.radius+this.center[0];var y=Math.cos(a)*this.radius+this.center[1];return{top:y+"px",left:x+"px"}}};$.fx.step.path=function(fx){var css=fx.end.css(1-fx.pos);for(var i in css){fx.elem.style[i]=css[i]}}})(jQuery);
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
$(function(){
$('.socials').mobilyblocks({
animateTime: 500,
zIndex: 50,
widthMultiplier: 1.15
});
});
//]]>
</script>

Lakukan Expand Widget Templates pojok kanan atas, cari kode <div class='post-footer-line post-footer-line-3'> masukan kode HTML berikut dibawahnya

<div class='socials'>
<ul class='reset'>
<li><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='' src='http://link-gambar/delicious.png'/></a></li>
<li><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='' src='http://link-gambar/digg.png'/></a></li>
<li><a expr:href='data:blog.homepageurl + "feeds/posts/default"' rel='external nofollow' target='_blank'><img alt='' src='http://link-gambar/rss.png'/></a></li>
<li><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='' src='http://link-gambar/stumbleupon.png'/></a></li>
<li><a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='' src='http://link-gambar/technorati.png'/></a></li>
<li><a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='' src='http://link-gambar/twitter.png'/></a></li>
</ul>
</div>

Save. Tahun baruuu!!!
Look at here http://designbeep.com/2010/12/22/24-fresh-and-useful-jquery-plugins-worth-checking-out/