Slick Social Share Buttons

1. Login ke Blogger.
2. Halaman Dasbor Dasboard.
3. Rancangan Design.
4. Tambah Gadget
5. Pilih HTML/Javascript
HTML/Javascript

<style>
#nav-dcssb, #nav-dcssb li {
margin: 0; 
padding: 0; 
list-style: none;
}
#nav-dcssb {
}
#nav-dcssb li {
padding: 5px;
}
#nav-dcssb li.size-box {
text-align: center;
height: 60px;
}
#nav-dcssb li.size-small {
height: 30px;
}
/* Floater */
.dc-social-float .tab {
cursor: pointer;
height: 44px;
margin-left: -1px;
}
.dc-social-float .dc-social-float-content {
background: #fff;
border: 1px solid #bbb;
padding: 10px;
}
.dc-social-float .dc-social-float-content {
border-radius: 10px; -webkit-border-radius: 10px;
}

/* Slick */
.dc-social-slick .dc-social-slick-content {
padding: 10px;
background: #fff;
border: 1px solid #ccc;
}
.dc-social-slick.vertical .dc-social-slick-content {
width: 78px;
}
.dc-social-slick.horizontal.left #nav-dcssb li.size-small, .dc-social-slick.horizontal.right #nav-dcssb 

li.size-small {
height: 60px;
}

.dc-social-slick.top  {
top: 0;
}
.dc-social-slick.bottom  {
bottom: 0;
}
.dc-social-slick.right  {
right: 0;
}
.dc-social-slick.left {
left: 0;
}
.dc-social-slick.right, .dc-social-slick.left {
padding-top: 2px; 
background: url(images/bg_slick_top.png) repeat-x 0 0;
}

.dc-social-slick.right .dc-social-slick-content {
border-top: none;
border-right: none;
border-radius: 0 0 0 10px; -webkit-border-radius: 0 0 0 10px;
padding: 10px 10px 20px 10px;
}
.dc-social-slick.left .dc-social-slick-content {
border-top: none;
border-left: none;
border-radius: 0 0 10px 0; -webkit-border-radius: 0 0 10px 0;
padding: 10px 10px 20px 10px;
}
.dc-social-slick.left.horizontal .dc-social-slick-content, .dc-social-slick.right.horizontal .dc-social-

slick-content {
border-radius: 0; -webkit-border-radius: 0;
padding: 10px 10px 18px 10px;
}
.dc-social-slick.top.vertical .dc-social-slick-content, .dc-social-slick.bottom.vertical .dc-social-

slick-content {
border-top: none;
border-bottom: none;
}

.dc-social-slick .tab {
cursor: pointer;
}
.dc-social-slick.top .tab, .dc-social-slick.bottom .tab {
height: 46px;
}
.dc-social-slick.left .tab, .dc-social-slick.right .tab {
width: 46px;
}

.dc-social-slick.bottom .tab {
top: 1px;
}
.dc-social-slick.top .tab {
bottom: 1px;
}
.dc-social-slick.align-left .tab {
margin-left: -1px;
}
.dc-social-slick.align-right .tab {
margin-right: -1px;
}

.dc-social-slick.bottom.align-right.horizontal .dc-social-slick-content {
border-radius: 10px 0 0 0; 
-webkit-border-radius: 10px 0 0 0;
}
.dc-social-slick.bottom.align-left.horizontal .dc-social-slick-content {
border-radius: 0 10px 0 0; 
-webkit-border-radius: 0 10px 0 0;
}

.dc-social-slick.top.align-right.horizontal .dc-social-slick-content {
border-radius: 0 0 0 10px; 
-webkit-border-radius: 0 0 0 10px;
}
.dc-social-slick.top.align-left.horizontal .dc-social-slick-content {
border-radius: 0 0 10px 0; 
-webkit-border-radius: 0 0 10px 0;
}

.dc-social-slick.right .tab, .dc-social-slick.left .tab {
margin-top: -2px;
}
.dc-social-slick.right .tab {
left: 1px;
}
.dc-social-slick.left .tab  {
right: 1px;
}

.dc-social-slick.horizontal #nav-dcssb li {
float: left;
}
.clear {clear: both;}
</style>
<script type="text/javascript" src=" 

https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type='text/javascript' 

src='http://stylifyyourblog1.googlecode.com/svn/trunk/easingplusslickfloat.js'></script>


<div id="dc-dcssb">
<ul id="nav-dcssb" >
<li id="dcssb-twitter" class="size-box"><script src="http://tweetmeme.com/i/scripts/button.js" 

type='text/javascript'></script>
</li>
<li id="dcssb-facebook" class="size-box"><a name="fb_share" type="box_count" 

href="http://www.facebook.com/sharer.php">Share</a><script 

src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</li>
<li id="dcssb-plusone" class="size-box"><script type="text/javascript" 

src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</li>
<li id="dcssb-linkedin" class="size-box"><script src="http://platform.linkedin.com/in.js" 

type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script></li>
<li id="dcssb-stumble" class="size-box">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</li>
<li id="dcssb-digg" class="size-box">
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</li>
</ul>
</div>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#dc-dcssb').dcSocialFloater({
idWrapper : 'dcssb-float',
width: '98',
location: 'bottom',
align: 'right',
offsetLocation: 50,
offsetAlign: 50,
center: false,
centerPx: 0,
speedContent: 600,
speedFloat: 1000,
tabText: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcqvgOfK1diNKdWucHKb08sOj1VbQelbejTpD_I19ibhMEowJCXgwdpIP-VHZur0Cd7mcV5dMq0C2Nnvhoqhvlu4uImHOFCD4nvywxaeoN-CaStibkDHRdw1PlxyJXWKAi92AHrD3ptHs/s1600/tab_bottom_floating.png" alt="Share" />',
autoClose: false,
loadOpen: false,
tabClose: true,
classOpen: 'dcssb-open',
classClose: 'dcssb-close',
classToggle: 'dcssb-link'
});
});
</script>
6. Save gadget
sumber:http://www.stylifyyourblog.com