How To Add Social Sharing Buttons Above Post Footer

0
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{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 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'>
<ul>
<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>
</ul></div>
</b:if>
Step 8. Now Save your Template..Done !!
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.
Hello Guys,We are again back with another Responsive social media widget for blogger template .L...
SUMMARY

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.

You Might Also Like:

We hope this article helped you to learn How To Add Social Sharing Buttons Above Post Footer . If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add Social Sharing Buttons Above Post Footer " So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand