Add Beautiful sliding Share Buttons Widget under Each Post Manually in Your Blog Only by OS-trickz

Sharing buttons are important part of any blog. They help greatly in spreading A Blog content and also to increase the blog visitors. The default buttons provided by blogger not fulfill the requirements As, it provides only Small set of Social media buttons. Now, i, m sharing a good set of beautiful sliding social media buttons which help in Sharing a post.

Procedure for adding Sharing buttons:

1.Go to Blogger Dashboard Home>Template>Edit Template.
2.Click any where in Template section and press Ctrl+F to find the following code:

<b:if cond='data:post.hasJumpLink'>

3.After Find this code add the following code just above it.

<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'/>&#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/AVvXsEiHeXn49Bg42Wy_m6ofoBxqkozJDbBEchPfW2sLJ4wOXZSfMp9JypByxReUglx_RZClluZjZhHK0qr0ve7p8bBAPLv91fW1L0j0iBDuPokLaaxITU0rcTSdN8gp8AAblcUk9-a4DbToSvHL/s0/facebook.png); }  ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDAsFJHctEY40HERo9fhd3RLIW7v4XyyyxcOOoCkx6vOX4XPQqmCi8wNR4YfoYsiB0z4g_LtwULNGWSQ7BYl7Tck6YonJrTGrKUpWFRJ8ti9HSqH23bMDX4nxNbbukRCGp9tNs5zdJgcQo/s0/twitter.png); }  ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPGDGLV8SOl1nAwWqKdQNetswLvls2Pv8mGfimDdZgMuswZh6cV1SLotRbNDYUr5MAlc1uqsCP3xUWm7qPhvsfhQ3BGl_ya6d-5jXMxBhWnswxW2JtWqvN_meSy73elc3Q-bzJzT8rG4JV/s0/google%252525252b.png); }  ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisaCXY-rDCtxS3OkXHLG0vbmecONZxBvAMtJkHBKjYjcfQp4rafTTpVziOfmAAHM2m8ZyCTCcP6_oTk8XSDs5EKOALPWTGHs8qDoEo9qxetI44jjsJiS1q7n86c3i_lBAqnR_NdFwzBZzS/s0/pinterest.png); }  ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIHiuAd8BqCWJWg4qtVj_DMOCPlImAZ6ZwkgDA3qHVIo6tFCc1zBJtuQTaTYxdtKPIVNf9Q6-0pscstVyj59ivNnMGGnCQi7dmazQkyhlv60nntn9_Y9hre7Dzr3_lEyjRbaVkr7h14Sqn/s0/stumbleupon.png); }  ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRfi9E3W_Wa6oJjx6xYWKCLk5Fbxdwd-5qYMD3Ldp1Pm72B93FFzoh_mv_tlxilsEeUFc9Oa_Gla7kXh46DwZ3kwGEbl22_2X7T89-qqSL_eeCOhDN_DZNUOZZZozMyu3bTwMViU2xlgmr/s0/delicious.png); }  ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRGb4HyQCywpA0xuLEndB7GZxPJmAxUNqmz-zyPGOQNPCqk5Mi-W9qU6UwmP5G1cSrRS8rHhFo0O4pMU39eFxW9jkvAF9u3QMuosMJY6_wLrm__VtrIFny_6ik0D4H5Dp55C7sgrqGSWM-/s0/linkedin.png); }  ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVVYPsAGkStiNhltZ8KceTYgYWbJ0chDv_49E1V-nTK8YuhO5ynwwp2w2ommsFR5TEz-o91CIo65-fHFXU4UnG90BPx7xrHYWbB_SrDpwEQSwnxW-ZQm6QvIZggyyVY9MOFPw7jueWeJTy/s0/reddit.png); }  ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8dpkEkUFeu1pTOGnCIvgIN6sWsUlBF7TBCaRpLuEFZ4sarhSSc-ABQRlQj6xVj7jrUtSHSk92vSWGb048npsUkX65nt7W5jhPaW_pwszMoNe0AJskkAZLCmetqCf_rUY_XmGA9FzwWoAu/s0/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>

4.Now, Save Your Template and enjoy.