Social Networking

I just wanted to take a minute to mention the new social media buttons in my sidebar, under my little profile blurb. I am extremely proud of myself, because I learned how to write the html code for those all by myself! Granted, this might not seem like much of a task to some people, but I'm not super html or graphic design savvy so this is a big step for me!

I got this great set of social media icons from Carrie Loves Design. You can download all of them in 30 different colors, so there's bound to be one to match your blog's color scheme. She links to this site for instructions on how to build the code for the buttons, but it took a bit of trial and error for me because the instructions are not specific to Blogger and Photobucket has undergone a revamp, and I almost missed the bit about how to adjust the size. So I'll break down the process as best I can right now, in case anyone out there is like me and a little intimidated by html:

1. Download the file from Carrie's website. It will be a zip file so you'll need to open it and grab all the .png files and copy/paste them into a folder elsewhere.

2. Go to Photobucket and make a free account or log in. Upload the set of icons you wish to use.

3. Go into your Blogger dashboard and select the tab to edit your layout. Click the "Add a Gadget" link and select the "Text" widget, and place it wherever you want your icons to be on your page.

4. Now comes the fun part. You only need to know a couple bits of html to get this to work, so fear not! First of all, you need to know the address of the page you want the button to link to. 

Take, for example, Pinterest. My Pinterest page is http://www.pinterest.com/ohthecuteness. Now go to your Photobucket account and click on the Pinterest icon you uploaded. In the sidebar to the right there will be a box labeled "Image Links". Click on the "Direct Code" box and it will tell you the link has been copied.

5. For every icon you will need to know what page you want to link to, and have the image's url copied as detailed in step 4. 

In the text widget you created, be sure you are in the "Edit HTML" mode, and write the following:

Now, without any space between the first chunk of code, type this:

6. The icons you downloaded are 72x72 pixels, which I found to be quite a bit too big for my sidebar. If you feel the same and want to shrink them down, you do the same steps as before, but at the end of the image source code (that second line of gobbeldy-gook up there), you will type width="45px", or "30px", whatever suits you, and the finished code should look like this:

And that's it! Repeat the process for all the icons you want to use, just make sure your website matches your button and you'll be sporting some cool social media buttons before you know it!