There are a whole lot of different ways to do social media buttons. Each of the navigation bar methods I've posted about are great options. I've used them all at different times.
1. Text is always the easiest option.
2. Buttons: You can create each of the buttons you need to match your design (like when I did Cable Car Couture's sidebar) or go the easy route by Google Imaging each of the individual logos you need (like I currently have going on in my own sidebar). Just copy the image location and stick it in the code. Easy! (although, you may have to resize the images. Not quite as easy)
3. If you're already doing a navigation bar with rollover effects you can easily throw in your social media as well. I did it for my last design. You can see my old nav bar here.
For Summer's social media buttons I'm going to do a simple image map. She wants an "about me" blurb in her sidebar so I combined the two.
Summer sent me a pic, a little about blurb and what social media buttons she needed and I made an image 180 x 400 px. I used the brush tool to create circles and then the gradient tool to paint them coral and purple. I did a Google image search for each of the social media logos and added them to the buttons.
Here's the code I used:
<img src="http://4.bp.blogspot.com/-P7EmkYi6ZKM/T-aVKaUa3iI/AAAAAAAAFuE/v84tzzielNQ/s320/SideBar.jpg" alt="About Me" usemap="#AboutSumo" />
<area shape="rect" coords="4,4,173,353" alt="About" href="http://sumossweetstuff.blogspot.com/p/about-me.html" />
<area shape="circle" coords="20,376,15" alt="Facebook" href="http://www.facebook.com/pages/Sumos-Sweet-Stuff/110386062731" />
<area shape="circle" coords="55,376,15" alt="Twitter" href="https://twitter.com/#!/sumossweetstuff" />
<area shape="circle" coords="90,376,15" alt="Pinterest" href="http://pinterest.com/sumossweetstuff/" />
<area shape="circle" coords="125,376,15" alt="Google Plus" href="https://plus.google.com/u/0/111388558179636885967/posts" />
<area shape="circle" coords="159,376,15" alt="Email" href="mailto:firstname.lastname@example.org" />
We've actually already done an image map before but I'll still walk you through it-
Hosted image URL. See how to host in Blogger here.
Map name. Make sure they match!
Alt text. For people who turn off images while browsing the web. It also makes it a lot easier to figure out where you are working in your own code.
Coordinates. Just like I explained in this post.
URLs. Including a mailto so that people can easily email summer.
Installation is the same as in this post except you add a widget to the side instead of the top of the blog.
And it looks like this-
Also, because of that padding issue, I had to use that code that I told you about here. In case you don't have a crazy good memory, it looked like this-
I know WHY I'm having these padding issues but I can't fix it without breaking something else so I just keep having to add the CSS code to move widgets around. It's a pain but I'll survive. I'm feeling a little bad about making Summer do it though (oops). Sorry Sumo :)
Next up: favicon!