
Demo
I am a demo page :) CLICK ME !!How it Works ?
This widget working with Pure CSS, And not containing any Javascript or jQuery code.How to add it to blogger ?
Step 1: Open Blogger Dashboard>> Navigate to Template>> Click on Edit Html>> Tick Expand Widget Templates. Now Search For ]]></b:skin> ( use ctrl+f ) And just Above it paste Code given below..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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsb91LHfYoaITxTkvhDZIwEMqGIHTHfYa_LScS9I_6G9miRWsFxHANLNL8O_rEByh1drRbbfjvEOFHTDLuPG24IkldCTnE_HsRnzxJ97FbvL5hy7qqkBU54LPM3K3AcYYzLiL1bkOtXfc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_oU6AbaR_vx7-3ZDaBx1p77KG6M-JV7pJQRGZbkyNZXHDT5TUVd_vaGsxQykrn1G6So2Gz259l8RuGO7vbhC3ZDLk3SClT7z-hGaGS3Z6MP4rPyTKxvq8DuLhona2Oo7rKiFgSSwstqU/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO2Ee4mO4S-xXCh7-MageHKqtMKfD6cF3_JIPo-epI88yznohn8bltsjxbkoyRe4jv-Fj5iLe99WyXpD4AI47E7hOk4uTWoQo9FYLyF392e-rJB-UmfOST-J6SOytnQlyNUFoWzFvW3JE/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwJtWBSOAEXQZ5vfUhyqjnZsWYj3MMYXOAoRrlW3l4Tuw9f65soF3UJwHQ8wud6CeQ5FFg2ckY_pBUphJFfjVJHRYcidgiE6ZA4Xd3YS8E36L_msrAxfvmX0u63WXhHIPj5jwVTMe55t4/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);
}
Step 2: Now Search for <div class='post-footer'> And paste the below code just below it.
Note: You're Almost Done to Adding this widget, but if you want to add this to starting of the blog posts, then add last code above <data:post.body/>.<em>Share This Post, If You Find This Awesome</em><span><a href="http://www.pokharatech.com" style="float: right;">Get It</a></span><hr/><div class='scial fbs'><span><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'>Facebook</a></span></div>
<div class='scial tw'><span><a expr:href='"http://twitter.com/home/?status=Check this out: " + data:post.title + " " + data:post.url' target='_blank'>Twitter</a></span></div>
<div class='scial gp'><span><a expr:href='"https://plus.google.com/share?url=" + "en&url=" + data:post.url' target='_blank' title='Share On Google Plus !'>Google+</a></span></div>
<div class='scial st'><span><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'>Stumbleupon</a>
</span></div>
Now Save Template.
That's it, if you face any problem adding this widget feel free to ask in comment box below. Peace, Happy Blogging.
4 Comments
Nice widget bro, keep rocking !
ReplyDeleteThanks bro !
Deletecan u make my blog more effective i will give u username and password please contact me on facebook www.facebook.com/lovesumi.goldenstha
ReplyDeleteSure bro, contact me via email (pokharatech@gmail.com)
ReplyDelete