Freckles in April: DIY Blog Design Part 9: About Blurb with Social Media

Wednesday, June 27, 2012

DIY Blog Design Part 9: About Blurb with Social Media


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:

<!DOCTYPE html>
<html>
<body>

<img src="http://4.bp.blogspot.com/-P7EmkYi6ZKM/T-aVKaUa3iI/AAAAAAAAFuE/v84tzzielNQ/s320/SideBar.jpg" alt="About Me" usemap="#AboutSumo" />

<map name="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:sumossweetstuff@gmail.com" />
</map>

</body>
</html>

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-

#HTML2 {
   margin-left: -30px;
}

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!

1 comment:

  1. No apologies! Loving my new look! And glad there are smart people like you to figure this all out, because it is really not my area at all! :)

    ReplyDelete

Thanks for your comment!

Any trolls will be dragged into the trees and beaten soundly.

Related Posts Plugin for WordPress, Blogger...