Adding Egg Style Unique Social Sharing Button to Blogger
First we will add the Css Effect to Blogger.follow my below Steps for this.
- Go and Login to Blogger -then Click on drop down menu - then click on "Template".
- Now you will see "EDIT HTML" Button on screen ,Click on it - and then Expand Widget Templates
- Now find ]]></b:skin> by using CTRL + F
- Now Paste the below code Just Before/above ]]></b:skin> tag .
/* Social Sharing Widget by egytricks.com */
ul.ET-social {
list-style:none;
display:inline-block;
margin:5px auto;
}
ul.ET-social li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.ET-social li a {
display:block;
width:50px;
height:50px;
padding-right:5px;
position:relative;
text-decoration:none;
}
ul.ET-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.ET-social li.ET-facebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQcloda1O4hJm7Xs-lqN0bg6nqDuaKJRRl7oB950nvpAptj6uwUL5zfKKI41qZY2hj34ziklB5X4ZTTKQua93NOZ0RL0Ywg4Lkn7psWKA7_prnN8QqGutjKhaIEFIF4aaw9YhpsanqfBE/s1600/facebook-icon.png);
}
ul.ET-social li.ET-twitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMyveZAbCEdnLXyqO9hCxHAHqj66Y_J58r5XW0lCJHHZkmGlfRtxn-VtHHUVYiOXGi2bEK4X-vCz_H8Vjhmy5UEs_2TwFtYi_qg0RWPIvlS9OTixxgEp5pgOkC98QziGbbppz4K4SvcZM/s1600/twitter-icon.png);
}
ul.ET-social li.ET-googleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtgpdmg4iZcGu4alXVBgVUUPbGl416cEJwZ6KoMdmm2inv9eM2KU374-Hi_u3jpIsIuylstGS6Vl8kbWymZg3A5DJxhUDkWD8bAEod21jhnpzRugHQDejPmY-lVKGzPSd_v5MEPtFb_fE/s1600/google-plus-icon.png);
}
ul li.ET-pinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjauR6b-eluVXo6h95fM158sifoF6S75VzcWWH7JGKo3JYC8-BJutQJVgAZ7o_Th21XCZZEThI9RJk29o0rnSL6-R20TecTdlwWXrztZs9Xw9T-6iFHkPjSmuQAUVSKb37jjzqdQlRYsSQ/s1600/posterous-icon.png);
}
ul.ET-social li.ET-stumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAe7q8GoNGgoptpujLwOU1yGcQ8RYQ4ukqzYkClCojNwopKJq-zja4HDP4Bevys4-51oJdhUkr0YRTA83FBhaDOAsAIkZ0iItp4588Qua7MxMi7MkhsdjyrrZ7nT2CaQ3Y50sY9sHS5pY/s1600/stumbleupon-icon.png);
}
ul.ET-social li.ET-linkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizVki6BF0CFK6iIMdDirtjxexXtvi_w5fkF_PdCujheteoxnVJqBjsEqqpzJMwAntqk_6cTrYSb23_SJ28QgBUWmyy14e6wU-d2jcb7xtDm_yijzW94sCAfQrZPOO4V4ld0pvHeZ80_L8/s1600/linkedin-icon.png);
}
ul.ET-social li.ET-reddit {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh71rt8lRD9CQRassseMg5gPayT8bZRHgAV-PjoTnc-IoYFKUhf7j3mQcf2rNeQM0JSUGfdbdVGFzljy-GBdYit-5G1ShU4Lf4psHs-sSVDW0HgqgQWxiy9-vRvT0aq9F4XoCXbyQE7QLs/s1600/reddit-icon.png);
}
#ET-cssanimation:hover li {
opacity:0.2;
}
#ET-cssanimation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#ET-cssanimation li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#ET-cssanimation li:hover {
opacity:1;
}
#ET-cssanimation li:hover a strong {
opacity:1;
top:-10px;
}
/* Social Sharing Widget by egytricks.com */
- Now Find the below code or similar if can't find exact code
<div class='post-footer-line post-footer-line-1'>
- And add the below Code just Below it
<b:if cond='data:blog.pageType == "index"'>
<span expr:id='"p" + data:post.id'><data:post.body/></span>
<script type='text/javascript'>var x="<data:post.title/>",y="<data:post.url/>";readmore("p<data:post.id/>")</script><b:else/><data:post.body/><center>
<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;'><b>Like the Post? Do share with your Friends.</b></div>
<ul class='ET-social' id='ET-cssanimation'>
<li class='ET-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='ET-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='ET-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='ET-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='ET-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='ET-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='ET-reddit'>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>
</li>
</ul>
</b:if></center>
</b:if>
Now all Done Save the Template .Don't hesitate to comment below if you got any problem or question.Enjoy.
