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

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 == "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.

visit link download