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.
Step 6.Copy the below Font Awesome Icons stylesheet and paste it just below the <head> tag.
Step 7. Now Search for <div class='post-footer-line-1'> or <data:post.body/> and paste the below html code just above it.
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 */Step 5. Now Search for <head> by Pressing Ctrl+F keys.
.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 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 == "item"'>Step 8. Now Save your Template..Done !!
<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>