Recent statistics say
that Social networking now accounts for 22% of all time used up online in the United
State of America. So many persons are using social media to promote their
business affairs and so on, one effective social share can
drive flood of traffic to your site or blogs. Adding social media
buttons to blogger is not a big deal and difficult task but if you will add eye
catching social sharing buttons then it increase chance to get more share on
your post. In this new post I will give you "Sexy Social Sharing Buttons" which is
create with help of pure css3.
Adding Sharing Buttons to Blogger:
· At first “Go To Blogger Dashboard”
· Then 2nd step is -Click Edit
HTML > Proceed > Click the Expand
Widget Templates Box
· 3rd Search <data:post.body/>
· Finally, Just paste the following code below <data:post.body/>
<b:if cond='data:blog.pageType ==
"item"'> <div
class="sharelordhtml"> <center><div
class="headinglordhtml">Like the Post? Do share with your
Friends.</div> <ul class='social' id='cssanimation'>
<li class='facebook'> <a
expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u="
+ data:post.url + "&t=" + data:post.title '
onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;' rel='nofollow'><strong>Facebook</strong></a>
</li> <li class='twitter'>
<a expr:href='"http://twitter.com/home?status="
+ data:post.title + " -- " + data:post.url ' rel='nofollow'
target='_blank'><strong>Twitter</strong></a>
</li> <li class='googleplus'> <a
expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url="
+ data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;' rel='nofollow'
target='_blank'><strong>Google+</strong></a>
</li> <li class='pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'
rel='nofollow'
target='_blank'><strong>Pinterest</strong></a>
</li> <li class='stumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url="
+ data:post.url + "&title=" + data:post.title '
rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li> <li class='delicious'>
<a expr:href='"http://delicious.com/post?url="
+ data:post.url + "&title=" + data:post.title '
rel='nofollow' target='_blank'><strong>Delicious</strong></a>
</li> <li class='linkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="
+ data:post.url + "&title=" + data:post.title +
"&summary=&source="' rel='nofollow'
target='_blank'><strong>LinkedIn</strong></a>
</li> <li class='reddit'> <a
expr:href='"http://reddit.com/submit?url="
+ data:post.url + "&title=" + data:post.title '
rel='nofollow'><strong>Reddit</strong></a>
</li> <li class='technorati'> <a
expr:href='"http://technorati.com/faves?add="
+ data:post.url ' rel='nofollow'
target='_blank'><strong>Technorati</strong></a>
</li> </ul></center></div>
<link href='http://fonts.googleapis.com/css?family=Englebert'
rel='stylesheet' type='text/css'/> <style> ul.social { list-style:none;
display:inline-block; margin:15px auto; } ul.social li { display:inline;
float:left; background-repeat:no-repeat; } ul.social li a {
display:block; width:50px; height:50px; padding-right:10px; position:relative;
text-decoration:none; } ul.social li a strong { font-weight:400;
position:absolute; left:20px; top:-1px; color:#fff; z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75); background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.5); padding:3px; } ul.social
li.facebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq5aUthtFPK4Tc63J4K5cs4d6Yp7k-Ba8dyJPEhbbRgOEL-ZbA1WiDxQvq4xc4gmzoulHapJkKTMrvwZ_PNdHesQMfrqRaoQ1gBhJv-kNldNJ3ScJSvUgh9um6cy52256-zgWp3XT6zDM/s50/facebook.png);
} ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg6dI0hxB2ZFSQyYfzBGeTDtK6QfRnyNRqwDfKfEC-a8rMLbuJZE1v9s1FHVzdcm2iUmKO0_sMBS-JYP7a2KbW4rDeF0f97eFenEpNx23SlU7BAz2frsMt3ArqJqxg7S2KeNTZqSGe3oI/s50/twitter.png);
} ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimsuRM4fyKj-7aJb_ARSXWk7JulelUu2vOyteXtuvbTmTfoDfwzQy2sBKNFEqgq_s6ZfK2ZS_KzTpuXXs_Vu9roWhojGivSKfR6MTm1R7oPZ0dSZDZ0lzVNd7-6TmRo1CStxEpwkL4mAU/s50/google%252B.png);
} ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQzLu_QTz4XPcgV4egKn3FyWTI-GqvBpVswbGSrxk6Q2Vpe1aFd6IYyPctN5i5bGFi9g76_3BrtEXjO0U2w1w_XuFF8jUxhs2HwnB5yi3WOh3KWneJr3Ixe_oL-e9RK3xVFumaHAa7Cz0/s50/pinterest.png);
} ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirgvsi6R8qouI5kPCuZ8t_qnm-i9xQlPRMFgPqVF0PZj3sW3g7wq_VQ0So6N_eAAv9rfB-Yt4j4z0HZ1UwWN9CLcbbHtKB3_NUaZHZD5GVQg_1Wt8tSpvHuVTmGerpvMWZySxPeowBPnU/s50/stumbleupon.png);
} ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWLfo-rSLM7bABZtIk-ulajyHaPb8Fd1GccHuE47rMO8X0Av6Ci0_SaFaPmv-HbI4cofHVdiM7jwI-RlwwbHY-7rr0IgZeU-XNzdlfCeDS38sXdjJI5Q3FcDu2CRDLiqpHr-uWcM7xypk/s50/delicious.png);
} ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWmcaSDbvlWuZws31h4BD6ncVbwsLIBeH7AXm6eTHG1loXYht9xQVS47Tq0ONvXIV9t-bfgSZ-PooFVWIMxJk2Va7dFbZ1TGkkKzzf8oSsn4b4RgZPhLMqp0j5mH3OkwB9iNFl-qIrexE/s50/linkedin.png);
} ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigIzf21HlA04_C6jLRM-COGKEEvSsDyxxaRfZ7FNiu52OmttRo6w_9oODEEQvPi1p6yAMuoM4aIelC6psgOiQ8W4PiwWkpD-v2L5JltALRsnJiTnLfHjkGrfCvw7vmNLKHLB2sVBsx10A/s50/reddit.png);
} ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ1M0kodrXFDBy7B9_WKI2lhVlJZShy64tHY7inUnysDoLgE4MEG5iCMPAxs0z1bqRp2uAcljhWp4RcyrhU0KwwltgSnX_PWwqrhs3_28ukKL9saueV38-gqCAgXloJCbbudkKSgE1tJ7O/s1600/TBI-technorati.png);
} #cssanimation:hover li { opacity:0.2; } #cssanimation li {
-webkit-transition-property:opacity; -webkit-transition-duration:500ms;
-moz-transition-property:opacity; -moz-transition-duration:500ms; }
#cssanimation li a strong { opacity:0; -webkit-transition-property:opacity,
top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top;
-moz-transition-duration:300ms; } #cssanimation li:hover { opacity:1; }
#cssanimation li:hover a strong { opacity:1; top:-10px; }
.headinglordhtml{ font-size:25px; font-family:
'Englebert', sans-serif; } .sharelordhtml{ border-top:30px solid
#3873CC; padding:16px;
-webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow:
0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow:
0px 7px 9px rgba(50, 50, 50, 0.75); transition: background
.777s; -webkit-transition: background .777s; -moz-transition:background .777s;
-o-transition: background .777s; -ms-transition: background .777s;
background:#D9D6FF; } .sharelordhtml:hover {
background:white; } </style> </b:if>
Now You Can Click On Save Template Button
And Enjoy This
Awesome Widget.
