Fairy Blogmother: Add Social Media Icons [freebie]

This DIY tutorial is tailored for Blogger users. 

As a fellow Blogger user, I understand your pain when it comes to designing and adding some charm to your blog. As your Fairy Blogmother, I hope that this tutorial transforms your blog into Blog Charming.

Step 1:

Go to "Layout"

Add "Gadget"
Add "HTML/Java Script"

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

<center> <a href="YOUR FACEBOOK LINK"><img src="http://imageshack.com/a/img924/4979/4kBu62.jpg"/></a> <a href="YOUR INSTAGRAM LINK"><img src="http://imageshack.com/a/img924/6842/f5joZH.jpg"/></a> <a href="YOUR PINTREST LINK"><img src="http://imageshack.com/a/img924/387/Yk32Vs.jpg"/></a> <a href="YOUR TWITTER LINK"><img src="http://imageshack.com/a/img923/5189/ZpdXHv.jpg"/></a> <a href="YOUR GOOGLE PLUS LINK"><img src="http://imageshack.com/a/img923/727/06sBaX.jpg"/></a> <a href="YOUR YOUTUBE LINK"><img src="http://imageshack.com/a/img923/9637/iCzkgx.jpg"/></a> <a href="YOUR SNAPCHAT LINK"><img src="http://imageshack.com/a/img923/8600/7KWRwC.jpg"/></a> </center>

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


ADDITIONAL TIPS:
1.) You can easily arrange the icons in the order of your choice by rearranging the codes. 

2.) CLICK HERE to learn how to add a hover & fade effect to your icons. (Reference Part 2)

3.) If you do not want a specific social media icon on your blog, remove the corresponding portion of the html coding. For example, if you want to remove the YouTube icon, remove the coding in blue.

 <center>

<a href="YOUR FACEBOOK LINK"><img src="http://imageshack.com/a/img924/4979/4kBu62.jpg"/></a>

<a href="YOUR INSTAGRAM LINK"><img src="http://imageshack.com/a/img924/6842/f5joZH.jpg"/></a>

<a href="YOUR PINTREST LINK"><img src="http://imageshack.com/a/img924/387/Yk32Vs.jpg"/></a>

<a href="YOUR TWITTER LINK"><img src="http://imageshack.com/a/img923/5189/ZpdXHv.jpg"/></a>

<a href="YOUR GOOGLE PLUS LINK"><img src="http://imageshack.com/a/img923/727/06sBaX.jpg"/></a>

<a href="YOUR YOUTUBE LINK"><img src="http://imageshack.com/a/img923/9637/iCzkgx.jpg"/></a>

<a href="YOUR SNAPCHAT LINK"><img src="http://imageshack.com/a/img923/8600/7KWRwC.jpg"/></a>

</center>

This is how your Blog Charming should look:

To make your Blog Charming even more charming, add a nifty "Follow Me" label before your social media icons.

Add this to your code after <center>
<img src="http://imageshack.com/a/img923/5353/z8pU3f.jpg"/>

Your new HTML code should look like this:
<center> <img src="http://imageshack.com/a/img923/5353/z8pU3f.jpg"/> <a href="YOUR FACEBOOK LINK"><img src="http://imageshack.com/a/img924/4979/4kBu62.jpg"/></a> <a href="YOUR INSTAGRAM LINK"><img src="http://imageshack.com/a/img924/6842/f5joZH.jpg"/></a> <a href="YOUR PINTREST LINK"><img src="http://imageshack.com/a/img924/387/Yk32Vs.jpg"/></a> <a href="YOUR TWITTER LINK"><img src="http://imageshack.com/a/img923/5189/ZpdXHv.jpg"/></a> <a href="YOUR GOOGLE PLUS LINK"><img src="http://imageshack.com/a/img923/727/06sBaX.jpg"/></a> <a href="YOUR YOUTUBE LINK"><img src="http://imageshack.com/a/img923/9637/iCzkgx.jpg"/></a> <a href="YOUR SNAPCHAT LINK"><img src="http://imageshack.com/a/img923/8600/7KWRwC.jpg"/></a> </center>

U p d a t e: (May.1.2017)

Question: What's my snapchat url link?

Answer: http://www.snapchat.com/add/YOUR_USER_ID

All you have to do is insert your snapchat user ID into the blue portion of the URL template above. To find your user ID go into your Sanpchat settings and look under "My Account".

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