Social medias and websites are one of the main means of increasing your websites traffic. This is one of the most effective way to increase your website or blogs traffic. Visitor come to your blog, reads your post, and if he/ she likes the post, they share the post in facebook and thus their friends come to know about your blog post. Beautiful and easy social sharing button below the blog posts may help best for these purposes. Today this article will show you how to add cool social sharing buttons in blogger which is very necessary to increase blog traffic. Our beautiful, cool and rich social sharing widget will contain facebook, twitter, Google+, LinkedIn, Pinterest and many other popular social sharing buttons. However, I can ensure you that these widget is completely free from affecting the blog loading speed.How to add cool social sharing buttons in blogger:
Follow these steps:
- First of all, you need to log in with your blogger account. Go to your Blogger Dashboard.
- Go to Template>> Then click on "Edit HTML".
- Now, the HTML editor window will appear. Press Ctrl+ F and a find box will appear within the code window.
- Now search for <data:post.body/> . Simply write this code in the find box and hit enter. It will highlight the code within the HTML editor.
- Then copy and paste the following code above the <data:post.body/> (If you want to show the widget before the post body) or paste it below the <data:post.body/> (If you want to show that below your post body). Ill recommend you to show the widget after or below the post body because a visitor likes your post after he/ she has gone through the post and after he/ she had reached to the end of your post. So here is the code you need to paste:
<b:if cond=data:blog.pageType == "item"> <div class="sharethatsblogging"> <center><div class="headingthatsblogging">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/AVvXsEhr3gTzKTEBO-u8R1y-TjeROc6TUnY4ssZu2x9lCfkniePlzlznNTGMK9iMmmTdbfhVdbWRaCxnhmv-pjR-nVrrt-goHxq5VMexFZoIIoilL80vN_esGJopIK2tdx9K7JQ_4YcxMotixNM/s50/facebook.png); } ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF12H7Pvlab1uxXMHu-2McI_MGNjNp3GsyxsgPDmu2pY96cvujp2kHfIWgoyGEZ9OKMiqBOBNL92SjUqhrjm2wL3v1vjIaf-SIjzReZsS3Q7sTDO0qnijBOfQfDJJjAV7fTDP2cB4ieGA/s50/twitter.png); } ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr5XOACYlEs5F4it5LivSTVYV62JH32qeBu9NhLd44qb0KJ1fg4bDlMRP4uR7TablgBRds2EM13lMAF33vi_c2QXvw3mmwaJMObtjwQuLWdQuMZut2Hb2X5iw2yG5FOse_uADGkNcudgI/s50/google%252B.png); } ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHDeF80U1woZwcub1_mqUZSCE5tESJn6j1jUpwRTGkMUip58yEck0icmcolo5DPlqzAKonqfzsXd2_AIXvcLZML697IAoT9Eq73vmsvmvFtFgoRJaYoZOx5iBUnJPhEvRdF0AKw4hv0Zk/s50/pinterest.png); } ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnb6Gc6INNhOeSmLm6a-KyS1KMO-nbNFvdF33UNmNQd7k5zkZO_XQkA_nBoOLT21vB333g5A73ud7qiqgEsk_6iOPINZ_CDuFSYT5FJTwUFRhzuDFCjyV3TQXi3Gk4lEKoWStIamm0bjY/s50/stumbleupon.png); } ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-z-5NeqcuYb94AEqgqpXmJ_6AdoKH7Y66G5ZPYwERwiSOwopwNKSh2DePz0y2CdELcp7570qCsI0iaoB9_9EaoC_ptWTYXXHc06EmAgBfV9LeOC-lX92lHSXRvN3wUwdPIt3Fqrwsfg/s50/delicious.png); } ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdjZ-DftKterTKj7kBriSVcxX37MpTVWzgkA4_MJQCCbRzFe0Zu-44iUcwDUIkLKfycdMneUrq4qg-TkDIjoCEfX7QciqFZSG0N5BzloOUGPEuZayDgWslYqKWWzkrjr8FvEj7YiOAnI0/s50/linkedin.png); } ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMN0vUohmOx4fzWlCgCJm5m0F19PxH86x1WLyWNma8gHlUNDelwAxo8JAk2cL4BZM0wzHCj4lbSAT3OOpIyxA8Szm2VUvIE7gMkpwx8OIn0Eimx3s5J8Pocsn7sAyszQ15KapveZPXoqs/s50/reddit.png); } ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCVPabRqDyWBe7b1XDsiWDumBx98_2are0-bjoCcNb62bEshIdR-6kFESxaBcFF2Ibu8Oqt94xAGlxLKw_6Fe8cOba0Py0GkKWsDlmCWBKDv7AY8mKwOHeyowjJvNCOrCzQ_MyEjlDzNS-/s1600/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>
Note: In some templates like Magazine Templates you will find the <data:post.body/> code twice or thrice. So make a search for more than one <data:post.body/> and paste the code below or above of the first two <data:post.body/> .
6. Now, hit save and see your blog. Youll see a very beautiful and rich social sharing widget in your post body or below your every post pages.
Actually this widget is one of the main source of many blogger to get a huge traffic, however this widget is very easy to navigate, so it will help your visitors to share your blog contents with their friends. Like this article?? Then like this post using the social buttons below, Happy Blogging.
