15 Sept 2012
Add Sharing Widget With Multi Colour Effects on Hover
Labels:
BLOGGER TIPS,
BLOGGER TRICKS,
BLOGGER WIDGETS
Add Sharing Widget With Multi Colour Effects on Hover
- Go To Blogger - Design
- In Page Elements choose Add a gadget
- Choose HTML/JAVASCRIPT option
And add the following code,
<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
