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(http://4.bp.blogspot.com/-lZU1EYD1F8I/USLDr4fq_WI/AAAAAAAADZ8/LZwiuSZX54Q/s000/facebook.png); } ul.social li.twitter { background-image:url(http://4.bp.blogspot.com/-6LkWNWPZY34/USLDsObproI/AAAAAAAADaE/4guHCvwJKi4/s000/twitter.png); } ul.social li.googleplus { background-image:url(http://4.bp.blogspot.com/-fZfd39sChNU/USLDstFlL5I/AAAAAAAADaM/Sg5VAo2Ow3Q/s000/google%252525252b.png); } ul li.pinterest { background-image: url(http://2.bp.blogspot.com/-72i4ApQnggw/USLDs4L7COI/AAAAAAAADaU/JMFGHyVr85g/s000/pinterest.png); } ul.social li.stumbleupon { background-image:url(http://4.bp.blogspot.com/-pIU1mr5wP_s/USLDtZiz65I/AAAAAAAADac/5vfi00-HALk/s000/stumbleupon.png); } ul.social li.delicious { background-image:url(http://1.bp.blogspot.com/-GA3bNalDvUY/USLDtoZcCXI/AAAAAAAADak/p0qElAZt3H4/s000/delicious.png); } ul.social li.linkedin { background-image:url(http://4.bp.blogspot.com/-IrAPai30QOk/USLDuC4TZYI/AAAAAAAADas/ed2dUgvjGsc/s000/linkedin.png); } ul.social li.reddit { background-image:url(http://4.bp.blogspot.com/-8cvndGGioNw/USLDuXeExQI/AAAAAAAADa0/vYk92G_FE_Q/s000/reddit.png); } ul.social li.technorati { background-image:url(http://2.bp.blogspot.com/--s8tQg0YLkU/USLDujnZ7AI/AAAAAAAADa8/BifKLMfV4IY/s000/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.
Continue Reading >>
![GTA San Andreas [Highly Compressed] PC Game Full Highly Compressed Free Download](http://3.bp.blogspot.com/-GnOwtd8uL-M/UhYfSow4GtI/AAAAAAAABao/E7ji_dvL_Vo/s1600/GTA_san_and_reas_pc_game_download.jpg "GTA San Andreas [Highly Compressed] PC Game Full Highly Compressed Free Download")
