How to Add Social Networking Icons to My Blog

Ok, I know I use a plain old simple blogger template for my blog, but that's because 1) it's clean and I like it. and 2) I can't justify spending money for someone to do a blog design for me right now and 3)I just don't want to learn myself to do things like serious HTML myself.

But seriously.... the Twitter, Pinterest, RSS and whatever buttons that come standard from their sites just sort of make my eyes hurt....so finally I did something about it.

This post here gave me the tips I needed to start.

And here's what I went and did about it.

• First I searched around for some free icon sets.

 

Icon Archive has tonnes of sets that you can browse through, and links back to the designer's site where you can download them. I ultimately however picked my set, found while googling for a free pink set (ooh yeah girly girl here) from WebStuffShare.com. They look like this:

• Next up opened the files (they usually come as a zip) and thru them all into powerpoint so I could pick what ones I wanted and play with arangement... Well this set, I soon realized didn't come with a pinterest icon....so I was back to searching (a less than matched set would be less than ideal).

• Once I knew which ones I wanted and in what order, I uploaded them all to photobucket... since this would generate HTML code. This new set came from position : relative.

  

• Then I had to add the HTML Gadget to your blogger template, and copy the HTML code in for each image, use the code <br/> to break them up into two rows (or more). When I copied in the code from photobucket, the code is automatically set up to link back to photobucket. All I had to do was to change the url here to where I wanted to link to. Easy as pie!

This image shows what all that looks like. I just replaced the photobucket url within the quotations with the url of  I wanted to link to. I also got rid of the bit 'target="_blank" all that seems to do is take your browser to a blank page on its was to your new link.

• Once I did these few simple steps, I was good to go. As it was the size icons I chose were a bit to wide to go 5 across. I could have go back and repeated the process with smaller icons that had come with the set. As it was, I just made my side bar a tiny bit wider to fit 5 of these in a row. 

 

 

 

Don't all those pretty icons look nice up there. If you have any questions about how I put my social networking icons on my blog,  don't hesitate to ask either in the comments, or by clicking the brand new email icon!