Home » Blogger Tutorials, Tricks and Hacks » Blogger Programming Tricks / Hacks » How to Add Simple Social Sharing Beneath Your Posts

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How to Add Simple Social Sharing Beneath Your Posts

How to Add Simple Social Sharing Beneath Your Posts

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


We’ve featured quite a number of social sharing buttons and here’s one that you may like as well. Mohammad Ishtiaq has created his own version and we’ll be covering his tutorial here. As you probably know by now, social media buttons help boost your blog’s traffic as your readers can share it with their social media sites. Social Networking sites such as Facebook, Twitter, Google+, Pinterest all have JavaScript so you can easily add them in your site.

Here are the steps on how to add this simple social sharing buttons beneath your blog posts.

Go to Blogger Dashboard > Select Blog > Template page of the Blog

Select Edit HTML

Add the code below before ]]></b:skin>

div#social-sharing   { 
height: 90; 
background: radial-gradient(center center, circle cover, #ffffff, #f9f9f9); 
background: -o-radial-gradient(center center, circle cover, #ffffff, #f9f9f9); 
background: -ms-radial-gradient(center center, circle cover, #ffffff, #f9f9f9); 
background: -moz-radial-gradient(center center, circle cover, #ffffff, #f9f9f9); 
background: -webkit-radial-gradient(center center, circle cover, #ffffff, #f9f9f9); 
margin:0 auto; 
border: 1px solid #999; 
-webkit-border-radius:5px 5px 5px 5px; 
-moz-border-radius:5px 5px 5px 5px; 
-webkit-transition: all 0.6s ease-out; 
-moz-transition: all 0.6s ease-out; 
-o-transition: all 0.6s ease-out; 
-ms-transition: all 0.6s ease-out; 
transition: all 0.6s ease-out;
div#social-sharing:hover { 
-webkit-box-shadow: 1px 1px 3px #CCC inset; 
-moz-box-shadow: 1px 1px 3px #CCC inset; 
box-shadow: 1px 1px 3px #CCC inset; 
#social-sharing img { 
width: 35px; 
padding: 5px; 
border: 0; 
box-shadow: 0; 
display: inline; 
filter:alpha(opacity=1); /* For IE8 and earlier */ 
#social-sharing img:hover { 
-webkit-transition: all 0.6s ease-out; 
-moz-transition: all 0.6s ease-out; 
-o-transition: all 0.6s ease-out; 
-ms-transition: all 0.6s ease-out; 
transition: all 0.6s ease-out; 
filter:alpha(opacity=60); /* For IE8 and earlier */ 
.social-sharing-title { 
text-align: center; 
padding: 3px 10px 2px 0px; 
margin: 0 0px 0 0; 
color: #8d0303; 
text-transform: uppercase; 
line-height: 25px; 
vertical-align: middle; 
font-size: 14px; 

Note: You can change the Statement Text Color Highlighted in Red and the one highlighted in yellow which is the Background width with your own preference.

Search for this tag <data:post.body/> and add the following code below/after it.

<b:if cond='data:blog.pageType == &quot;item&quot;'><
<div id='social-sharing'> 
<div class='social-sharing-title'>Do You Like This ? Please Take Five Second To Share It!</div>
<!-- Facebook --> 
<a class='face-book' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><img alt='Facebook' src='http://3.bp.blogspot.com/-tdQqSrGyK0A/UixIE6-nIHI/AAAAAAAADZw/L1_oZ77XZZI/s1600/Facebook.gif'/></a>
<!-- Twitter --> 
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter' src='http://4.bp.blogspot.com/-qvZuf9kWuVw/UixIHKAZdSI/AAAAAAAADao/7AOSXVkuwdc/s1600/twitter_bird.gif'/></a>
<!-- Pinterest --> 
<a class='pint-er-est' href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img alt='Pinterest' src='http://4.bp.blogspot.com/-48BGp-jLpfA/UixIFoAoAHI/AAAAAAAADaA/a4SMqKDRqno/s1600/Pinterest.gif'/></a>
<!-- Stumbleupon --> 
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumble this'><img alt='StumbleUpon' src='http://3.bp.blogspot.com/-Wa5Tyh1r3Ng/UixIG9GvWrI/AAAAAAAADas/yzizUt7zQ9k/s1600/stumbleupn.gif'/></a>
<!-- Delicious --> 
  <a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Delicious'><img alt='Delicious' src='http://1.bp.blogspot.com/-4EdR0vYOqGM/Ui3DwhBBxHI/AAAAAAAADbA/CI5Tremd7D8/s1600/Delicious.gif'/></a>
<!-- Reddit --> 
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this'><img alt='Reddit' src='http://2.bp.blogspot.com/-Q0wmiZUSwRA/UixIGRda0xI/AAAAAAAADaU/U1hgC4cviXc/s1600/reddit.gif'/></a>
<!-- Digg --> 
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='nofollow' target='_blank' title='Digg This'><img alt='Digg' src='http://3.bp.blogspot.com/-jrj7YxfIPgE/UixIFjv-vfI/AAAAAAAADaE/an-JwfXh9KI/s1600/digg.gif'/></a>
<!-- Email --> 
<a href='mailto:?Subject=My Blogger Tricks&amp;Body=Check out this site.. http://www.myblogger-tricks.com' rel='nofollow' target='_blank' title='Email This'><img alt='Email' src='http://1.bp.blogspot.com/-1-6g64zlV8E/UixIGPBkoKI/AAAAAAAADaQ/S_vYcUEpZ4M/s1600/email.gif'/></a>
<!-- addtoany --> 
  <a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share On Others Networks'><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/><img alt='Delicious' src='http://3.bp.blogspot.com/-d5s1xCQ1FaA/Ui3FWCqhUBI/AAAAAAAADbM/j5EYPxb_hz4/s1600/share-to-any.gif'/></a>


Note: Please make a backup first before editing your template.

Check out the full tutorial here.

Liked It ? Please Share


8 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Hello Marvein

    Thanks for giving back link….

  2. Tony says:

    Thanks ,,, 🙂

  3. Rangga says:

    Thanks for tutorial 🙂

  4. I Think it is the best social sharing widget.

  5. Hans Shabery says:

    thanks for very tutorial

  6. piercing says:

    An impressive share! I’ve just forwarded this onto a friend who has
    been doing a little homework on this. And he in fact ordered me breakfast simply
    because I found it for him… lol. So let me reword this….
    Thanks for the meal!! But yeah, thanx for spending the time to talk
    about this issue here on your web page.

  7. CV. Mercury Flash Media – Jasa Ahli Pemasangan Antena TV, Parabola, Kamera CCTV dan Penangkal Petir di Jakarta.
    Kami siap melayani pemasangan di seluruh JABODETABEK dan sekitarnya.
    Kualitas terjamin 100%, Harga Paling Murah, dan teknisi paling ahli di bidangnya.
    Hari Libur Tetap BUKA !!!

    Hubungi kami di line telpon : (021) – 45737773 – 83600654 – 70102227 – 51194063

  8. Leroy says:

    Today, I went to the beach front with my kids. I found a sea
    shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She put the shell to her ear and screamed.
    There was a hermit crab inside and it pinched her ear.
    She never wants to go back! LoL I know this is totally off topic but I had to tell someone!

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here