Widget : Add Social Icons With Rollover Effect To Blog



This cool amazing feature gives a great look to your blog. when you mouse hovers over the each icon they switch to the bright clean icons. This is called a rollover effect.

How To Add Social Icons With Rollover Effect

1. Go to your Design tab ---> Page Elements tab.

2. Click on "Add a Widget" then select "HTML/Javascript" Widget.

3. Add below code inside the HTML/Javascript widget.


<a href=http://www.facebook.com/username onmouseover= "if (document.images) document.facebook.src= 'http://1.bp.blogspot.com/-23R7iMQYXos/TcCnWEQwPtI/AAAAAAAADlc/jGPp-_QBi8Y/s1600/facebook.png';" onmouseout= "if (document.images) document.facebook.src= 'http://4.bp.blogspot.com/-OlVAPY5N4DU/TcCr-NGtkrI/AAAAAAAADlw/TYJpdwMUpwU/s1600/facebook.png';"><img src="http://4.bp.blogspot.com/-OlVAPY5N4DU/TcCr-NGtkrI/AAAAAAAADlw/TYJpdwMUpwU/s1600/facebook.png" name="facebook" border="0" width="64" height="82"/></a><a href=http://twitter.com/usename onmouseover= "if (document.images) document.twitter.src= 'http://2.bp.blogspot.com/-QBSeBdg2pn8/TcCqOfT-6SI/AAAAAAAADlo/ks47LssGaRs/s320/twitter.png';" onmouseout= "if (document.images) document.twitter.src= 'http://2.bp.blogspot.com/-zpBYTS7b0Kw/TcCsDEBdHqI/AAAAAAAADl4/j3TvkL4luC0/s1600/twitter.png';"><img src="http://2.bp.blogspot.com/-zpBYTS7b0Kw/TcCsDEBdHqI/AAAAAAAADl4/j3TvkL4luC0/s1600/twitter.png" name="twitter" border="0" width="64" height="82"/></a><a href=http://feeds.feedburner.com/username onmouseover= "if (document.images) document.rss.src= 'http://2.bp.blogspot.com/-SJF6UBDPtmU/TcCnWl9-gaI/AAAAAAAADlg/NVgsWS3Kefk/s1600/rss.png';" onmouseout= "if (document.images) document.rss.src= 'http://1.bp.blogspot.com/-34I9Zv8nr0k/TcCsCJjlt3I/AAAAAAAADl0/Hmioi9iUEnU/s1600/rss.png';"><img src="http://1.bp.blogspot.com/-34I9Zv8nr0k/TcCsCJjlt3I/AAAAAAAADl0/Hmioi9iUEnU/s1600/rss.png" name="rss" border="0" width="64" height="82"/></a><a href="http://all-blogger-tools.blogspot.com/
"><img src="http://www.aavl.org/forum/styles/affinity/imageset/ft_open_copyright.png
"/></a>


4. Replace above highlighted URLs with the Facebook, Twitter and RSS Feed URL's

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes