Add Sexy Social Sharing Buttons To Blogger

 Add Sexy Social Sharing Buttons To Blogger 

Social networking now accounts for 22% of all time spent online in the US.Many persons are using social media to promote there business, one social share can drive flood of traffic to your blogs.Adding social media buttons to blogger is not a big deal but if you will add eye catching social sharing buttons then it increase chance to get more share on your post.In this post I will give you "Sexy Social Sharing Buttons" which is create with help of pure css3.

Adding Sharing Buttons To Blogger

• Go To Blogger Dashboard
• Click Edit HTML > Proceed > Click the Expand Widget Templates Box
•  Search <data:post.body/>
• Just below <data:post.body/>  paste the following code

<b:if cond='data:blog.pageType == &quot;item&quot;'>   <div class="sharelordhtml"> <center><div class="headinglordhtml">Like the Post? Do share with your Friends.</div>     <ul class='social' id='cssanimation'>     <li class='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='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='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='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='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='delicious'>     <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>     </li>     <li class='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='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>     <li class='technorati'>     <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>     </li>     </ul></center></div>   <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/>​ <style> ul.social { list-style:none; display:inline-block; margin:15px auto; }  ul.social li { display:inline; float:left; background-repeat:no-repeat; }  ul.social li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; }  ul.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.social li.facebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdjgA4Qs2unWxg28y7SkAXkcKywevZ0jcnwG6kDznfNLp78QD5vFgXOBYeRWsleOhFU2yXHtG_HDcNGh-Zw4aqx5I7n1gS58UF3zCbNcPSUqkLC00kYCIK7vCt-z79s-J85gKrvyKMuEg/s50/facebook.png); }  ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHXcH_ueSqopkyg6FBZTFCIlMccIuZkO6qqaG18JRzH-vBufVPQ9S51YilKYKWZbuO1C4jdKMLoZhixDerWRdci2oXNpKQa4mQ2T1tg9fNLkyb5QAAgiMbcLZ4mRAYQdGwHya4FwBs4cw/s50/twitter.png); }  ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKV7M5PzooEzzYqsw_v3donPSh9KglzfTz69dr7MBq8F1NVzmv-rBzLOSj1JC7MoRshygmgDTCtP3n1lxzXim-JVbTSdYotP96hoBi7vnCyYu_ybYuMYo9mSKkyZmSyeIv5ksJnMtX7Ck/s50/google%252B.png); }  ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ggYrq8Z9AE4PIHEg3Pu2_vd5y4yznuWJM0Oo4tLXKenFKldvAfwN504goLJKC3w2PfL8-wz1CvwOVSscavXsTchETFObebm5lTZJE6D_U1TeRkrI1rkP0M9gmKqBBOwJvS6o4AG9cok/s50/pinterest.png); }  ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT7qY-R9cTmBfi15ZN-WFye-dF5WuR6zVTfsoQrSPDxqKSsc1qXLrxdgdvKG92DvDCNvV4RoHLNPRn6OirTM_ZffwXyzwaw4M3URiC56rLDV1fjWZKShi6SCeiIQ-92VV9GBxCatUQq8A/s50/stumbleupon.png); }  ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm3bXWSNGmPze3Foebs4pqnm_pnxU7uQOPcSrnSEE8ZTs4SNWhcLqGjStlONBrGoIYDIXioWJpnk7vIFZzHiNaGJftLEZxEnYTckHcEjfInXefDhOawo6CH9VoiBkXHTSQ4oB81q67l-c/s50/delicious.png); }  ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIvadCnvkNjxeY_Xy3NzSrqPEYXeYftIXHLYxOv96-jfZhrlbCmY1kfCCxh42MEMdZ4TZjY3yukH8tD3wRV5TWmX7wakopcu62TZHHLfAAD8nJkxaANsU66xMxVFZTYtpW_k3itHNYjZk/s50/linkedin.png); }  ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSDBCV7TTyyD2E2-8Q0lZ3NAm7PIo7GN6uXxDOTdBTMGtfIvb85MrjieWaJivBmnXJtsYVJJW9bLhM-EzBRajPl58XCMelit0A1lUoqXSlv7DURZc5SIO_CqEHGcY7KkLAOrTBtx_rWxU/s50/reddit.png); }  ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIhjmPStxZDp0cEhri0TjL_ZMjIPBkHvdEKx97G_4mIKAc81Xibra8DkNjR8b8xKCzphGOBCBuAXHpIlt6MyOWx6ZUF2LabBaxid-0t0arVScBEDzoquaZ-CYlfaoysHSLmzzYFL3rqpg7/s1600/TBI-technorati.png); }  #cssanimation:hover li { opacity:0.2; }  #cssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; }  #cssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; }  #cssanimation li:hover { opacity:1; }  #cssanimation li:hover a strong { opacity:1; top:-10px; } .headinglordhtml{     font-size:25px;     font-family: 'Englebert', sans-serif; } .sharelordhtml{   border-top:30px solid #3873CC;      padding:16px;         -webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow:    0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow:         0px 7px 9px rgba(50, 50, 50, 0.75);     transition: background .777s; -webkit-transition: background .777s; -moz-transition:background .777s; -o-transition: background .777s; -ms-transition: background .777s;     background:#D9D6FF; }  .sharelordhtml:hover {         background:white;  }  ​ </style>  </b:if>

Now Click On Save Template Button And Enjoy This Awesome Widget.