 |
| Cool Rounded Social Share Buttons For Blogger Post 2014 |
This is a Below Post Social Sharing
Widget. In this tutorial im gonna explain, how to add it to end of
blogger post.
It include nice title hover effect too. By using this social sharing widget, you can share your
social networks
with one click.It means, you can get some visitors to your blog if
someone do sharing. Im using Css3 and HTML, Just check out demo about
this Social Sharing Widget .
How to add Social Sharing Widget For blogger
1. Log in to blogger
account and Click drop down.
2. Now select "
Template" Like Below.
3. Now you can see Live on blog, Click
EDIT HTML Button"
4. Find this tag by using Ctrl+F
]]></b:skin>
5. Paste below code Before
]]></b:skin> tag
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/AVvXsEi-_cGcq_C79_YnMJGOVqF815kl5B6kZWUK7gHz92ZEMxH-bjv-ULkStV0h-vYlxMOktiP20iV5Tu6u3Ll63YPKxZD9ufLw6HTXVxUcFW_zjAPus1fv-B4__RFOmtZAjy-t1r6zj2LQPRux/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ60bbHTpB02LUYM94P9Ba2xGYfey5iG2IHCUkYfxfacpuctT3LZ2iYroB-xGtKxp-Z0k5_bGZ4ThwjTU-crKyA6we8qzUDYJ6bSvKxr7qWVigaTy2Fvar4KcSEH5Le0aKuUDz5Tazg_zM/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcfMSsAcQMcvd4UEaEXApqbxddzvXdZzhelK8wveBZ0FQZM2j5qwrvCJaRb1nKKAJNAPdtTq21OWvPddNyJKZf9Pm3iTzlAy2c8h47OtDaA6XhPgWitWmSDp7D6dcPzfbV7hkk6z8ahf7X/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7JycFbvulzIzzPDs614o3If27C4kjsFyrhlbI8yWdNL0vPbn06KXYBJ9YLORON8XSeOSSUJL0qFmN7UqzZu6Oib9TXz2uPhirUT8EU7sfsc7WI6A_vKTm2DYmpSQolOIb4h-rQnTa_oB/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy63h5gek4p2aF4l67piqP5X25So3gdp4EfV0idQhYiy0S12gBe_h1iIBdZagIQWTKyKpQHK8rWUKhYpP_eL7kvOitbseSCIPXSoLY_08QGhME7uUatULtBIzxs9WvZQQwwTyBOV6AD-I7/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgskL82tn-6eWtr9sKzNWJd0iytQL7dBMofDGBmhF5psncEm1vlasrZMlYDvf-2Qe9lccbXTGkkFwVyby0dKjkTaJXjudo-dFvNWHKz_AC6_EaYgT9G1iQqO_KJbcr7VQseXGXTamOw9Ifx/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWjtaxijc-WPUHAgTEj56zahsmDo_vmgVlc8otFbFIGjdvpthZZVxQ21DW1UX8l4vWo-S8mqtJ7J9fPwA9SD1INs8hClFjkDrssdJ16WwF7cid3tKX6djS0QNy1fg2GTr1d6uNulQtgDo/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;
}
6. Find this tag by using Ctrl+F
<data:post.body/>
7. Paste below code Before
<data:post.body/> tag
<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>
8. Now save your
template. You are done.
.png)
.png)
.png)
