Fairy Blogmother: Adding Social Media Icons in Blogger

PART 1: Adding The Social Media Icons

Step 1:

Go to "Layout"

Step 2:

Add "Gadget"

Step 3:
Add "HTML/Java Script"

Step 4:
Upload the social media icons/images of your choice onto an image hosting website. 

I use ImageShack because it's completely free and easy to use.

Step 5:
Copy and paste the following image URL code into the content portion of the HTML

<center> <a href="SOCIAL MEDIA LINK"><img src="IMAGE URL LINK"/></a> <a href="SOCIAL MEDIA LINK"><img src="IMAGE URL LINK"/></a> <a href="SOCIAL MEDIA LINK"><img src="IMAGE URL LINK"/></a> <a href="SOCIAL MEDIA LINK"><img src="IMAGE URL LINK"/></a> <a href="SOCIAL MEDIA LINK"><img src="IMAGE URL LINK"/></a> </center>

Step 6:

Replace IMG URL LINK with the image URL of the photo uploaded onto ImageShack. Make sure to leave in the quotation marks.

Step 7:
Replace SOCIAL MEDIA LINK with your corresponding social media URL. Make sure to leave in the quotation marks.

Now, if you are willing to code a bit more, you can create a magical hoover & fade illusion. 

Not to worry... I will help you every step of the way. After all, I am your Fairy Blogmother.

PART 2: Adding Hover & Fade Effect
(If you go out of order, the effect will not work)

Step 1:
Copy the following code:

/* Social Media Icon Fade Effect ----------------------------------------------- */ .fade {opacity: 1;transition: opacity .25s ease-in-out;-moz-transition: opacity .25s ease-in-out;-webkit-transition: opacity .25s ease-in-out;} .fade:hover {opacity: 0.5;filter:alpha(opacity=55); /* For IE8 and earlier */}

Step 2:

Click "Theme"

Click "Customize"

Click "Advanced"

Click "Add CSS"

Step 3:

Paste the "social media icon fade effect" coding into the CSS

Step 4:

Go back to "Layout"

Edit the HTML/ JAVA Script for the social media code

Step 5: 

Replace the previous image URL coding with the following. Do this for each of your links.

  <a href="SOCIAL MEDIA LINK"><img src="IMAGE URL LINK" class="fade"/></a>

For further clarification on step 5, read the following:

Basic photo URL code:

<a href="SOCIAL MEDIA LINK"><img src="IMAGE URL LINK"/></a>

Fade photo URL code:

<a href="SOCIAL MEDIA LINK"><img src="IMAGE URL LINK" class="fade"/></a>  

***Only alter the portion in blue***

PART 3: Adding My Graphic Designs To Your Blog

As your Fairy Blogmother, I give you virtual permission to use the following designs as you wish.

Step 1:
Determine if you like the following social media icons. 

Do these icons match your blog theme? If yes, great! Follow steps 2-4 to get the look.

Step 2:

Go to "Layout"

Add "Gadget"
Add "HTML/Java Script"

Step 3:
Copy and paste the following code into the content portion of the HTML gadget.

<center> <a href="YOUR FACEBOOK LINK"><img src="http://imagizer.imageshack.us/v2/320x240q90/923/9vO6Ng.jpg"/></a> <a href="YOUR INSTAGRAM LINK"><img src="http://imagizer.imageshack.us/v2/320x240q90/924/YLZkBl.jpg"/></a> <a href="YOUR PINTREST LINK"><img src="http://imagizer.imageshack.us/v2/320x240q90/922/8WrvGn.jpg"/></a> <a href="YOUR TWITTER LINK"><img src="http://imagizer.imageshack.us/v2/320x240q90/923/7TT6UA.jpg"/></a> <a href="YOUR GOOGLE PLUS LINK"><img src="http://imagizer.imageshack.us/v2/320x240q90/922/yHbgMk.jpg"/></a> </center>

Step 4:
Replace the YOUR _________ LINK with your corresponding social media URL. Make sure to leave in the quotation marks.

Optional Step:
Reference PART 2 of this tutorial to create a hover & fade effect

This is how your transformation will look.

X           O          X          O

It'll do your blog some magic, believe it or not. 

When you put all this together and what have you got? 

Bidibi bodibi boo, an upgraded blog.

I'm sorry to say that no glass slippers are included.

Love always,

Your Fairy Blogmother