Today in this post i will be sharing really cool and nice looking Css3 round shaped social sharing widget for your blog.This Css3 round shaped widget comes in with an hover effect.
This widget widget will surely encourage your readers to share your content which will surely result in great traffic for your blog.Lets take a look at it's appearance first.
This widget widget will surely encourage your readers to share your content which will surely result in great traffic for your blog.Lets take a look at it's appearance first.
Css3 Round Shaped Social Sharing Widget : -
Well to get a better preview of this Css3 round shaped widget you can scroll down to the end of the post where you can find this widget because i am using it for my blog as well.
Add Css3 Round Shaped Social Sharing Widget to Blogger : -
1. Log in to your blogger dashboard and select your blog.
2. Now head to the template section of the blog in the extreme right of the screen.
3.Click on Edit Template and press Ctrl + F to get the search bar.
4.Now search for this tag ]]></b:skin>
5.Now place the the below code above this tag
]]></b:skin>
]]></b:skin>
/*..Css3 round shape Social Sharing Widgets by eliteblogpress.blogspot.com..*/
ul.social_btrix {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix 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_btrix li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfV03f7VkYNWrVuyo_Ouu2kwrJMUS4YseM6H2jak-wS-eULRCR3FGmeWb1yk7U5PNz_S5VEHwcId1wJC62J-9QCuJbPMFLsq2C_r5pGNPUcbE-CqWVKI6N1pQnNYeSdZcnK0UU5DHdELhyphenhyphen/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55y_ePiE5iJr0VK6vTgbxCR76_CQWH5xbBZ7BdN44HJL3t0SgQWH_B-K8WuokWHgfGZcDNcS-pq6Fwac-T3lU7jMgrJ91ZC72ebG-LSfk-4bo0oqrzSDDXf4uVmv0RGL3H_FjsqNzbgq9/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh28WIRRSMEOos3IZjOsNtB3uKa-b-nF-_SI2NL7uUJMlcpm3gnd1j82kDSr0ZAifKjTgjFF_UlK4b2UaDZ4aJHXMQIFA7vacFOi2EXMQ8c2_umrjQHvFhVcluz6JSqxLDQJpRTsZZpKtGz/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaMnLve53YipZPrYXkrkhlyineVetLy5jo7dCI37hTgoiqc1N0yrHZDy5RcrebQLge62uEbM-13pBXwFhCx16_5Rfl2SoWp0T3-VwB4ZwcVVUCJ9FhuJwt0JYdLiIXBuPFWcIuuN0YmbpP/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNQNtueVcYbcH5Vx9Y5_FThSHzZe-SA5_AtQmKdfWYWN_S-e5aiqpjjg8a_9h9UcQ5MAmt2NiTwOdlWG2Rf66TdfPIqLZ9F5ZERcN_FVmSX30ZjlNsQPLGcVZV_E4AGwJeLC9cb4UMaGz9/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxmE-X41zkH_TtFudhf2Yh_tc7WIPEQ7l0wJkmIS6RQQjHj3EKlGFRWAiDd4fKRxmz5BmZYy_3-Nq2_Kju-g-J7gIHiCdQ5QXryr2QRpoUAdwatBnAjcpsIaXiffOFvdArJ-Acp7GKkOZ/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4N5J4NsC4ofaRp0VG0CXPNv5fRJEjFPJzmAqtzsg-Tbf_yAYeMiiB0IWMI_XOUpFCUXFykUtfT2WIy_r07k73s4r_90_Tzk5C7GuKoCuvBMbd2G1JWlqTdjHPKEfrqup8BO4rrQyXqgGI/s1600/btrix-Linkedin-icon.png);
}
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}
ul.social_btrix {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix 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_btrix li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfV03f7VkYNWrVuyo_Ouu2kwrJMUS4YseM6H2jak-wS-eULRCR3FGmeWb1yk7U5PNz_S5VEHwcId1wJC62J-9QCuJbPMFLsq2C_r5pGNPUcbE-CqWVKI6N1pQnNYeSdZcnK0UU5DHdELhyphenhyphen/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55y_ePiE5iJr0VK6vTgbxCR76_CQWH5xbBZ7BdN44HJL3t0SgQWH_B-K8WuokWHgfGZcDNcS-pq6Fwac-T3lU7jMgrJ91ZC72ebG-LSfk-4bo0oqrzSDDXf4uVmv0RGL3H_FjsqNzbgq9/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh28WIRRSMEOos3IZjOsNtB3uKa-b-nF-_SI2NL7uUJMlcpm3gnd1j82kDSr0ZAifKjTgjFF_UlK4b2UaDZ4aJHXMQIFA7vacFOi2EXMQ8c2_umrjQHvFhVcluz6JSqxLDQJpRTsZZpKtGz/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaMnLve53YipZPrYXkrkhlyineVetLy5jo7dCI37hTgoiqc1N0yrHZDy5RcrebQLge62uEbM-13pBXwFhCx16_5Rfl2SoWp0T3-VwB4ZwcVVUCJ9FhuJwt0JYdLiIXBuPFWcIuuN0YmbpP/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNQNtueVcYbcH5Vx9Y5_FThSHzZe-SA5_AtQmKdfWYWN_S-e5aiqpjjg8a_9h9UcQ5MAmt2NiTwOdlWG2Rf66TdfPIqLZ9F5ZERcN_FVmSX30ZjlNsQPLGcVZV_E4AGwJeLC9cb4UMaGz9/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxmE-X41zkH_TtFudhf2Yh_tc7WIPEQ7l0wJkmIS6RQQjHj3EKlGFRWAiDd4fKRxmz5BmZYy_3-Nq2_Kju-g-J7gIHiCdQ5QXryr2QRpoUAdwatBnAjcpsIaXiffOFvdArJ-Acp7GKkOZ/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4N5J4NsC4ofaRp0VG0CXPNv5fRJEjFPJzmAqtzsg-Tbf_yAYeMiiB0IWMI_XOUpFCUXFykUtfT2WIy_r07k73s4r_90_Tzk5C7GuKoCuvBMbd2G1JWlqTdjHPKEfrqup8BO4rrQyXqgGI/s1600/btrix-Linkedin-icon.png);
}
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}
5.Now search for this tag <data:post.body/>
6.Now paste the following code after this tag <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
<ul class='social_btrix' id='animation_btrix'>
<li class='abfacebook'>
<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='abtwitter'>
<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='abgoogleplus'>
<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='abpinterest'>
<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='abstumbleupon'>
<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='abdig'>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='ablinkedin'>
<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>
</ul>
</b:if>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
<ul class='social_btrix' id='animation_btrix'>
<li class='abfacebook'>
<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='abtwitter'>
<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='abgoogleplus'>
<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='abpinterest'>
<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='abstumbleupon'>
<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='abdig'>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='ablinkedin'>
<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>
</ul>
</b:if>
- Note :-
<data:post.body/> tag in your template so if the first one does not works for you which usually happens so try pasting the code on the other tag that will surely solve the problem.
Share Your Views : -
That was all required to get this awesome widget.Do share your views about this post by commenting and if you are having any problems so feel free to contact me.If you liked it then do share it help others like you.There will be more coming in future so do subscribe or follow to stay in touch.
No comments:
Post a Comment