Custom social media blog buttons

I've been launched into filling in for our graphic designer at work while her expertise is being used by another department – one HUGE problem, I don’t know what I’m doing…HTML, InDesign, PhotoShop...oh my! I’ve been figuring some stuff out and it made me realize how to do some things that I’ve been wanting to on my blog! Namely my email, pinterest, and facebook buttons!

Here are my steps in the order that would make the most sense…not the backward way that I actually did it. This tutorial is for Blogger.

• Find the images that you want to use as your buttons. I googled social media icons, cute social media icons, free social media icons, ect. I finally came across Pretty Lovely Design and feel in love with the options they had! I found their Facebook page where they currently have some freebies to download! The ones I have come in a pack with grey, rose and caramel – they have lots of options!
• Take your icons and upload them into a blog post (not to ever publish), right click on the image you want and copy the image URL. Save this in a Word doc or email…somewhere where you can keep track and edit everything you’ll be doing (this was one thing that I realized was helpful after flip-flopping between pages to get links and copy/pasting my URL's everywhere).
• Next you’ll want to grab the links of where you want your icons to take you. Here are the links for my buttons:

                 Pinterest = http://pinterest.com/millimoe/

                 E-mail = mailto:millimoe@gmail.com/

                 Facebook = http://www.facebook.com/millimoe/

• Now you’re going to take your link and your image URL and put them into this formula:

• Now you’re ready to start adding things onto your blog. Go to your main blog page > layout > add a gadget > html/JavaScript. Add your html to this gadget – copy and paste them in back to back (that is one thing I COULD NOT find in any other tutorial).
• Hit save and preview. If your blog is weird like mine it’ll just show image errors…go back into the gadget and you’ll find that extra quotation marks, delete those out and then it should work!

Here are a few of the tutorial that I flip-flopped between that might help as well:

The SITS Girls

Her new leaf

Now you can say that you've edited html! Ask me your questions - I likely hit my head against the same brick wall.