How To Add Rollover Social Icons in Blogger

This social icon widget include Facebook, Twitter and RSS. When you hover your cursor into the icon,it will rollover. Now, you can add it to your blog. Let's know how.

STEPS

1. Go to your Dashboard >> Design >> Page Element >> Add a Gadget.

 

2. Paste this code in.

<center>
<a href=http://www.facebook.com/username target="_blank" onmouseover= "if (document.images) document.facebook.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhzQSOIFOjkPP_UraP8xXTmLE74qmnetsIZyI-h7pQmTqBIiOZO-VhY5oWDHK0RYtOEPIazfvh2cQBNjVWV9_yam5uHZHmS_0B0yU6_isjW-2TfUq9pl4f6vkyouPzZn4MipaazHF9kuV5/s1600/facebook.png';" onmouseout= "if (document.images) document.facebook.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUywM7lX9ozB5Vpp9-GnipfuH7pD6kCjzgujE3EF1NqyHTOupHhuWLoZWXhTECN67qbRF1FAVeVfS98rkvB45U91I1Bprr7OmyUn9xn0dmMf6WkYgmeQWFMDiV_RSo4qumBWRMnSSoybJe/s1600/facebook.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUywM7lX9ozB5Vpp9-GnipfuH7pD6kCjzgujE3EF1NqyHTOupHhuWLoZWXhTECN67qbRF1FAVeVfS98rkvB45U91I1Bprr7OmyUn9xn0dmMf6WkYgmeQWFMDiV_RSo4qumBWRMnSSoybJe/s1600/facebook.png" name="facebook" border="0" width="64" height="82"/></a><a target="_blank" href=http://twitter.com/username onmouseover= "if (document.images) document.twitter.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIY0OIPhOtay-fF32zEgB8hL66E_2LJYnEI21COMhV2K72T9wvMHKkZzBXCJOmax7KrHuohg6ldGp_ikt413vH-tkT-i8diA2-UwCcnEXWb_iDr4EIrkkquOM9PTmhoeK_kCxJVJHA0N8X/s320/twitter.png';" onmouseout= "if (document.images) document.twitter.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOHEfRCUMME7HM9AB9K9rGVD6lT-gk8Pd-TXIZ7QyIcbAiMk2mqfckgtfAqHmaabVnabABYWWxPTr31uRnkFfkW3kXaMLkQ9c9Dn5IgjHjXo3aQCJRExyDtq0PAiAD4Y3mRiMoIrQ1UbEf/s1600/twitter.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOHEfRCUMME7HM9AB9K9rGVD6lT-gk8Pd-TXIZ7QyIcbAiMk2mqfckgtfAqHmaabVnabABYWWxPTr31uRnkFfkW3kXaMLkQ9c9Dn5IgjHjXo3aQCJRExyDtq0PAiAD4Y3mRiMoIrQ1UbEf/s1600/twitter.png" name="twitter" border="0" width="64" height="82"/></a><a href=http://feeds.feedburner.com/username target="_blank" onmouseover= "if (document.images) document.rss.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpZMYB8lJ0O4ZPFLkrrBXI4cUdEMK9EcdZjkWzDGX4HXybv42hUZEA0C_JP6Cn0sf0Ry_cbQGfblPIL1uzmQOAtYg1o-v1LDIDk3e9jt-wx54dhJJsGD2BLopFhzLXVHS4S3BQsJetCq3c/s1600/rss.png';" onmouseout= "if (document.images) document.rss.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihXZzH141zmZlKdpNsb3PLRmQkfaJSRUgAiKdOpeddH8wEcHNdoWXf_AUcNHXm5YewLX6hed5FT1uIs6VNo-6X0j9kE_0FlQzeyI9CCxzqkNdjtm9RP2auEhU99Lfn2pEhVMlfz1ATyzRm/s1600/rss.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihXZzH141zmZlKdpNsb3PLRmQkfaJSRUgAiKdOpeddH8wEcHNdoWXf_AUcNHXm5YewLX6hed5FT1uIs6VNo-6X0j9kE_0FlQzeyI9CCxzqkNdjtm9RP2auEhU99Lfn2pEhVMlfz1ATyzRm/s1600/rss.png" name="rss" border="0" width="64" height="82"/></a>
</center>

3. Replace the red code with your Facebook, Twitter and RSS URL.

4. Save. Finish! You're done.

Enjoy your rollover social icon guys! :)