How to Add Social Media Icons with a Hover Effect to Your Blog for Blogger & Wordpress

Having links to all of your social media pages front and center on your blog is very important. It let's readers know what pages are really your's and links them directly so they don't have to go searching. And when the code is right they can be linked to your social media without ever leaving your blog!

Today I'm going to show you a code that works for both blogger and wordpress blogs. Any blog that allows you to add HTML gadgets really. 

This code is fairly easy to edit and add it to your blog. It is also very easy to add more buttons once you've already posted it.

This code is a lot like the code from my other social media icons post. The only difference is that this one is designed for two images so when the a mouse cursor goes over the button it changes color. This one is just as simple as the last one to edit. I just needs two image URLs

Here is a demo of how the hover works:

First we have to edit the code to your images and site links. Then I'll show you how to add it to Blogger then Wordpress. 

1. Code

<a href="YOUR SITE LINK HERE" target="_blank"><img alt="Subscribe to my YouTube Channel!" onmouseout="this.src='BASE BUTTON IMG URL HERE'" onmouseover="this.src='HOVER BUTTON IMG URL HERE'" src="BASE BUTTON IMG HERE" /></a>

That's all the code you'll need. You just have to add it over and over, one after another, for each button. All you have to do it edit it right for each button

2. Editing The Code

So you need social media icon images. You can get some on Etsy or you can check out Carrie Loves post for some cool free ones. I made mine with photoshop. They are going on Etsy soon.

Once you have your images you need a url for them for the code. You can get this URL by uploading the images to Photobucket or another photo hosting site. Or you can get the code straight from Blogger or Wordpress.

To Get the URL From Blogger/Wordpress

1. Open a new post page. Click add an image and select all of your social media icons.

2. Go into the HTML section of the post and look for the section of code like this:

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6JOWZ_V5WO64ee_XmFyPIqNUF0KnOeLdD5pALgHUZzWmSkPz3Cs1KBMZL8J2FYwY_vvtbW2EqpPrQlsnxHw1AkQSF1vP_e07mrq332lwGQP11AcWtJYMOfyFcBdzJmekRs3Qwmvd35wI/s1600/Etsy.png"

There will be a line of this for each image and the URL will be different for each image. You need the URL of each image for the code. Copy the URL in between the " " This is the Image URL.

Remember you need two Images for each button. One Base Image, the image you want when the mouse is not on the image, and one hover image for when the mouse is on the button.

Now that you have the image URL it's time to edit the code. Here's the code again.

<a href="YOUR SITE LINK HERE" target="_blank"><img alt="Subscribe to my YouTube Channel!" onmouseout="this.src='BASE BUTTON IMG URL HERE'" onmouseover="this.src='HOVER BUTTON IMG URL HERE'" src="BASE BUTTON IMG HERE" /></a>

For each button replace the IMG URL HERE with the correct button image URL. And replace YOUR SOCIAL LINK HERE for your site. Make sure the " " are still there. 

You can also change the img alt to fit the site. I copied this code from the top of my social icons code so this is the one for my YouTube channel.

Repeat the code as many time as your need. It should look something like this.

<a href="YOUR SITE LINK HERE" target="_blank"><img alt="Subscribe to my YouTube Channel!" onmouseout="this.src='BASE BUTTON IMG URL HERE'" onmouseover="this.src='HOVER BUTTON IMG URL HERE'" src="BASE BUTTON IMG HERE" /></a><a href="YOUR SITE LINK HERE" target="_blank"><img alt="Follow Me on Twitter!" onmouseout="this.src='BASE BUTTON IMG URL HERE'" onmouseover="this.src='HOVER BUTTON IMG URL HERE'" src="BASE BUTTON IMG HERE" /></a><a href="YOUR SITE LINK HERE" target="_blank"><img alt="Follow Me on Instagram!" onmouseout="this.src='BASE BUTTON IMG URL HERE'" onmouseover="this.src='HOVER BUTTON IMG URL HERE'" src="BASE BUTTON IMG HERE" /></a>

You need them to be one after another so there aren't any weird spaces in between the images.

Also make sure you do not delete or change Target="_blank"> This code makes the site linked open in a new tab instead of talking the reader away from your blog.

Centering the Buttons

To center the code all you have to do is add a Center command before and after the code.

Center commend for HTML is

<center>YOUR CODE HERE</center>

It should look like this:

<center><a href="YOUR SITE LINK HERE" target="_blank"><img alt="Subscribe to my YouTube Channel!" onmouseout="this.src='BASE BUTTON IMG URL HERE'" onmouseover="this.src='HOVER BUTTON IMG URL HERE'" src="BASE BUTTON IMG HERE" /></a></center>

Aligning the Buttons to the Right

To align the icons to the right you do the same as the center command but a bit of a different code.

Align Right Commend for HTML is

<div style="float: right;">YOUR CODE HERE</div>

It should look like this:

<div style="float: right;"><a href="YOUR SITE LINK HERE" target="_blank"><img alt="Subscribe to my YouTube Channel!" onmouseout="this.src='BASE BUTTON IMG URL HERE'" onmouseover="this.src='HOVER BUTTON IMG URL HERE'" src="BASE BUTTON IMG HERE" /></a></a></div>

The code is automatically aligned to the left so there is no need to add extra code if your would like it to align to the left. 

3. Adding the Code to Your Blog

Now that you've got the code all edited it's time to add it to your blog.

Blogger

1. Go to Dashboard>Layout>Choose Where You want your buttons and Click Add a Gadget

2. Click "HTML/JavaScript"

3. Copy and paste your finished code. I suggest writing it in a post or page and just never publish it or writing it in word document.

4. Click "Save" Go to your blog and check your button and make sure you like them and that they work properly.

Wordpress

1. Go to Appearance>Widgets

2. Choose where you want it to go and Add a Text widget.

3. Paste your finished code in the box and click "Save"

4. View your blog and make sure all the links work.

And there you have it. Cute social media buttons that you have complete control over and no third party logos.

If you have any questions please leave them in the comments below. I'll help any way I can. 

If there aren't working make sure your didn't remove or change anything but the all caps text in between the " " and that all the " are still there. If it's still not working double check the Image URLs. A little may have been left off when you copied it and put it into place.

Thanks for reading this post! I hope you enjoyed! If you have any questions or concerns please feel free to message me.

Twitter | Instagram | BlogLovin | Facebook