HTML Tips & Tricks | How To Create Hover Effect Social Media Icons


One thing I think every blog should have is social media icons - a way to follow the writers other accounts on social media. Social media icons are really easy to install on your blog, however if you like the look of hover effect icons (you can see mine on the left for a demo) then I have a super easy way to show you how you can create this without too much effort. 
For this tutorial you're going to need two sets of social media icons - basically the same icons in two different colours. One is going to be your standard set and one will be for the hover colour or the colour the icons change to when you scroll over them. You can find loads of free social media icons on the web or you could create your own. I really like this free set here which comes in several colours.
When you've found the social media icons you want to use, you're going to need to upload them to photobucket or an alternative site. I recommend naming your icons set 1 and set 2 as it makes the process much easier.
When you've uploaded all the icons you need in both colours, you then need to add your coding. So firstly, you need to go to the layout section of your blogger dashboard - add gadget - html/javascript. When you've opened this blank box you need to add the following coding.

<center> <a href="link to social media" target="blank" title="name of social media account">
<img src="link to social media icon 1" border="0" onmouseover="this.src='link to social media icon 2'" onmouseout="this.src='link to social media icon 1'" style="padding-right:5px" /></a>
</center>

So, in the yellow box you need to add the link to your social media account. In green, you add the name of the account (for example, Twitter). In orange, add the direct link to your first social media icon (you need to add this twice) and in purple add the direct link to your second social media icon (the direct link will be on the right hand side of your photobucket page). The value in blue can be changed either lower or higher depending on how much space you want between the icons. 

You need to add this code (follow the above step) for every social media icon that you want to add. All the coding goes into the blank box of the html widget. When you've finished, click save and your hover effect social media icons will be added to your blog. 

I hope this was helpful!!

Twitter | Bloglovin | Google +

27 comments

  1. This was sooooo helpful ! I've been trying to figure it out all day, thank you so much !!

    ReplyDelete
  2. you have the most helpful blogging tips!

    brooke | brooke elise beauty

    ReplyDelete
    Replies
    1. thanks so much Brooke :)

      Delete
  3. Thank you for posting this, it's really helpful to read something that's easy to understand! :-)

    alice xo | beautybyalicee

    ReplyDelete
  4. such a great tip ! i always thought it was difficult but it isn't at all, thanks x

    CLUB AVENUE / http://club-avenue.blogspot.com / instagram

    ReplyDelete
    Replies
    1. its really easy once you know how :)

      Delete
  5. Great post, just what I needed! Thank you so much x

    ReplyDelete
  6. Thank you for this. xox

    http://www.rainbowsandunicornsblog.co.uk/

    ReplyDelete
  7. Awesome! So pinning this for reference, thanks so much!
    Tegan xx - Permanent Procrastination

    ReplyDelete
  8. I've not braved much HTML recently, but I may be tempted now. Do love you your social media buttons!

    Annabel ♥
    Mascara & Maltesers

    ReplyDelete
  9. I love your tips and tricks so much, they're really really helpful!
    xoxo Carina
    the golden avenue

    ReplyDelete
  10. I find posts like this so interesting at the moment. Really getting into HTML and making my own graphics.

    www.britishbeautyaddict.com

    ReplyDelete
  11. Thanks for sharing this! It took me a lot of Googling to figure out how to do it when I started my blog!

    blousesandblush.com

    ReplyDelete
    Replies
    1. you're welcome Lindsey :)

      Delete
  12. Your HTML tips always help me so much. Now I've changed my blog's design and I was looking for some cool social media icons so thanks for the link to carrie's site!!

    xx Cecil // www.wednesday19th.blogspot.com

    ReplyDelete
  13. This was so amazingly helpful! Thank you so much!

    ReplyDelete
  14. I'm not sure what my først social media icon and my second social media icon is. Can you help med with that?

    ReplyDelete

Thank you so much for reading!I read every comment and try to respond.If you have a question you can also email me or tweet me @sweetelectric xoxo