How To Awesome Floating Sharing Horizontal Bar for blogger

1. Goto blogger dashboard 
2. Template ->Backup template [Recommended]
3. dashboard ->Template
4. Edit Template -> Expand  

<b:includable id='post' var='post'>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.hb_social_floating {
    position: fixed;
    bottom: 10%;
    margin-left: -60px;
    float: left;
    width: 60px;
    background-color: #f7f7f7;
    padding: 5px 0 0px 0px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    z-index: 9999px !important;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.hb_social_floating .hb_side_social_button {
    margin-bottom: 5px;
    float: none;
    height: auto;
    width: 60px;
}

.hb_social_floating .st_twitter_vcount, .hb_social_floating.st_plusone_vcount, .st_email {
    margin-left: 5px;
}

.hb_social_floating .st_fblike_vcount {
    margin-left: 5px;
}

.hb_social_floating .stButton_gradient {
    background: none !important;
    height: 21px !important;
    padding-left: 0 !important;
}

.hb_social_floating .chicklets, .hb_social_floating .stMainServices {
    background: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rtuS9EexnXZFH3gTcRr9r7cZ44ogqN7kJgrBjLnh8hGu3HjjgrzWTmx6Ws-7o07qssKXdRn1opYbaSL1ahxnZxJH3fH76aMrTXfMSuyBP5yFt28WYDQ4F9CE9bvom-___VCmPpFQ6-U/s1600/gc_social_sprite.png&#39;
    ) no-repeat !important;
    height: 19px !important;
    width: 45px !important;
    padding: 0 !important;
}

.st_email .chicklets {
    background-position: 0 -77px !important;
    background-image: url(&#39;
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rtuS9EexnXZFH3gTcRr9r7cZ44ogqN7kJgrBjLnh8hGu3HjjgrzWTmx6Ws-7o07qssKXdRn1opYbaSL1ahxnZxJH3fH76aMrTXfMSuyBP5yFt28WYDQ4F9CE9bvom-___VCmPpFQ6-U/s1600/gc_social_sprite.png&#39;
    ) !important;
}

.hb_social_floating .st_twitter_vcount .st-twitter-counter {
    background-position: 0 -58px !important;
}

.hb_social_floating  .stButton_gradient {
    border: none !important;
}

.hb_social_floating .stBubble_count {
    width: 44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top: 7px !important;
    height: 23px !important;
    background: none !important;
}

.hb_social_floating .st_twitter_vcount .stBubble_count {
    color: #00a6df;
    background-color: #f8fbfc !important;
}

.st_fblike_vcount {
    margin-bottom: 0px;
    display: block;
}

.st_twitter_vcount {
    margin-bottom: 3px;
    display: block;
}

.st_email {
    margin-bottom: 5px;
    margin-top: 3px;
    display: block;
}

.hb_social_floating .stBubble {
    background-position: 21px 31px !important;
    height: 35px !important;
}
</style>

<div class='hb_social_floating'>
 <script type='text/javascript'>var switchTo5x=true;</script>
 <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
 <span class='st_fblike_vcount' displaytext=''/>
 <span class='st_twitter_vcount' displaytext='' st_via='twitter_name'/>
 <div style='margin:5px 0 0px 0;'>
  <center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
  <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
  <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
  </script>
  </center>
 </div>
 <div style='margin:0px 0 0 5px;'>
  <span class='st_plusone_vcount' displaytext=''/>
 </div>
 <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
  <a class='addthis_counter'/>
 </div>
 <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;Helper Blogger&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#CF152A&quot;
}
 </script>
 <span class='st_email' displaytext=''/>
 <p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'>
  <a href='http://www.tricks2blogging.blogspot.com/' style='color:#CAC8C8;'>Widgets</a>
 </p>
</div>
</b:if></b:if>

REplace the Twitter Name With Your Twitter NameComment If you have any suggestion Or problem

Latest And most popular sitemap ever- 2012

• Here is a Demo Picture

• Or you can have a live preview of the SiteMap in our website

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br /></div>
<link href="http://tricks2blogging.my-style.in/Sitemapv3CSS.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://tricks2blogging.googlecode.com/svn/trunk/Sitemapv3.js">
</script>
<script src="http://{YOUR WEBSITE URL HERE}/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Subscription Box With Social Networking Icons For Blogger

1. Go To Blogger - Design
2. In Page Elements choose Add a gadget
3. Choose HTML/JAVASCRIPT option

<div class='widget-content'>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/tricks2Blogging"><img src="http://2.bp.blogspot.com/-qMRqkcoAT0s/Tz06uOJ0WII/AAAAAAAAAHY/
gLqbjiBuBfc/s1600/
woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/tricks2Blogging/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwpAHmkzuxEuQJKZHbxmqndwYVfshLcZRy5XGywgn14VMrkNL4j0hOfWB713wOqGF_mciV_wYB9P6iwfOlGxvDMec9LI4IEZHHkyCDK95Mvk96CH8ZWtNLx7hGfBhlBYigm6Aw8m4Hbuk/s1600/
woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/tricks2Blogging" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_koi-pUv1P14go_jKHhn9rFGbz3aUnExQo-Y1MHT9w_ZGWgnbTytIy38P2Zb-tRn6yJt72Ix8vYP_7RlbopUI3xGtVwuaL3Fk-tq0hZpQ7ZI7dKtFdNdbv_xT6hoCG7FQNo8z9F5CEQ/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a></td></tr></tbody></table>
<style type="text/css">
img.beintouch:hover{
    background: none repeat scroll 0 0 #D6D6D6;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 10px #565656;
}
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCsMkeZopSKLSpliAGh0uooMvBRQP-0C7N2W_ZrbVtEnss2kafQV6FIcMjHcsiSirRoVCT1XV5jtC4X4R3JGdb3uXWQHK7CRUeaK07n3TBGKzIWCWfxqnGL_eKvQN_uowWdp9ZzykOdFc/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 2px #CCCCCC inset;
    color: #444444;
    font-weight: bold;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
width:176px;
margin-left:2px;
}
.ebutton {
   background: -moz-linear-gradient(center top , #FBFBFB 0%, #F4F4F4 100%) repeat scroll 0pt 0pt transparent;
background: -webkit-linear-gradient(top , #FBFBFB 0%, #F4F4F4 100%);
background: -o-linear-gradient(top , #FBFBFB 0%, #F4F4F4 100%);
background-color:#abab12;
     border-radius: 4px 4px 4px 4px;
     border: 1px solid #D3D3D3;
     color: #444444;
     cursor: pointer;
     font-weight: bold;
     margin-left: -18px;
     margin-top: 5px;
     padding: 6px 15px;
     text-decoration: none;
}
</style>
<div>Get Latest Tips via e-mail</div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FreeclassifiedsAndSeoSites', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="FreeclassifiedsAndSeoSites" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
</form>
</div>

Replace The Red Green Blue Codes with your Facebook, Twitter, feed burner codes

How To Add Subscribe Box And Social Sharing Button Below Blogger Posts

1. Go To Blogger - Design- Edit HTML
2. Backup your template
3. Click the "Expand Widgets Template" box
4. Search for this,

<data:post.body/>

<body>
       <div class='widget-content'>
<div style='background-image: url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAk_UpZMybwdLn9LlaxwqI5LafMN1OOmeaA9YD3h78h6LJSPrmUPu2UlaojqvDMmIAs5XM6ariANOREEP741OodtfaUQoOQLkefl_b7zi6bdAhBbNQowDluHDkKtZcRJsQ81jTrOEy8lw/s1600/subscribe.jpg&apos;); height: 161px;'>
<div style='padding:70px 210px 0 75px;float:left;'>
<div style='float:left; margin-right:5px; margin-top:2px;'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size='tall'/>
<!-- Place this render call where appropriate -->
<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script></div><iframe frameborder='0' height='240' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FTricks2Blogging&amp;send=false&amp;layout=box_count&amp;width=60&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90' style='overflow: hidden; width: 60px; height: 90px;' width='320'/></div><div style='padding: 70px 0 0 80px;'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ChangeIt&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><p><input gtbfieldid='2' maxlength='100' name='email' onfocus='this.value = &apos;&apos;;' size='25' style='width: 140px; height: 21px; font-size: 11px; color: rgb(51, 51, 51);' type='text' valign='middle' value='Enter your email address'/>
<input name='uri' type='hidden' value='
ChangeIt'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='submit' type='submit' value='             Subscribe             '/>
</p>
</form></div></div></div>
    </body>

How to Add RSS And Email  Subscription Widget For Blogger

1. Go To Blogger - Design
2.  In Page Elements choose Add a gadget
3.  Choose HTML/JAVASCRIPT option

• And add the following code,

<style>
#submit_btn {float: right;}
.email-rss {
padding-top: 15px;
padding-right: 50px;
padding-bottom: 15px;
padding-left: 10px;
color: #333;
height: 200px;
height: auto;
min-height: 200px;
border: 1px solid #ccc;
background: #dfdfdf url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0_XrkW_RD7x4Aaj_WKLDeqigsHTc3Fbx9uYcuR_hODCRO0h_6FaWNqQ8NHaqMeZJEtJ0Zsixhs097z1q8FgJQAkLDUZHxyGIklKFqJAzDpXSvl7fRmpA01ze2CcYmRduEC5ZgRMWfoNyf/) center -20px no-repeat;
margin-bottom: 5px;
}
.email-rss .first {width: 150px;}

.sidebar-section .widget {
border: 1px solid #ccc;
padding: 10px 0 10px 10px;
margin: 5px 0;
}
.twitter-feed h2, .email-rss h2 {
margin-top: 0;
padding-bottom: 80px;
font-size: 28px;
}
.email-rss h2 {padding-bottom: 30px;}
.footer {
font-size: 13px;
margin-bottom: 0px;
padding-top: 15px;
padding-bottom: 10px;
font-weight: bold;
color: #FCFCFC;
padding-right: 50px;
}
.right-col-footer-inner {padding: 0 0 0 20px;}
#twitter_update_list li {
padding-top: 10px;
padding-bottom: 10px;
list-style-image: none;
list-style-type: none;
}
#twitter_update_list li a {
color: #FFFFFF;
}
.space {
padding-right: 5px;
padding-left: 15px;
}
.phone-email-wrap, .innards {
float: left;
padding: 5px;
background: #dfdfdf;
outline: 1px solid #ccc;
width: 680px;
color: #333;
}
.form-wrap {
position: relative;
float: right;
margin-right: 5px;
}
.form-bubble {
position: absolute;
left: -176px;
top: -70px;
background-color: transparent;
background-image: url(images/bubble-bg.png);
background-repeat: no-repeat;
background-position: left top;
height: 60px;
width: 280px;
font-size: 11px;
text-transform: uppercase;
color: #2B2B2B;
display: none;
padding-top: 5px;
padding-right: 50px;
padding-bottom: 15px;
padding-left: 10px;
}
input#email-element {
background-color: #FFFFFF;
background-image: url(images/form-bg.png);
background-repeat: repeat-x;
background-position: left top;
border: 1px solid #BABABA;
width: 200px;
padding-top: 5px;
padding-right: 2px;
padding-bottom: 5px;
padding-left: 2px;
margin-right: 10px;
}
.form-register {
line-height: 15px;
}
.email-submit {
background-image: url(images/send-but-on.png);
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
height: 29px;
width: 55px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.email-submit:hover {
background-image: url(images/send-but.png);
cursor: pointer;
}
.update-button {
background-image: url(images/ud-button1.png);
background-repeat: no-repeat;
background-position: left top;
height: 29px;
width: 123px;
display: block;
margin-top: 1px;
}
.update-button:hover {
background-image: url(images/ud-button2.png);
}
.register-success {
font-size: 12px;
color: #009900;
}
.form-error {
color: #CC0000;
}
.sb-rss {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5PxGDkUyFaTKthdGdApciaWIrJoIKt5qR-9BAG0YXjDiQ35eKdlTfyezADWTiYmJVQDGWxUZTyq2RIkIaOWXBXvzeEEkS2orTLOuJ2NhLUjv28TeogaKBO4_IeY6jlosi0Wnf4iJivDY/s800/rss.png) left no-repeat; padding-left: 20px; margin-right: 1em; font-weight: bold;}
.sb-email {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAIeyeHw-gk1KuThyEl8eFNa9ScvAhsKjhgULLUpk-v8Dt7OGpFOEu0jJ_5h8jPCsR4iyLc1gP0U_BJCH3MyVXeuyHsVxEKoyWlXqGPvC1FML4MnGAvmsEG4H5dV0NsrkoD3O2Z11Unk0/s800/email.png) left no-repeat; padding-left: 20px; font-weight: bold;}
.phone-email-wrap {margin-right: 20px; width: 645px;}
</style>
<div class='clearfix email-rss'>

<h2>Get Updates!</h2>
<p class='first'>Subscribe to Tricks2Blogging title by email for updates to your inbox:</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=Tricks2Blogging&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'><p><input name='email' style='width:258px; border: 1px solid #ccc; padding: 5px; font-size: 1.2em; color: #434343; font-weight: bold;' type='text' value='Enter your email address'/></p><input name='uri' type='hidden' value='
Tricks2Blogging'/><input name='loc' type='hidden' value='en_US'/></form>

<p>Be informed of new posts by <a href='http://feeds.feedburner.com/Tricks2Blogging'>subscribing to the RSS feed in your feed reader or by email</a>.</p>
<p><a class='sb-rss' href='http://feeds.feedburner.com/Tricks2Blogging'>RSS</a>
<a class='sb-email' href='http://feedburner.google.com/fb/a/mailverify?uri=Tricks2Blogging&loc=en_U'>Email</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class='right'><a href='http://feeds.feedburner.com/Tricks2Blogging
'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/Tricks2Blogging
?bg=C98E71&fg=000033&anim=0' style='border:0' width='88'/></a></span></p>
</div>

Now Save It

Sharing Widgets Below Posts That Rotates On Hover

1. Go To Blogger - Template- Edit HTML
2. Backup your template
3. Click the "Expand Widgets Template" box
4. Search for this,

  ]]></b:skin>

/*------------ Social Media Buttons Style --------------*/

.cas{
 width: 800px;
 margin: 0 auto;
}

.cas img {
 margin: 10px;
 border: 5px solid #eee;
 -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -webkit-transition: all 0.5s ease-out;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
}

.cas img:hover {
 -webkit-transform: rotate(-7deg);
 -moz-transform: rotate(-7deg);
 -o-transform: rotate(-7deg);
}

<data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;'><b>Kindly Share This Post And Stay Connected .</b></span><br/><br/>

<a class='cas' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='facebook' height='125px' src='http://2.bp.blogspot.com/-5j3t_fvH21U/T5wiy3ViPuI/AAAAAAAAAMo/
J0cXAqgKaAw/s1600/facebook.png ' width='125px'/></a>
<a class='cas' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='125px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Qnn1l0bsRj75Dx_9YH22kXQkfOAWEQtR5nnoosdcpC1ECNKfsVr7W643juXWBXTbE2MGGvhgaxSsjS9LuglVtoDY37HavY51LMoWpktNRQKcMkuaXtpWlGIoi2cDqCCU_3dDRx0xxhkp/s1600/twitter.png ' width='125px'/></a>
<a class='cas' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img alt='Linkedin' height='125px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK4RFytsBN-4OP1P2cBfabCmET7bZ90kl78oiOKYWnscPvuFAuUkLiC497KHn1bS61nXiiZst_ZbMb8NReEiTyTRbCO0fSx_Jn0gV8El6Hj3StrycxKuZ-FZT5aC4CqyBKyd53GT8gJAw4/s1600/linked+in.png ' width='125px'/></a>
</center>
</b:if>

Add Sharing Widget With Multi Colour Effects on Hover

1. Go To Blogger - Design
2. In Page Elements choose Add a gadget
3. Choose HTML/JAVASCRIPT option

<style>
.box {
-moz-box-shadow: inset 10 0 5px 15px #888;
-webkit-box-shadow: inset 10 0 5px 5px#888;
box-shadow: inset 10 0 5px 5px #888;
background: #f2f2f2;
font-family: verdana;
text-shadow: 1px 1px 1px white;
height:auto;
padding-left: 10px;
}
.topbox h3{
font-family: Times new roman;
padding-top: 10px;
padding-left: 6px;
font-size: 14px;
margin-bottom: 0px;
text-transform: uppercase;
text-shadow:1px 0px 0px #2f2f2f;
box-shadow: 0 4px 2px -2px gray;
}
.myaligntop{
vertical-align:text-top;
}

.twitter {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYcFhVCRfeFNZ7rafmdvwn_uXmIveE3jlRsY5O5y0k6n3k7RLnQz6DJbS5QNjJNRU4NqkkLk5CXOK87oXm2DxIhtcIHlkPaxFINfCRZcWunqjJk2zVpkVjVGwZFaUx9lbbEVvQwSTFpHm/s1600/BannerTwitter11.png') bottom;
	text-indent: -99999px;
}
.twitter:hover {
	background-position: 0 0;
}

.google {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgb7tiRCvK2vjxvaxdiQQDp5aAjFrxa4n5FXMpCdcQCQpZM7zVUbMUxSvXFXJIOChssR5uGoTDgxg_uX51s0TnPLfoqkdjEhh2v-By5kK6sssidMXKhx0gB_B7iQ8FoB6AEKu5G3ysP-Zl/s1600/BannerGooglePlus11.png') bottom;
	text-indent: -99999px;
}
.google:hover {
	background-position: 0 0;
}

.facebook {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd49gnAo1WWTOcIAXHxTXL9LBMlLptpCwrAxu21TlwMVb6FYmWXHEt-dwAeStOZfCUu8gClMf_aFQuULq_rt0kTPVwMHCNA9oX6eR0RbEhyK7NJCBNvA5ZFkBvc55FoBqac79IVIqd-b4-/s1600/BannerFacebook11.png') bottom;
	text-indent: -99999px;
}
.facebook:hover {
	background-position: 0 0;
}

.stumbleupon {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCaUMHCXKunyi1co-GSJVMe1eqwZWwB9cgNtxDxth7SCLLjl53CgOB4KxJH__BL-zReT0wY4wbmAeZqmCKZWjS_NCuwZsFJtobPmWrh-9bOdd4ccPSXGeavKTED0rCO8QFYW3_dJTxqUD5/s1600/
BannerStumbleUpon11.png') bottom;
	text-indent: -99999px;
}
.stumbleupon:hover {
	background-position: 0 0;
}
</style>
<td class="box">
<table border="0" width="100%" style="border-collapse: collapse">
<tr>
<td>
<a class="twitter" href="https://twitter.com/tricks2Blogging" rel="nofollow">Twitter</a>
<a class="google" href="https://plus.google.com/u/0/108636145831102184488
" rel="nofollow">Google Plus</a>
<a class="facebook" href="http://www.facebook.com/tricks2blogging" rel="nofollow">Facebook</a>
<a class="stumbleupon" href="http://www.stumbleupon.com/" rel="nofollow">StumbleUpon</a>
</td>

Replace The RED Codes with your URl

bg

1. Go To Blogger - Design- Edit HTML
2. Backup your template
3. Click the "Expand Widgets Template" box
4. Search for this,

]]></b:skin>

.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

<a class="button big blue" href=" http://www.blogger.com/YOUR%20DEMO%20URL%20HERE " target="_blank">Live Demo</a>&nbsp;&nbsp;<a class="button big blue" href="http://www.blogger.com/YOUR%20DOWNLOAD%20URL%20HERE" rel="nofollow" target="_blank">Download</a>