Awesome Social Sharing Widget For Blog

Click to Zoom

How it Works ?

 This widget working with Pure CSS, And not containing any Javascript or jQuery code.

How to add ?

1. Open Blogger Dashboard
2. Navigate to Template
3. Click on Edit Html
4. Tick Expand Widget Templates
5. Search For ]]></b:skin> And just Above it paste below Code.

.scial a
{
  text-decoration:none;
  color:rgba(0,0,0,.5);
}
.scial
{
display:inline-block;
  transition:.3s;
  -webkit-transition:.3s;
  -o-transition:.3s;
  -moz-transition:.3s;
  -ms-transition:.3s;
cursor:pointer;
margin:10px 0px;
width:50px;
padding:0px;
height:50px;
font-size:22px;
color:rgba(0,0,0,.5);
text-shadow: 1px 0 0 rgba(0,0,0,.2);
}
.scial:hover
{
padding-right:160px;
}
.scial > span
{
font-weight:900;
display:inline-block;
text-decoration:none;
color:rgba(0,0,0,.5);
margin:5px 7px;
transform:scale(0);
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
}

.scial:hover > span
{
transform:scale(1);
transition:0.5s linear;
-webkit-transform:scale(1);
-webkit-transition:0.5s linear;
-moz-transform:scale(1);
-moz-transition:0.5s linear;
-o-transform:scale(1);
-o-transition:0.5s linear;
-ms-transform:scale(1);
-ms-transition:0.5s linear;
}
.fbs
{
background:#5A5AFF url(http://4.bp.blogspot.com/-2cOi88N_BFo/UPwv8sH_39I/AAAAAAAAApw/vD9_r_Fa87E/s1600/facebook.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.fbs:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #5A5Aff;
border:1px dashed rgba(0,0,0,1);
}
.gp
{
background:#FF4949 url(http://2.bp.blogspot.com/-XVD-f1kc0NA/UPwv8vrZdeI/AAAAAAAAAps/AjnQEbH5Mfc/s1600/gplus.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.gp:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #FF4949;
border:1px dashed rgba(0,0,0,1);
}
.tw
{
background:#00EBFF url(http://1.bp.blogspot.com/–Bd3841SqTo/UPwv9k8JdtI/AAAAAAAAAp0/7tM3LbtEylU/s1600/twitter.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.tw:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #00EBFF;
border:1px dashed rgba(0,0,0,1);
}

.st
{
background:#FFB6B3 url(http://2.bp.blogspot.com/-6Gz9nRzAFbU/UTETWMMF-4I/AAAAAAAAAyg/d9PeD22zbo8/s1600/stumbleupon.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.st:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #FFB6B3;
border:1px dashed rgba(0,0,0,1);
}

6. Now Search for <div class=’post-footer’> And paste the below code just below it.

<em>Share This Post, If You Find This Awesome</em><span><a href=”http://creative-blogging-tips.blogspot.in/2013/03/awesome-social-sharing-widget-for-blog.html” style=”float: right;”>Powered By CBT</a></span><hr/><div class=’scial fbs’><span><a expr:href=’&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’>Facebook</a></span></div>
<div class=’scial tw’><span><a expr:href=’&quot;http://twitter.com/home/?status=Check this out: &quot; + data:post.title + &quot; &quot; + data:post.url’ target=’_blank’>Twitter</a></span></div>
<div class=’scial gp’><span><a expr:href=’&quot;https://plus.google.com/share?url=&quot; + &quot;en&amp;url=&quot; + data:post.url’ target=’_blank’ title=’Share On Google Plus !’>Google+</a></span></div>
<div class=’scial st’><span><a expr:href=’&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’>Stumbleupon</a>
</span></div>

7. You’re Almost Done Adding this widget, but if you want to add this to starting of the blog posts, then add last code above <data:post.body/>.
8. If still any problem persists then Ask in comment.

Share This Now:

7 Comments

Add a Comment

Your email address will not be published. Required fields are marked *