Add Beautiful Post sharing widget End of Blog Post

Add social sharing widget end of blog post

18
data:blog.title
social sharing

Social sharing widget is very important for blogger and readers. Blogger should add this widget for spread their content in various social media services. And it will help to reach towards more readers. On the other hand interested readers wants to share or bookmark their favorite article in their social site. Before that I have share some social media widget but this is little bit different with pure CSS coding. So let's proceed to the tutorial that will help you to add this beautiful social sharing widget .


Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin>  by pressing Ctrl+F 

Step 4 Paste the below code  Before/above ]]></b:skin> 

/*** Share Post by www.bloggerspice.com ***/
.bisoy-vag {
font-size: 13px;
margin-top: 15px;
}
.bisoy-vag li {
float: left;
}
.bisoy-vag a {
display: block;
margin-right: 10px;
text-indent: -9999px;
margin-left: 12px;
background: url(http://4.bp.blogspot.com/-M_utSb-nN04/U6V8Gut9dJI/AAAAAAAAAjE/6g1X58pjjcg/s1600/single-share.png) no-repeat;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
.bisoy-vag a:hover {
opacity: .7;
}
.bisoy-vag
.facebook a {
width: 7px;
}
.bisoy-vag
.twitter a {
width: 18px;
background-position: -47px 0;
}
.bisoy-vag
.google a {
width: 14px;
background-position: -105px 0;
}
.bisoy-vag
.pinterest a {
width: 11px;
background-position: -159px 1px;
}
#bisoy-vag {
width: 100%;
overflow: hidden;
margin-top: 20px;
}
#bisoy-vag a {
display: block;
height: 32px;
line-height: 32px;
color: #fff;
float: left;
padding-right: 10px;
margin-right: 10px;
margin-bottom: 25px;
}
#bisoy-vag
.facebook {
background-color: #436FC9;
}
#bisoy-vag
.twitter {
background-color: #40BEF4;
}
#bisoy-vag
.google {
background-color: #EC5F4A;
}
#bisoy-vag
span {
display: block;
width: 32px;
height: 32px;
float: left;
margin-right: 10px;
background: url(http://1.bp.blogspot.com/-WfmAbSbkIIs/VI6zbRkdRRI/AAAAAAAAIq8/b1xbiu4Wbpk/s1600/BloggerSpice%2Bbisoy-vag.png) no-repeat;
}
#bisoy-vag
.facebook span {
background-color: #3967C6;
}
#bisoy-vag
.twitter span {
background-color: #26B5F2;
background-position: -72px 0;
}
#bisoy-vag
.google span {
background-color: #E94D36;
background-position: -144px 0;
}

Step 5 Now again Find this code <data:post.body/> or <div class='post-footer'>  by pressing Ctrl+F   

Step 6 Paste the below code  below/after  <data:post.body/> or <div class='post-footer'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bisoy-vag'>
<a class='facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span/>
Share on Facebook
</a>
<a class='twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span/>
Share on Twitter
</a>
<a class='google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' title='Share this on Google+'>
<span/>
Share on Google Plus
</a>
</div>
<div style='clear: both;'/>
</b:if>

Step 7 Now hit the Save template button.


3 style


Check your blog to see this social sharing button. If you face any trouble then feel free to leave a comment below I will reply you as soon as possible. Thank you.
Add Beautiful Post sharing widget End of Blog Post
4 Stars stars - "Add Beautiful Post sharing widget End of Blog Post" Social sharing widget is very important for blogger and readers. Blogger should add this widge...

Post a Comment

This comment has been removed by a blog administrator.

Nice bro can i use it on Shwapno Responsive Template V1.0 template ...

Yes bro.. Just follow the tutorial to add this widget. Thanks

This will work 100%... I have tested this in several template including Blogger default template. I think you got the problem about Step 5. that code will reapeatidely come 3/4 times in any Blogger template. so add the code 2nd or 3rd code. It will work now

Is their any option to add pinterest button

Actually Image used in this widget are not separate. Which is also known as sprite image. In icon file there was 3 icons only not include any Pinterest icon. But In my template I have used my social networking icon from top right header.

what if I want to add a share button stumbleupon

thanks

Hi there..The problem is about icon. I just got the 3 integrated icons for this widget. This means 3 icons in 1 image file. So I have created with 3 sharing option. But you can use Font awesome based sharing widget where you can easily add stumbleupon.

http://www.bloggerspice.com/2014/12/how-to-add-social-sharing-widget-by-using-Font-Awesome-4.2.0.html

However I will work on it if I get stumbleupon icon.

SEO is one of way to promote your website through online.With help of SEO you will be top in Google.
SEO Service Providers in Coimbatore | Coimbatore SEO Companies

ভাই আমি অনেক চেষ্ট করছি কিন্তু কাজ হয় নাই

< data:post.body / > aai code ta template a 3/4 bar thake tai Step 6 a jei code ta ace shob golor sathe ekbar kore add kore test koren.

< div class='post-footer '> aai code tao 2/3 bar thake jodi uporer tay kaj na hoy tahole aai code er sathe try koren Insallah kaj hobe.

Thanks
Work Done

not work with my blog. can u help me pls? http://treyrors.blogspot.com/2016/05/some-dangerous-mistakes-for-real-estate.html

Hi There..I just checked your Blog. the widget is working perfectly. :up

Great post. This is very useful post. Thanks for sharing.


eCommerce website development in Chennai

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *