20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Add Social Sharing Buttons Above Post Footer

Tutorial on adding install embed 2016 best social media share button with font awesome icon effect and hover effect for blogger posts below post title and above post footer.
How To Add Social Sharing Buttons Above Post Footer
Hello Guys,We are again back with another Responsive social media widget for blogger template.Later on we will share another social share for blogger template.In previous post we have talked about the Flat Social Media Slide Out Share Buttons In Blogger Footer. 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.
However blogger platform provide default buttons for sharing but that is too old and i'm sure now days there are lot of responsive templates in the market and those default buttons never suits your website niche and no custom template have those buttons,those are available with the blogger default templates.In this social media share buttons we have given hover effect and its have five social media sharing sites Facebook,Twitter,Google plus,LinkedIn,Pinterest. So to grab this gadget follow the steps mentioned below.

How To Install Social Media Share Buttons in the End of Post Blogger template

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 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 Awesome Icons stylesheet and paste it just below the <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Note:If your template already have font awesome stylesheet then you can skip step 5 and 6.

Step 7. Now Search for <div class='post-footer-line-1'> or <data:post.body/> and paste the below html code just above it.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:post.id' itemprop='postId'/>
<div class='clear'/><div class='bsdsharepost'>
<li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + 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='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank' title='LinkedIn Share'><i class='fa fa-linkedin'/>Share</a></li>
<li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank' title='Pin It'><i class='fa fa-pinterest'/>Share</a></li>
Step 8. Now Save your Template..Done !!

Post a Comment