Social networking now accounts for 22% of all time spent online in the
US.Many persons are using social media to promote there business, one
social share can drive flood of traffic to your blogs.Adding social
media buttons to blogger is not a big deal but if you will add eye
catching social sharing buttons then it increase chance to get more
share on your post.In this post I will give you "Sexy Social Sharing
Buttons" which is create with help of pure css3.
Adding Sharing Buttons To Blogger
- Go To Blogger Dashboard
- Click Edit HTML > Proceed > Click the Expand Widget Templates Box
- Search <data:post.body/>
- Just below <data:post.body/> paste the following code
<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/AVvXsEh-sa-s0QhKCod4HCGruIpZu2lucPkFGQCU4_q8IsnQaBSl1rPSAPu1C4XjmUa6OZZp59l_CVemH0cY89jXMhurHOngUAW7pu_mmwdB8TfQQYhEmLUheoxwkayrX9kc5j52VVrD1salGHc/s50/facebook.png);
} ul.social li.twitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXS-qN7ZbFT6xnaEd-nHeufs0BGSesQmzZewqjj4Ru4ZJP8pQcFXhJ6ZWSFEL4VB98q4EN3Gx8LWWgiGMFuNzoToFPa1mMVppkdtQaPJvSvawsN_X7KewkjJDTM312fUtx6ezxH1DIdvY/s50/twitter.png);
} ul.social li.googleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohyiTMS205Rt9VY4CIh2fwT2pU7NXzizwzvhjliyuHNJ4awteb7f-qPl8RMatcPyS9LGBHzOQ1nBtufqvUKzscyJqb2Gwho6uZ-BMD3nloWL7HaZO-KuFMPFp_UbueLY4eVBMqzZSM1U/s50/google%252B.png);
} ul li.pinterest { background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg400GW4DTt4t1-_UUShIBPgHtSl_pqcXlu19XgO6peERbzGgylAHH3FtAOSo7JAqtWVAhfWH8mtAAZkCTeRl8qBYB5VOJl-r5LZZWTsjo4c5D5ASQUr8T16yBSrU-18RVDzMeLRO0ZpZc/s50/pinterest.png);
} ul.social li.stumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwdieW6PQS4y0o7WonmFnZFARUFoPAvgJjjmslLCdJfVlYWtBx3N1FpXE0uASOzmvavKVBGb3cu4xSrMcOwUfIQ1wqvF84sBQ-dTedBVswzu3aQEQlpd0jfqcuAn0huwkRSzwQvzvd1hw/s50/stumbleupon.png);
} ul.social li.delicious {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijVunZkiK7sb89JR3vTjSltjj6J-fg8TcG0x2GCEbmVHLYKWO_IiRXP2avNlidU_nYqpLey_vC1BeHp2JAis8vnFIYVZ0w8zQpQ6Zs-8GDZ0x03jpYgfFyJeEm2JSZDfGGH9YN3-5vWYk/s50/delicious.png);
} ul.social li.linkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaAnnxr35McAuiAtceF3_LCAikFz50I8MXj2M187hYU5g6PGQynpGfBCSfN2py9TYjvyaV5HiBTswWelNG62fIF-_tMlMRA2SvI-pcqg-De-LJV57WGK_UhswiqHJFOMZtSH9KzQl5ZyU/s50/linkedin.png);
} ul.social li.reddit {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIDcN8OsPx37pqxOra68R1a1Vr36b6bBGt5ispyA6kcoT8sPe_zaSYJoXndPmRkcjsU51mNQ3tPo9RrEAYsCsyO5FrieQNLoxyPVHgZtr8C8kf5Fp3QQO7hkT5SxEGlEmXXVxemkMEJP0/s50/reddit.png);
} ul.social li.technorati {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtF5q_JbEh3DMEW7dvyF9Lol2mxJHrqNyPHUr39bqjZTO19nEmVq-W05EOfyQXmPY0JK6IUPX7njc9Qc5HpghxhJRs5uUbV5bxhD6OnRPi1hGmzQAZT2ged5KV-0friy-uEfpoVNsg0mas/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 Click On Save Template Button And Enjoy This Awesome Widget.
If you have any problems tell me in the comments.
Hi! I am P.Harikesh,founder of this blog.You can find many blogging tricks and tips in this blog.
0 comments:
Post a Comment
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our Instant HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.
4.Click Subscribe by Email to receive Replies