Social sharing buttons helps to get good amount of backlinks to your site. Here is a very responsive Social is sharing button.It works well on any platform. It can be used anywhere on your site, especially under every post, so that others can share your article.
How to add this Social Sharing Widget Under every post In Blogger.
Step 1: Login to your blogger dashboard.
Step 2: Go to Template and clcik 'Edit HTML'.
Step 3: Now search for <data:post.body/> using Ctrl + F.There will be more than one <data:post.body/> for some blogger template.So don't get confused.Just try placing this code under each one of the <data:post.body/> tag.
Step 4: Below <data:post.body/> paste the below code.
Step 5: Save your template.<div class='techdio'><center><ul class='social' id='cssanimation'> <center>Share this with your friends</center><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><li class='techdio'> <a expr:href='"http://techdio.com/faves?add="+data:post.url?http://www.techdio.com ' rel='nofollow' target='_blank'><strong>TechDiO</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://3.bp.blogspot.com/-Cmya0AHCVgM/U9s0uavKRaI/AAAAAAAACJw/cPjmeRtEzx4/s1600/facebook-icon.png); }ul.social li.twitter {background-image:url(http://2.bp.blogspot.com/-Z-R5D3-QLH8/U9s0vx2LnII/AAAAAAAACJ0/0Qd79zilPkU/s1600/twitter-icon.png); }ul.social li.googleplus {background-image:url(http://1.bp.blogspot.com/-iSa8vRGWP_c/U9s0nA5rBII/AAAAAAAACJU/G1LVga_4I8M/s1600/googleplus-icon.png); }ul li.pinterest {background-image: url(http://3.bp.blogspot.com/-YXpbz1C9jKI/U9s0pdokV0I/AAAAAAAACJc/J0CQ_RguXFU/s1600/pinterest-icon.png); }ul.social li.stumbleupon {background-image:url(http://3.bp.blogspot.com/-cOfbpePr-w8/U9s0rynSRgI/AAAAAAAACJk/wQWz_LvKc5o/s1600/stumbleupon-icon.png); }ul.social li.delicious {background-image:url(http://1.bp.blogspot.com/-JcjDrqlWGP8/U9s3WkmCqDI/AAAAAAAACKY/75IeCmvrz18/s1600/delicious-icon.png); }ul.social li.linkedin {background-image:url(http://1.bp.blogspot.com/-NMnApprfB7w/U9s0oh4m54I/AAAAAAAACJY/Nou9mVVwQF4/s1600/linkedin-icon.png); }ul.social li.reddit {background-image:url(http://2.bp.blogspot.com/-63_1Tht330s/U9s0zJiJM_I/AAAAAAAACJ4/SEcT1kPwLo8/s1600/reddit-icon.png); }ul.social li.technorati {background-image:url(http://3.bp.blogspot.com/-kzog0u1TLD8/U9s0tjSAeqI/AAAAAAAACJs/xFqlPmz22XU/s1600/technorati-icon.png); }ul.social li.techdio {background-image:url(http://3.bp.blogspot.com/-fpRvzQM4p5E/U9s1DSJuKpI/AAAAAAAACKE/DS6PvM22OZ0/s1600/techdio-icon.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>
Comments
Post a comment