Friday 28 June 2013

How to add stylish social sharing buttons below every post in blogger

Sharing buttons

 السلام عليكم و رحمة الله و بركاته
Today's topic is that how to add stylish social sharing buttons below every post in blogger. Social sharing buttons is the basic part of a blogger. This social sharing buttons help you increase your blogger publicity and when your blog visitors likes your content so they have to share your article with their friends so they look for social sharing buttons to share your article and below every post add social sharing buttons is the best thinking so that's the reason I share an article about how to add stylish social sharing buttons below every post in blogger. Click demo button to see the demo of stylish social sharing buttons below every post.



  •   Related Articles:-
  1. Add CSS hover effect social media buttons to Blogger
  2. Add social media buttons with hover effect to Blogger

Add stylish social sharing buttons below every post in blogger

  • Go to blogger.com.
  • Sign in to your account.
  • Then go to template >> edit HTML >> now find the following below code.
]]></b:skin>
  • and paste the below code just above ]]></b:skin>.
 .Ma5 img{ width: 45px; height:45px; float: left; border: 5px solid #ccc; margin: 2px; -webkit-transition: margin 0.5s ease-out;

-moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out; }
.Ma5 img:hover { margin-top: -8px; zoom: 50px; opacity: 0.5; -webkit-transition: transition: opacity .15s ease-in-out}
  • Now find this code <data:post.body/>.
  • And paste the below code just above the above tag.
 <b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.url == data:blog.homepageUrl'><div class='Matext2'><span style='color: red;'><u><i><span style='font-size: 30px; text-decoration: blink; opacity:10.5; border-radius:10px;border:10px solid #EE872A;'><b>Share This with your friends and others</b></span></i></u></span></div>
<br/>
<div class='Ma5'>
<a expr:href='&quot;http://www.Facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><img src='https://lh6.googleusercontent.com/-qXQfMpK5yyM/UBgnVp-zyWI/AAAAAAAAFb0/GRnVp4eqO1g/s50/facebook.png' title='facebook'/></a>
<a expr:href='&quot;http://www.twitter.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><img src='https://lh3.googleusercontent.com/-XoczCzeugFg/UBgnW9gfOMI/AAAAAAAAFcg/N9qWk37w_SA/s50/twitter.png' title='twitter'/></a>
<a expr:href='&quot;http://www.plus.google.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><img src='https://lh3.googleusercontent.com/-XZA2IVaxutU/UBgnV81TTMI/AAAAAAAAFb8/5-SxVYGD3WU/s50/google%252B.png' title='google'/></a>
<a expr:href='&quot;http://www.pinterest.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url +   &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;);   return false;' rel='nofollow'><img src='https://lh6.googleusercontent.com/-Hfy8WKpzfKc/UBgnWW00Z8I/AAAAAAAAFcM/5ppIBhBfhUo/s50/pinterest.png' title='pinterest'/></a>
<a expr:href='&quot;http://www.stumbleupon.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url +   &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;);   return false;' rel='nofollow'><img src='https://lh5.googleusercontent.com/-D89Zc49MpsM/UBgnWuUueaI/AAAAAAAAFcY/EhOMIXDHPTY/s50/stumbleupon.png' title='stumbleupon'/></a>
<a expr:href='&quot;http://www.Delicious.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url +   &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;);   return false;' rel='nofollow'><img src='https://lh5.googleusercontent.com/-8YgPtME6n9U/UBgnVlFappI/AAAAAAAAFb4/TJRielU0dVU/s50/delicious.png' title='delicious'/></a>
<a expr:href='&quot;http://www.Linkedin.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url +   &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;);   return false;' rel='nofollow'><img src='https://lh6.googleusercontent.com/-4yZnL9kjU9w/UBgnWDrtReI/AAAAAAAAFcE/WbW8M0G1QTE/s50/linkedin.png' title='linkedin'/></a>
<a expr:href='&quot;http://www.reddit.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url +   &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;);   return false;' rel='nofollow'><img src='https://lh5.googleusercontent.com/-BVN-XnkL53g/UBgnWdIXDBI/AAAAAAAAFcQ/v4GRUCSsPLA/s50/reddit.png' title='reddit'/></a>
<a expr:href='&quot;http://www.technorati.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url +   &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;);   return false;' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtCNu1RCj12pzhuYAikGMyw-O3uzStVV63Fh9F4gfR69pscuIfYUB27hy86GDFkr5jxd2nAA2apI41S7pLqYpK4HxM0w33dS9t-vk2ZCQ-8EHnC0Fa3krbHXSlhUODsT0or_fRLsJ6LhAG/s1600/TBI-technorati.png' title='technorati'/></a>

</div></b:if>

  • Click to save template and stylish social sharing buttons below every post in your blogger has been added.

Is having any trouble in adding stylish social sharing buttons below every post in blogger so please tell your problem in a comment box I will soon solve your problem. Thank you.

Do you Like this Article?

rss twitter facebook
Subscribe us and get daily updates directly to your email inbox.
We will not share you email with anyone so you don't have to worry.

2 comments:

  1. Nice post...! It is very useful for my blog...!

    Computer Tricks

    ReplyDelete
  2. Let me try.. My template isn't saving anything new.. I just don't know why....

    ReplyDelete

Subscribe this blog and get daily this blog articles to your email.

Subscribe us