New Egg Style Unique Social Sharing Button for Blogger

In this Post i am going to share a Egg Look and Style Social Sharing Button for Blogger.this social button it has unique egg look developed by Egytricks.com. we have already posted about many Social Sharing Button for Blogger in past.try our more Social Sharing Button for Blogger here .

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 == &quot;index&quot;'>

 <span expr:id='&quot;p&quot; + data:post.id'><data:post.body/></span>

 <script type='text/javascript'>var x=&quot;<data:post.title/>&quot;,y=&quot;<data:post.url/>&quot;;readmore(&quot;p<data:post.id/>&quot;)</script><b:else/><data:post.body/><center>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>

    </li>

    <li class='ET-twitter'>

    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>

    </li>

    <li class='ET-googleplus'>

<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>

    </li>

    <li class='ET-pinterest'>

<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>

    </li>

    <li class='ET-stumbleupon'>

    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>

    </li>

    <li class='ET-linkedin'>

    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>

    </li>

    <li class='ET-reddit'>

    <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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.