how to add a very good share button with CSS3 to the post in blogger ~ 3IANGLE

Hi today we will give you a nice share button with css3 and the way to add it so follow this lessons .

if you want to add this share button to your blog

Go To Blogger -> Template -> Edit HTML -> Proceed
Search For ]]></b:skin> (Tip:- Use Ctrl + F to search)
Just above ]]></b:skin> paste the following code

/* Social Sharing Widget by 3iangle */
ul.BV-social {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.BV-social li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.BV-social li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.BV-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.BV-social li.BV-facebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO5URTTocAiU2FxwZL9zYByY8JwSV5DfqYj0n599cSiWIfVQr6GVc5rXCbTE-Y0D5g1TdqZ8RUP1N8LFzoUAcJztYuA-TpQs5oq2jCl97NPCWimOpGjBGa6gBvZ7XAmftf0hlBM-AHE50/s1600/facebook.png);
}
ul.BV-social li.BV-twitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAEBd1LsJ2OLHqa9yvWyzeBi6lDvC7cbzAiqHQh0SurMw55mI3gIaNMYl8yG1AMtty5EzGG2kNDLJmi9uY2wA1l9Ga25oODotUXLy2r5R8ZpdBzRYs2Ntagk1Q_EFYJr4wHX1ITm9LZUQ/s1600/twitter.png);
}
ul.BV-social li.BV-googleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja54XM7dEAceCeejpIwtJO4qj8xe_3ZCKTfFl-zbHRz1Bj6B319M7CQjwKvEgmnKAyZFXhAHT0pz1Pw94EW5paaB06sNluNMNVoISFKkErRs-xyf0Iars5vFIA_SHYmE8GRQh88ld0-68/s1600/google+.png);
}
ul li.BV-pinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdAlfDU57oAdtTWdB5i8tHM6XB2vS8XmJdQZd_oTuzdTyJvLkMbonvDcTiJG7k-myt1JXAQIbuRX-Rx0XoCqRX1ILkYV00ChdoN1MSQPjA2Ru7eaSuCuNPYH29jxqAgt3u_0UQenyRzc/s1600/pinterest.png);
}
ul.BV-social li.BV-stumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1aK4PxtHKTCc7QHw0Vi28R7Vm3CIPR_VtiX32WWcJhyjOjVM3jKc2vbnvNC1Zy4cSHkhsJ-1tyf7P3xumyM7HO-bnRuGUUnm7iPd4YYz5Ydxw4daDLbyKMm1draY56R3-acOgK9g3fHY/s1600/stumbleupon.png);
}
ul.BV-social li.BV-delicious {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-cF7-LZnT8M4sGuA8u1Vm4kxKbf4o1n1wFArOYwIMkDPeQ1k8GWqEgFYeCY8D9n_MHzLwR9kf9q3iGeB5ayD7K_9I-6LK9YLz8ZyXY_OzOrioUPJc9z380ZZsFrZ09Aj0gBvBFXALZGw/s1600/delicious.png);
}
ul.BV-social li.BV-linkedin {
background-image:url(http://2.bp.blogspot.com/–meaqxVda18/UXAkxjneLsI/AAAAAAAATtE/83R6N6edo84/s1600/linkedin.png);
}
ul.BV-social li.BV-reddit {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ5BQ-mSJS_wnoiz4nTyg2UDufWxsGwGPM_37x6pkpCC6sawdInv0pziTg-TAXLU4PhKA6xWOZ1BkBSP5c2qxK18EXa36jZloYtFktM4No3TfvqVxa6GnX8mbVkqOOqBK_uZUOREyTZdw/s1600/reddit.png);
}
ul.BV-social li.BV-technorati {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3UFbBBRyHbiUNk4Q-dcmtjiy_257fWA2gXfvDE8fmCnTw9APbDbSvnQf9VXXjAfbOVZnJROutroFcttamELlVLFNYwOWA38EB-CN4xsp58OancELW5yKEEIcGapFtzsMR8YwatiR-kDU/s1600/technorati.png);
}
#BV-cssanimation:hover li {
opacity:0.2;
}
#BV-cssanimation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#BV-cssanimation li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#BV-cssanimation li:hover {
opacity:1;
}
#BV-cssanimation li:hover a strong {
opacity:1;
top:-10px;
}
/* Social Sharing Widget by 3iangle */

after that Search for and just below it paste the following code and save the template.

<b:if cond=’data:blog.pageType == "item"’>
<div style=’font-size: 22px;’>Like the Post? Do share with your Friends.</div>
<ul class=’BV-social’ id=’BV-cssanimation’>
<li class=’BV-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’>Facebook</a>
</li>
<li class=’BV-twitter’>
<a expr:href=’"http://twitter.com/home?status=" + data:post.title + " — " + data:post.url ‘ rel=’nofollow’ target=’_blank’>Twitter</a>
</li>
<li class=’BV-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’>Google+</a>
</li>
<li class=’BV-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’>Pinterest</a>
</li>
<li class=’BV-stumbleupon’>
<a expr:href=’"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ‘ rel=’nofollow’ target=’_blank’>StumbleUpon</a>
</li>
<li class=’BV-delicious’>
<a expr:href=’"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ‘ rel=’nofollow’ target=’_blank’>Delicious</a>
</li>
<li class=’BV-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’>LinkedIn</a>
</li>
<li class=’BV-reddit’>
<a expr:href=’"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ‘ rel=’nofollow’>Reddit</a>
</li>
<li class=’BV-technorati’>
<a expr:href=’"http://technorati.com/faves?add=" + data:post.url ‘ rel=’nofollow’ target=’_blank’>Technorati</a>
</li>
</ul>
</b:if>

that's all i wish that this widget was very good if you have any question or problem we are here contact us ^-^

Do you Like the Post? So share it may be your friends will like it !.

how to add a very good share button with CSS3 to the post in blogger

0 التعليقات:

Post a Comment

Follow us !

Subscribe

Popular Posts

3iangle