Adding social media icons to your blog is important for a few different reasons. First, connect your site to other platforms helps with your SEO. Secondly, it provides your readers with easy access to follow you on the various social media platforms. More importantly, adding this feature to your site is quite simple to do, as you will not be interfering with the actual code of your site.
Today, I'm going to show you how to add social media icons change color when you hover over them. This feature is particularly important as social media icons function like buttons on your site. You want them to have some sort of interactive component, so your user knows they can click on them.
First, you will need to gather two sets of social media icons that you want to use. I have created my own social media icons, but there's plenty of sites where you can download free versions. For this example, I've grabbed a pink and a purple version of the facebook icon.
Once you grab all of your icons, make sure they are sized correctly. You can do these using "Preview" on Macs. I recommend social media icons to be about 30-45 pixels, but this depends on how many icons you have and the layout.
You need to upload the images to your site. For Blogger and WordPress, this is a bit different.
For WordPress, just go to "Media" < "Add New". Once you've added each image, select "Edit". On the right hand side, you will see "File URL". Copy this link and place it in a text-editor for each image.
For Blogger, open a new post, and add the images. Then select view "HTML" of just the images. You will see code that looks like the following:
The location of the link you want is highlighted in red.
Once you have copied all the links. You are going to prep you code. You are going to take the following snippet:
<a href="SOCIAL MEDIA LINK" ><img onmouseover="this.src='HOVER IMAGE'" onmouseout="this.src='REGULAR IMAGE'" src="REGULAR IMAGE" /></a>
For Red Social Media Link, enter the URL of your social media profile. For this example, I've used: http://www.facebook.com/MidwestBloggerNetwork.
For the HOVER IMAGE, you are going to place the link of the file. I wanted to show pink on the hover.
For the REGULAR IMAGE, you are going to place the link of the file. You need to insert this twice.
Above shows my final result. When inserting images, please be very conscious of the "" and the '', you don't want to delete those, if you do, the effect will not take place.
Also, most people want to direct people to their social media profiles, but they don't want to lose them from the site. If you add, target="_blank" after your social media profile link, the link will open in a new window. See below:
Most people prefer their social media icons to be centered within the widget. In order to do this, you can add a <center> tag above your code, and make sure to close it below with </center>.
For each social media profile, you need to repeat. Once you have all of your code together, you are going to insert it to an HTML/Javascript widget in HTML. For Blogger, go to your blog, "Layout", "Add a Gadget". Select HTML/Text. Copy and paste your code into the site. Make sure to save! Then, view your site. Your logos should now hover. If you have any issue, make sure you are checking the quotations around your links!
Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay Humes of White Oak Creative and The Garden Apt. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay at lindsay@wocreative.com and she will answer them in her weekly series.
