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.
Terimakasih anda telah membaca artikel tentang Get Hover effect to your share button. Jika ingin menduplikasi artikel ini diharapkan anda untuk mencantumkan link https://kadangkumatmyblog.blogspot.com/2011/07/get-hover-effect-to-your-share-button.html. Terimakasih atas perhatiannya.