Get Hover effect to your share button

Get hover effect to your share button in your Blog..It will make your share button gadgets more stylish and attractive than Others.You can even add this hover effect with your using Share buttons.Just Two step Guide needed to add this effect to your existing share buttons.!

  • Go to Dashboard and Design 
  • Now Click on "Add Page Element" and select HML/JAVA SCRIPT from the gadgets shown in popup window. Now Copy down the Code below and Paste it in HTML mode
Note : You Should Replace the Red Color Link in the Below code with your Facebook Page URL,twitter address,you tube address,and rss feeds..And  change the Image URL of Share button that i have used in here highlighted in Blue color with your Share button image URL.!
  •  After customizing the Code , Just Save it.

<style>
.share_button img {
        filter:alpha(opacity=100);
        -moz-opacity: 1.0;
        opacity: 1.0;
        border:0;
        }
        .share_button:hover img {
        filter:alpha(opacity=30);
        -moz-opacity: 0.30;
        opacity: 0.30;
        border:0;
        }
        .share_buttonxtra:hover img {
        filter:alpha(opacity=0.30);
        -moz-opacity: 0.30;
        opacity: 0.30;
        border:0;
        }
 </style>

<div>
<table>
<tr><td>
<a class='share_button' href='http://www.facebook.com/pages/blogknol/149447591789377' rel='nofollow'><img align='absbottom' alt='follow  us on facebook' border='0' height='48' src='http://aux.iconpedia.net/uploads/15646265121093516320.png' style='cursor: pointer;margin-right:8px' title='follow  us on facebook' width='48'/></a></td><td>
<a class='share_button' href='http://www.twitter.com/haseebp' rel='nofollow'><img align='absbottom' alt='follow us on twitter' border='0' height='48' src='http://i310.photobucket.com/albums/kk434/gorkut123/twittersharebutton.png' style='cursor: pointer;margin-right:8px' title='follow on twitter' width='48'/></a></td><td>
<a class='share_button' href='http://www.youtube.com/' rel='nofollow'><img align='absbottom'  border='0' height='48' src='http://aux.iconpedia.net/uploads/1313101677679174427.png' style='cursor: pointer;margin-right:8px' title='follow us on youtube' width='48'/></a></td><td>
<a class='share_button' href='http://www.youtube.com/' rel='nofollow'><img align='absbottom' alt='follow us on google' border='0' height='48' src='http://aux.iconpedia.net/uploads/1227888166770625746.png' style='cursor: pointer;margin-right:8px' title='follow us on google' width='48'/></a></td><td>
<a class='share_button' href='http://www.bloggerhacking.com/rss.xml' rel='nofollow'><img align='absbottom' alt='view rss feeds' border='0' height='48' src='http://i310.photobucket.com/albums/kk434/gorkut123/rsssharebutton.png' style='cursor: pointer;margin-right:8px' title='view rss feeds' width='48'/></a>
</td></tr>
</table>
</div>


Example for the Above code is Given Below.You can customize the Image URL , height and size of the Code.








By : Sooji
Category:

0 comments:

Post a Comment