Welcome to the Tutbig today I will show you How to Add Social Sharing Buttons above Post Footer in Blogger Social Media Share is very important for each and every websites around the world. With the help of social share buttons we are able to share content on social media profiles and because of sharing your content will spread all over the social media sites. And with the help of social media sites, you can grow or you can say double your website traffic.
How to Install Social Sharing Buttons above Post Footer in Blogger
Installation Steps:-
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard
Step 2. Now Click on-> Template-> Edit HTML
Step 3. Now Search for ]]></b:skin> or </style> by pressing Ctrl+F keys
Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
/* Share Buttons By Www.Bloggersstand.com */.bsdsharepost li{width:19%;padding:0;list-style:none;}.bsdsharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}.bsdsharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}.bsdsharepost li a:hover{opacity:1;color:#444;border:double #fff;}.bsdsharepost li .twitter{background-color:#55acee;}.bsdsharepost li .facebook{background-color:#3b5998;}.bsdsharepost li .gplus{background-color:#dd4b39;}.bsdsharepost li .pinterest{background-color:#cc2127;}.bsdsharepost li .linkedin{background-color:#0976b4;}.bsdsharepost li .twitter:hover,.bsdsharepost li .facebook:hover,.bsdsharepost li .gplus:hover,.bsdsharepost li .pinterest:hover,.bsdsharepost li .linkedin:hover{background-color:#444;color:#fff;}.bsdsharepost li{float:left;margin-right:1.2%}.bsdsharepost li:last-child{margin-right:0}.bsdsharepost li .fa:before{margin-right:5px}
Step 5. Now Search for <head>by Pressing Ctrl+F keys.
Step 6. Copy the below Font Awsome Icons stylesheet and past it just below the <head>tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Note:- your template already have font awesome stylesheet then you can skip step 5 and 6
Step: Now Search for <div class="post-footer-line-1'> or <data:post.body/> and past the below html code just above it.
<b:if cond='data:blog.pageType == "item"'><meta expr:content='data:post.id' itemprop='postId'/><div class='clear'/><div class='bsdsharepost'><ul><li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li><li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li><li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li><li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' target='_blank' title='LinkedIn Share'><i class='fa fa-linkedin'/>Share</a></li><li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank' title='Pin It'><i class='fa fa-pinterest'/>Share</a></li></ul></div></b:if>
Step 8. Now Save your Template...Don !!
I hope you enjoy this post and the photos. How to Add Social Sharing Buttons above Post Footer in Blogger.
