CUSTOMIZE YOUR SOCIAL MEDIA ICONS

Have you seen these jazzed up blogs where all the social media icons match the blog?  Yah, me too!  Pretty, huh.

Found these here.

I'm a learn as you go kinda girl and through lots of trial and error have done my own site.  Don't get me wrong -- there are lots of awesome blog designers out there that do awesome stuff it's just that I'm frugal so if I can do it myself...I will.

I just figured this out last week, so I thought I would tell ya how I did it.  Here it goes...

1.  Scroll down through all the colors {see above} and find the one you want here.  Click on the link below the color that you want to download the zip file to your pc.  

2.  Find the file in your downloads, unzip your file by double clicking it.  

3.  I like Photobucket so that is the program I use to get my image code.  Upload the button images you want to use to Photobucket.

4.  Okay, now you have your buttons saved into Photobucket. Your next step is to write your HTML code.  Don't worry -- it's gonna be easy because Her New Leaf already wrote the code for us! 

 Here is the basic code.

  If you have trouble with this code or need more instructions please click here.

5.  Open Word.  It's easier to copy the html and manipulate it there that way you can complete it all before adding the entire code to your blog.  Copy the entire code above just as it is and paste it into your Word document.

6.  The yellow highlighted area is where you will add your FB page url.  Only delete the yellow highlighted area and no more or your link will not work.  Then add your specific url.

7.  The blue highlighted area is where you will add your image location from Photobucket.  You can find it easily by clicking on the on the code in the direct link box.  Just click it and it will automatically copy it for you.  Now add this to your Word document.

8.  Repeat this same process again for each button you want added to your blog. Add each one right after the other without any spaces so that they will appear side by side.

9.  Once you are done you are ready to add it to your blog.  Copy the entire code from your Word document.

10.  Open your blog to the layout page.  Choose add gadget, then choose html.  Once this new window opens click paste to add your new html code.  Hit save then view blog.  Click on your new icons just to make sure the links work correctly!  Yay , your all done!

**If for some reason they don't work then just go back into your layout page,  click edit your gadget and fix your code or delete that gadget all together and things should be as they were**

Just so you know -- I am not an html diva and what worked for me might cause you terrible grief it you mess up your blog.  I'm not responsible for your blog -- only mine!  So proceed with caution and edit at your own risk!

PS:  I'd love for you to come follow along with me!

Featured over at...