How To Add Social Share Button Widget For Blogger Pro

Full Social Share Button Blogger Pro

Copy this code than put in to your template

<b:if
 cond='data:blog.pageType == &quot;item&quot;'>   <div 
class='sharethatsblogging'> <center><div 
class='headingthatsblogging'>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'/>&#8203; <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/AVvXsEjGp4XiYljlQved1FbbZwagajZtHjBPz7Vz8WdeQzbnb742w6D7L_vEoIBqHBlZqD0PY2hdxnlJm-a5CDhM7pyeXTw6kVx4SzhGQEONCb302Ojx4lyhtdV4X3mzEvvE73kjJqf2_wkBli4/s50/facebook.png);
 }  ul.social li.twitter { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4N1kpZ14ftmZNYaqysETunYqJFojuGYZWIq8j_UfyiPD9gmmyKqShQZFQ5-9SF8XG01agKMancRp5ZSHQps88_SYwjcGxmnLwhpyL6gWSYx0nj9fTIz_ZWxkLJF1H057_Q1MwnIQh9k/s50/twitter.png);
 }  ul.social li.googleplus { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDenNezAn0tZmdJH7MWzyVpDA5-yA460ltgb_sDNFCTt7oM5ajrYj83xV-Nr_h4q3AaGC5isEZUa-ugAWv0q7GDgM5mm-kwr_7A1gZINDyEDET2HHDNrdt16jfnL6hq35C91M9PgEZZSQ/s50/google%252B.png);
 }  ul li.pinterest { background-image: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEFFQnCptf882Jif0ABFJyF1VUn8z4SetRIU_5LwEfWkOtqXvdwMnutUHYFGXTuZ7J0LnPCxXHSZHFqZpW8LQ0K-P11a0PSr1nSYkiCQEFgSwVnpoW9kG47cieWV71M6uVMiLzlT8WYBw/s50/pinterest.png);
 }  ul.social li.stumbleupon { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXXOEfi7SYaxp3xSLHM_HAj1MXC768UdMkeaL38CpDVlZeoexdGS1WAUeawPLt5c4E7ROetva7y97eb7lvewJbKR3r2ubhX5M2tOEvRFvSFTx_lNOaZJgOoamfMUsk2d_ThJEb1z4V_xo/s50/stumbleupon.png);
 }  ul.social li.delicious { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX5PQvZKEuWKk_IbkEN4Q_0PYm89LTZw7HtM6S4W4vDy9e1WMupjVnoY2ylDLp77NnkI6zB7un_aVKMqc8RtqihnCiFC9Sy6z7NQKEs_n4YR0tlKhCBrwFTyZ02fUd9rZzDjJWnihtHOI/s50/delicious.png);
 }  ul.social li.linkedin { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKZV7lKaC9gG40ACq2XsmWEe4GaoPeFZ7tj7idFV1YlNFNHzE6vrBVZB-FCbSVA4vYTRVbeNjQxcWtDjZD8tqt-OTiTsHNiKGU2mvGeXfbeu33y0fHIgzZGlJ1JEDYKEREMz2ndGIhUUs/s50/linkedin.png);
 }  ul.social li.reddit { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWfYzOZDmHJoV82eR8jV5Vw-nDAVFGfJk_VRjPiUJvdZTtKvQvxRcyHclEMQjhT4-a51GoF2ng9qBOAsCqzHWIzIn5TL1cB1XGpDoZRmcj9NV55dq46C6OyPW7v17Eq2XlnxTT9U2WBLM/s50/reddit.png);
 }  ul.social li.technorati { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Ew8DZA0kmL3u9dcJIbmYvwqUh5olm2UfDavrzAqnt0TOJHguXb-b7JrSEnzgjLPQ7N7gLnfelaWmHXPQC2OnKc4ORL6lPK07lU4fT6GdeSrQHSielCAK67gJnFpcH0r_abbmxUtABWiV/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: 
&#39;Englebert&#39;, 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;  }  &#8203; 
</style>  </b:if>