Public Service Announcement 1.03

And in this episode, we'll talk about how to change the colors and fonts on your Blogger template. (Are you Wordpress peeps ready to puke yet? No? I'll work on that.)

There are two ways to edit colors and fonts: the really easy way, and the not really, but still easy way. The Really Easy Way is to use the Fonts and Colors tab in Blogger. It's not active with all of the templates, but I know that it is there for the Minimas and Motos of the world (again, you are looking at a tweaked Mr. Moto). You just select the attribute you want to change in the list, then select the color that you want used for it. So if you want a black background with white text, you would set the Main Background Color to black and the Text Color to white. Play around for a bit, preview your results often, and you'll be off and running.

The Still Easy Way involves editing the html. I discovered that there was no way to change the sides on Mr. Moto without going in to the html. I was stuck with gray, which was fine for a while, but I eventually got bored of it. I'm only going to address Mr. Moto from here on out (because I just edited it and it's still fresh in my head), but the same principals apply to any template.

To change the gray sides to a different color, find this section in the html:

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #bba url(http://www.blogblog.com/moto_mr/outerwrap.gif) top center repeat-y;
font-size: small;

That line about background? That's how Blogger knows what color/image to put there. Let's say you want to have red on the sides. You would change the above to look like this:

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #E42217 top center repeat-y;
font-size: small;

And, of course, now you're wanting to know how I knew to type "#E42217" up there. There are tons of websites dedicated to the world of html colors. I happen to like this one. I just looked down the page until I found a red I liked, then copied and pasted the code for it.

If you decide to use Mr. Moto, the gray bar between your header and blog text may also need changed. To do that, look for this area in the html:

#header-wrapper {
background: #bba url(http://www.blogblog.com/moto_mr/headbotborder.gif) bottom $startSide repeat-x;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 15px;
padding-$startSide: 0;
border: 0;

Again, you want to change the background to whatever color it is that you want. So, if you want it to be yellow, you'll change it to something like this:

#header-wrapper {
background: #FFFF00 bottom $startSide repeat-x;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 15px;
padding-$startSide: 0;
border: 0;

I personally think that the hardest part about editing html colors is trying to figure out what color I want to use. Like the purple on the sides right now? I'm not sure that I love it. But I liked it better than the 418 other colors I tried out. Of course, that's one of the good things about editing the colors, if you don't like something, just click "Clear Edits" and pretend like you never screwed it up in the first place.

Go forth, Blogger peeps, and purdify your blogs.

(In the interest of full disclosure, I will admit that I changed one other thing about Mr. Moto. I thought the text areas were too narrow, so I widened them a little bit. If you want to do the same, email me and I'll give you instructions. I found the instructions using a Google search, but the ones I found were freakin' confusing.)

Public Service Announcement 1.02

It wasn't part of Questionfest 2008, but Military Mom asked if I made the new header myself. That led me to thinking that some of y'all might appreciate a little lesson on how to purdy up your Blogger templates (sorry Wordpress peeps, you're on your own until I figure out that drama for myself, which has been an ongoing project for months). I can do that. So, lesson one will be how to make and upload your own header to Blogger.

First of all, you need to use a Blogger template that allows custom headers. I've never played with all of them to find out each one's status, but I do know that the Minimas, Motos, Rounders, and Tic Tacs are all OK. You are currently looking at a tweaked version of Mr. Moto.

Next, you need to create your header. However, you can save yourself a lot of grief if you find out how wide your header can be before you go get funky with graphics. To do that, go to the Edit HTML screen in Blogger (it's right next to where you go to pick a Template). You're not going to edit anything for this, it's just really smart to look at the code. I've found that while Blogger is supposed to autofix the header width, it does a crap job of it. You want to look for the section that talks about Outer Wrappers. There you will find the width. It'll say something like 682px (px stands for pixels--you don't really need to know what it means because photo editing software usually works in pixels anyway). Write that number down.

Next, you need some software to edit your photo or create a graphic in. While PhotoShop is fantabulous, I'm sure I'm not the only one that doesn't have several hundred dollars laying around so that they can buy it. Instead, I use two free programs. One is called PhotoFiltre. You can download the older version (right now it's 6.3.0) of it for free, and it is basically a knockoff of PhotoShop. It's a French program, so the help files are pretty useless, but it's still worth five minutes of your time to download it. You can do all sorts of photo editing and graphics creation using it. I created probably 70% of the new header using it, including the polka dot background.

The other program that I use is called Picnik. It's a web-based program that will allow you to edit a photo then save it to your hard drive, Photobucket, Facebook, etc. There are two levels of Picnik, free and Premium. The difference is that for $25 per year, you can have access to a ton more fonts and effects. I got by with the free version until recently when I suddenly just had to have a particular font. Since then I've been going crazy with Premium features, so it was worth the upgrade for me (and still way cheaper than buying PhotoShop). I think Picnik is real easy to use, even if you are technologically challenged.

Regardless of how you do it, purdy up an image for yourself, then make sure the width is exactly the same as that number you wrote down earlier. It seems that it can be whatever height you want. Although, I will say that really tall images do force your readers to scroll a lot to read your content, so you might not want to get too carried away. Once you are happy with the image, log into Blogger.

To upload your new header:

1. Go to Layout.
2. There's an area near the top of the screen that says "Header." Click the Edit link.
3. You can upload your image from the web or from your hard drive. I think it's easier to get it from your hard drive. Click Browse, search and destroy, and select your fancy new image.
4. Click the Instead of Title and Description radio button. (Side note: You're better off using Picnik to add the title of your blog to your image than you are trying to get Blogger to put the text in the right spot by itself. You can't control where Blogger puts the text, as far as I know.)
5. Click the Save Changes button.

Ta-dah! You have a new header. Next up, changing the background and text on your Blogger template.

Public Service Announcement 1.01

Ask and ye shall recieve--Becoming Mommy, Lizzy in the Burbs, Jenny H, and The Red Door all wanted to know how to find out what Google searches point to your blog. I know of three reasonably good (and FREE!) ways to start finding out that bit of information:

1. Sitemeter--Just go their site, open a free account, and add the code to your blog. Sitemeter will show you how people find your blog (referrals), where they are located (OK, technically it shows you where their IP address is registered which can be ALTOGETHER different from where they actually are, but still), and how many visits and page views you had in a specified time period. Just for the sake of being thorough, a visit is supposed to be the number of unique people that visited your blog. A page view is the number of pages that were viewed. So if one person visits your blog but reads three different pages, it will show one visit and three page views. Sitemeter is what I have used since I made my blog fully public back in September and while I have found that its not the best alternative, I keep using it so that I can see the monthly history. One downfall to Sitemeter is that the free account will only hold 100 referrals. That may seem like a lot, but you find that they disappear way too soon when you want to go back and look at one. Another drawback is that its reporting is not as good as some of the other choices out there.

2. Statcounter--Same thing as Sitemeter, except that I think the reports are a little bit better. I'm a fan of the Keyword Analysis screen because it shows you your most recent search engine hits in a list. the Cames From screen is also handy because it shows you all of the referring links for your blog. For example, I can see that 44 of the last 500 people that came to my blog came from my Blogger About Me screen. I would think it's safe to assume those are all people following comments. The free account is limited to storing your last 500 entries, which is, of course, five times as many as Sitemeter.

3. Google Analytics--I just added Google Analytics a week ago, and I think it's my favorite. The reports are really fun (In part because of all the pretty pictures. What can I say? I'm easily amused by pretty colors.). It shows all of the same information as the other tools. Since I just started using it, I don't know how much history it holds, but I suspect it's quite a bit.

Right now I have all three of the stat counter utilities running on burghbaby. If I had to jut pick one to use, it would probably be Statcounter, but only because I haven't been using Google Analytics long enough to decide if it is truly better than Statcounter, of if I've just been wooed by pie charts. I strongly suspect that I'm going to find that Google Analytics is better. Regardless, I'm pretty sure all three are female, because they can't seem to agree on the number of page views I've had in the past 24 hours.

More PSAs to come, including how to customize a Blogger template to make it less fugly.