What I've learnt about blog design

As you probably know, I've recently redesigned my blog. Designing/redesigning a blog is great fun although it can be a confusing and tricky thing to get your head around.

I'm by no means an expert but I've found a few tips and tricks that have been useful to me which I'd like to share. Hopefully you find them a bit helpful.




Apologies if yours is a Wordpress blog or something else. I'm a staunch Blogger fan and only know how to do it through Blogspot so that's what I'll be chatting about today.

The first thing I really wanted to do was to incorporate my artwork into my design. Using all computer generated fonts/designs is lovely, but I wanted it to be more me than that. The problem with using your own art is that you have to try and make it work into the blog... and sometimes formatting and stuff can be an issue.

I'm going to assume you're either using your own artwork (create it on paper and then scan it in) or you already have images you want to use.

Favicons

A favicon is the little image beside your blog's name on the tab in your browser. (see above). Blogger is really annoying and only lets you use a perfectly square image that is below 100 KB in size.
This is all well and good if you know how to make your image a perfect square and below 100 KB in size.
Use a photo editor like iPiccy or Picmonkey. iPiccy is great because it's super easy to use and doesn't have too many of it's best functions as a Premium subscription.

Use the 'crop' tool on whichever photo editor you like. See the two boxes where you can change the 'actual size'? Put in some numbers that are the same, for example 500 x 500. This will give you a perfectly square image. 

 

When you go to save your image, check the file size (highlighted). If it's too big, you change the quality (in iPiccy you drag the little bar to the left). Remember you have to have it under 100 KB. I would keep it pretty close to 100 though or else your picture will look grainy and terrible.

So that's how you make a favicon a square and under 100 KB.

Now let's chat about:

Header Images
Headers are really important because they set the 'theme' or feel of your entire blog. They are what people will see first when they come to your blog. I painted my own header which you can do if you like (I recommend making several so you can choose your favourite) or there are other things you can do like designing a computer graphic with a cool font in a program like Picmonkey or any of the programs really. A quick google will give you a bunch of free choices.
When you upload your image, choose the 'instead of title and description' option, like so:

But you can often come unstuck because the header will be the wrong shape for the blog. This is a problem! You can either change the size of the image or align it how you like. If the size isn't too bad, I recommend aligning it. In my opinion centering the header image 'anchors' the blog and looks better. Here's how to do that.

To center the header image, go to Template > Customize > Advanced > Add CSS and paste the following code into the box:

#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;} 

(Quick screenshot of where to paste the CSS code)
This should center the header nicely. :) A quick Google with give you the code necessary if you want to align it to the right or to the left.

That wasn't too hard, was it! :)

Blog buttons with 'grab' boxes
These are really cool to have. Other bloggers can grab the code and paste it into their blogs and it gives you free advertising. Who doesn't want free advertising??? :P
There are a bunch of tutorials you can find out there (seriously guys, google is your friend!). A nice easy generator that does literally everything for you is found here.
(I highly recommend it, it's fantastic!)
Just follow the prompts and paste the code it gives you into an HTML widget in your sidebar or something similar.
Don't be confused by this:

Your image URL? What image URL?
The image you're using for your blog button, of course! You can make it on your favourite graphic design program (Picmonkey is a good one as I said above) or photo editor. Then, upload it to an image hosting site such as Photobucket.

What you're looking for is the link to the image. Photobucket has this handy little 'share this photo' box on the right where you can grab the various useful links. The Direct link is the one you're looking for. Click on it to copy it. That's what you paste into the 'Your Image URL' field in the button grab code generator.

One more bonus little tip/trick
As you can see I'm not really an expert... Google is definitely my friend when it comes to blog designing! :D One more little thing I've discovered is this.
If you want to put an image into your sidebar, use the image gadget. The fact that you have to provide a title to go with the image has always annoyed me, however.

Did you know that you can just use <!– –> as the title? I didn't until recently. It's amazing. It doesn't show up at all.

Oh, and another little tip I have - I have a blog which I use for experimenting with design. I'd highly recommend making a random blog, marking it 'private' in the settings and then using it to experiment. You get practice doing things like coding and experimenting but you don't have to worry about the public seeing it!

And there we have it! The fruits of my forays into blog design. Great fun. :P

Do you have any blog design tips? 
Does all this talk about html, URLs and favicons confuse you?