Social Media Icon - DIY with Blogger - Tutorial

I have wanted to create my own social media icon to match the color theme, but it seems like I needed to put in HTML codes into Blogger. I am not a computer person, so all these backslashes and brackets confuses me.

I researched for about an hour, and sort of gave up, because almost everything I see, is either designs only or HTMLs and HTMLs come with the design. It was so confusing. I tried different keywords to search on google, and somehow stumbled upon this blog by Pam from Design Frantic that teaches you how to DIY social media icon on your own, without html writing skill!!! It looked scary at first but it is not bad at all. Enough sob story. Here's the video first. Instructions below.

Step by step instruction:

Minimum you need:
- Social media Icons (you can download premade from Craftiments, or search on pinterest, buy it from etsy, or you can DIY this in windows  paint or use software like photoshop and artrage)
- blogger account
-THATS IT!

1. Draw your own design.

Tip on DIY: these are really cute, but I wanted to design my own so I went ahead and designed it with Photoshop Element 11 and Artrage 3 (drawing program). The size of my icons are 24 x 24 pixel. I tried 48x48 but it was a bit too big. I think 36x36 pixel is a good size also. In the video, the icon size are rectangular shape, I am not sure the exact size. However, it seemed like the round little buttons are in style right now, so I made them round and small (see my icons from top right). Try to make the background of your round icon transparent, it comes out cuter, and more like a button than a square.

2. Watch the video.
Tip: try and do exactly what the video says, it is easy to follow. However, I think now blogger spaces out pictures automatically, in order for your icons to lay nicely side by side, you need just a tiny bit of editing in html after you finish following instructions on the video.

3. HTML edit for spaces between pictures. (This is optional for cosmetics)

In Short, delete the "div"s and "/div"s. If you are not familiar with computer language ever, read on.
To do this, go back to where you got the html in editing the post. and click on html.

What you need to understand about html language is that, everything is in brackets "< >"
So each command does different things. The command that separates pictures are "<div>" and "</div>"
So you need to go into the html, and find all the "div" and "/div"s and delete them. Be careful not to delete "< >" unless it looks like this "</div>" or "<div>".

If it looks like "<div blah blah blah command>" then delete the "div" only, not the "<" in the beginning, and make it look like "<blah blah blah command>"
You always need the brackets to let the computer know where is the starting point and where is the finishing point.

So for example, mine looks like this: Yellow highlight is where source of the picture from, if you are using blogger to build html, it will say something like http://2.bp.blogspot.com/blahblahblah.jpg
Highlighted in red is your social media link. 
 Note that I have a "<div blah blah command>" at the beginning, and "</div>" at end of each picture, delete the blue highlighted.

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.facebook.com/joulesofjewels" target="_blank"><img border="0" src="http://www.incertyourpicturesourcehere" /></a></div>
<div class separator="" style="clear: both; text-align: center;">
&nbsp;<a href="http://www.etsy.com/joulesofjewels" target="_blank"><img border="0" src="http://www.incertyourpicturesourcehere" /></a></div>
<div class separator="" style="clear: both; text-align: center;">
&nbsp;<a href="http://www.pinterest.com/joulesofjewels" target="_blank"><img border="0" src="http://www.incertyourpicturesourcehere" /></a>
<div class separator="" style="clear: both; text-align: center;"></div>
&nbsp;<a href="http://www.twitter.com/joulesofjewels" target="_blank"><img border="0" src="http://www.incertyourpicturesourcehere" /></a></class></class></class></div>

Now, after you delete the blue highlighted above, copy and paste the updated html into your template gadget html (where you were before in the video). Then view blog to enjoy your cute one of a kind social media buttons!

Thanks to the great world wide web, google, Pam from Design Frantic, Craftiments,and YouTube!
If you have any questions, please post comments, and I will be happy to respond!
Please share if you think this post has helped you!