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 {
width:550px;
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);
padding:10px;
margin:0 auto;
border: 1px solid #999;
border-radius:5px;
-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;
opacity:1;
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;
opacity:0.6;
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;
}
Search for this tag <data:post.body/> and add the
following code below/after it.
<b:if cond='data:blog.pageType ==
"item"'><
center>
<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='"http://www.facebook.com/sharer.php?u=" +
data:post.url + "&t=" + data:post.title'
rel='nofollow' target='_blank' title='Share This On Facebook'><img
alt='Facebook'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLacKPhNa3vRmeR6Euj7twtOT2_0sNdCHJ7Eu1j2Z_FNggWfIoFHtTMd_XdfOlZz-6VA-iuztjznG_Mtkkja4IsWywppbc00XYMvvR5rBt_h3qnyUrU13ZrXoS3xuD0LDX2XYCujh8aWXo/s1600/Facebook.gif'/></a>
<!-- Twitter -->
<a class='twitter'
expr:href='"http://twitthis.com/twit?url=" + data:post.url +
"&title=" + data:post.title' rel='nofollow'
target='_blank' title='Tweet This'><img alt='Twitter'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSlpLCiCxZKjfT98dQNGIZCatr6ajart6niSnBPfAaF4p4pAsswzGYPc_xbMmd1HtCcUxDiliyekRxA_6mW3tfbJQDrxn_qCxK6mfiqHpwYHz2KJeftqSlK9k4GbNQYNCFKJsStthq9oAv/s1600/twitter_bird.gif'/></a>
<!-- Pinterest -->
<a class='pint-er-est'
href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img
alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_xmzk2XnDp5EGdI4bQLlWR1xoLqSldXqM4SRHshEQ6eT7vtqGMkO1dQ1d5lMOJLfy_-wSoDSd4CuU7dRdg6idK2yJzFyyRJTQuBOxrsQMF0ehlN3DA9UUnd2goOMznGZhPmJEfpYCc4uL/s1600/Pinterest.gif'/></a>
<!-- Stumbleupon -->
<a class='stumbleupon'
expr:href='"http://www.stumbleupon.com/submit?url=" +
data:post.url + "&title=" + data:post.title' rel='nofollow'
target='_blank' title='Stumble this'><img alt='StumbleUpon'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7oaKwvVF-v7acEpWjR0xuFLEgi1AuTYirmdYR0mHsddSVnvKAltlQqMsQ7L0UUMIH9b4173JjynS4b0ORGJGsFTuGmY0oL6eU-TPO2fjlZJb0aWSNyoioHbI_WkoCLLZuwg5OPzbew3ta/s1600/stumbleupn.gif'/></a>
<!-- Delicious -->
<a
class='del-icio-us' expr:href='"http://del.icio.us/post?url="
+ data:post.url + "&title=" + data:post.title'
rel='nofollow' target='_blank' title='Share This On Delicious'><img
alt='Delicious'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfPtx7yxuOG_RU6lEpOQ9EIsv5z4hp_yxCXurQy4qi9TwOBxzATsmQtfdBMKmaibPZ2Tg1a_q0f_yvozz6JMKnLshaaAgXDQDbLbKY2vZZlkAmIVUyDzPTxvvqKpC3nku-BRdiKXLXNmqX/s1600/Delicious.gif'/></a>
<!-- Reddit -->
<a class='reddit'
expr:href='"http://reddit.com/submit?url=" + data:post.url +
"&title=" + data:post.title' rel='nofollow'
target='_blank' title='Bookmark this'><img alt='Reddit'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjldmQQq6jGzJ4XRLyDRC3_YoZpQMgAzYCzvti3hMR96lGgYgBvFuO_6HwfSxnk1ZHsPuzC3vqyyo7-9TOX6wlamBKVtQggLimyAXTMKXOC3n5q357fNEk3ksJ_mRM8L1Ir-6f1jP6CUJOr/s1600/reddit.gif'/></a>
<!-- Digg -->
<a class='digg'
expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='nofollow'
target='_blank' title='Digg This'><img alt='Digg'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEippqt5tTOlZrR8NQCCFwwAkj2MuFIY77-LZry_-FTxij-vUk9gowIxL84OkT5cdIuZyjZAbRnS9NSgiQdrUSOexqqMtSLWXmk1vZx9VjzOf0hkHo0gTJIRlNOOpZPizgJDB5-HjO9_CapY/s1600/digg.gif'/></a>
<!-- Email -->
<a href='mailto:?Subject=My Blogger
Tricks&Body=Check out this site.. http://www.myblogger-tricks.com'
rel='nofollow' target='_blank' title='Email This'><img alt='Email'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4p_Jg1k2NK00KGwAggNBjbwJve2YajYMjQzr1w4V4WyDS68ftxZB2KV7bDvYfYTClI5p1FtUj9pvEB1rArlHikL7KnXCgL6CC7YW0llGqRMrja0hpmJ5qd_g6nprE_RH2Vq3Tms_QhRwA/s1600/email.gif'/></a>
<!-- addtoany -->
<a class='a2a_dd
more' expr:href='"http://www.addtoany.com/share_save?url=" +
data:post.url + "&title=" + 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQfo-dD5N9ZN1P1Olr3bD4arkJFnv4LkYInm8eZzX379B4u-BX4HYCB5xxtlvbTR_SU96s9jnaWykazJugxz0Ow-Po-_icvpHVZhIwrgK14YVmP_yMV974PsOu0EpHA_NKAtd4jdX9FdIT/s1600/share-to-any.gif'/></a>
</div>
</center>
