Add Beautiful sliding Share Buttons Widget under Each Post Manually in Your Blog Only by OS trickz
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 == "item"> <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="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=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=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=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=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=delicious> <a expr_href="http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title rel=nofollow target=_blank><strong>Delicious</strong></a> </li> <li class=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=reddit> <a expr_href="http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title rel=nofollow><strong>Reddit</strong></a> </li> <li class=technorati> <a expr_href="http://technorati.com/faves?add=" + 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/AVvXsEi5taIuB5XsSGLV181Q5YmL4otzKXxUYQCNYkyWS6K2qvzRaqZWBHsXRmj4rQH1FMgTN71qgEEkdZq9mJR5P32Hnx04yULL8RQ8OrrUEfi9qgdCiaPcvZ3G8g0QEv2DxsLP1RKwNtPPic-a/s0/facebook.png); } ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLvDkJ8nSD5NpzeVvN9EpbY0sUUtYC_QYROWnK-CI3HuZxfIn-tuEBgRuzkoca7aZu-3tDaaRUt24lOeSipkGgLT8_-5RXUbyKETY_0E4I77ncIO8mYKuatbcIQkY4OPTAzn8g9N75pAg9/s0/twitter.png); } ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAKiwjocdt5Qa81VEUkfGANWa7-UN46-ysC6iVckoItXXmXZAoGHcwd6Jl_NmaNIEoy7qgCAkidkMAfRXrM4x0OXlCYbjAY-wQ_f_UmDGowde2eMCN4XdXvBWIovqD_1KScdEJC7thvQxK/s0/google%252525252b.png); } ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaEO0TzlbeYqaOniJh4h7vOxDF_N7MarBde02QUn8jjMhTCDVM96V6kcJ9M82FgozKeyt34kof-EnB-ejVfHQp0KKZ74B85VFW8104vOHwukmXD4D-yDkU8jXiMfxhCVxmkIdRXKTzPDYo/s0/pinterest.png); } ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWENNQwAd5PLxQXzoKOXX23E8Cr4k1BOFKgNUoCoNdxte3WCXPWnKJIvXz9BozzdrE96-17C1DC0r4-0am0muAlAHEEqdN8jmcZWlJHp_4jZA9FmjGr8Ytqa-5QIpFBNfwxL8Z-bn08prj/s0/stumbleupon.png); } ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1alE8YNQPKZE6jxc0cW3Co3YXlHSMUl4idMBKcLBXg_DkBbgBzpBpgX8tmT9zIZBk13P70AtQIG7H4dCA2vw2illUXgkySDr3ov-pOCvNRtAwxfB1NQbDgk58UAkLnZkTWo4oL84rzAqe/s0/delicious.png); } ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9O9hGLuhE9ZAgbmKTbCr72TFnGCtzgE4xyAYQyntg0aRH3H7tg_nmeRBY5sOxgs0FGbt-sV2LJSfkYl-vAAZ4CexSpRnJEHH9mct-Cb_uvnbkFWPBUYEaIcyX1hPDVZl4GNWgrEMQR4N7/s0/linkedin.png); } ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv2aLv6yc6wxm-_4TEhaMhi4ucqBkZNbwtpDrEl-JGM7_qsMrex_vSLcbZnJA5nL8YgGpaGOYRF_vcrFGyRuNP4L5bT7XIat5H8PZ_tscwYlu597wSkXjh990Nv7TjY4yVxIEL4bSBeezo/s0/reddit.png); } ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVQvleJuQTPyrtYoBMM3UieXkWWUEkQBbIkrMxgf29cvrYwtzIeyy38agxo9W6fDbyuv4Q_Vou8MFVRfI8vwKnlKLqgMaQ2PpPXCGYt-Aj23xE5CP5GSIyKmCuZIMMmfc-5CJvjZ6oOrFw/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: '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>
4.Now, Save Your Template and enjoy.
