Q&a | the pixel boutique | blog, web & print design

Today I’m tackeling a question from Lissa. She asked:

How do you make target links in the header – an example of what I mean is http://eightcrazy.blogspot.com/

Well Lissa, in the world of web design, there seems to always be 1000 ways to do the same thing. One person will use one method, while another person will use another. There are design standards, but within that, there is some freedom and flexibility.

I think from looking at eightcrazy‘s source code (btw, you know you can peek at someone’s source code by right-clicking on the page and selecting “view page source”, don’t you? Its super handy.) that she did a lot of template customization (and btw again…Shannon of Eight Crazy is a super talented designer and all-around cool gal! Check ‘er out.).

She probably started with a basic Blogger template and went into “Layout” and “Edit HTML” and tweaked to her heart’s content. My other guess is that she did what’s called “slicing” on her header when she created it in Photoshop. She divided her header into four sections, using a very clever design. (sorry Shannon…I hope I’m not giving away all your secrets!). Within Photoshop, there is a “slice” tool that divides your design into smaller pieces and creates images from them. In her HTML code, she arranged her slices, wrapped them in anchor tags ( <a href=”yoururl.html”> ) and thus created a full header.

Eightcrazy is a great example of what you can do with a little creativity and coding. Blogger offers a good starting point for people who just want to set up a basic blog and start writing. But there are also a lot of customization capabilities built in if you dig around a little bit. Here are a few resources I use when working with Blogger:

http://tips-for-new-bloggers.blogspot.com/

http://www.bloggertipsandtricks.com/

http://bloggerfordummies.blogspot.com/

Hope that answers your question, Lissa. Thank you, Shannon for providing today’s visual aid!

Here’s a great question from Sarah from Mom Balance:

“How do I add a Twitter badge/link to my sidebar”.

Its not hard, Sarah…here are the steps:

1. Depending on what platform you are on (Blogger, WordPress, TypePad), you’ll need to create a new sidebar item or widget (or “gadget” in Blogger; “TypeList” in TypePad).

2. Find a graphic you’d like to use as your link badge. There are a whole bunch if you Google “Twitter bird” or “Twitter badge”. Here are a few…

(Also, you can just use a simple “follow me on Twitter” phrase.)

3. If you decide to use a badge, you will need to follow the same process to upload it to your server as you would any other graphic, so we can point to it in the next step. If you use a service like PhotoBucket to upload images to your blog, do that now, and take note of the URL (location) of the image.

4. Now, in your new sidebar widget/gadget/typelist, insert this code, replacing the text in red with your information:

<center>
<a href=”http://www.twitter.com/yourtwittername“>
<img src=”http://www.yourimagelocation“>
<br>
follow me on Twitter
</a>
</center>

5. Close and save the widget and it should show up looking something like this:

follow me on twitter

6. There is also a way to add a feed widget directly from Twitter that displays your most recent tweets. To add that to a sidebar, follow the directions here.

Not so hard, was it? Any questions?