Blog Tutorial: Design From Scratch Part 1 (The Basics)

Hello!

So normally I wouldn't be writing a blog tutorial at this point in time since I'm backlogged on a lot of work lolz but since one of you requested a bunch of from-scratch tutorials, I shall comply. I used to have tutorials on separate stuff like custom fonts, widget aligning and so on, but not one that offers on how to start from a blank blog.

I realize that a lot of people have those generic boring blogs that use pre-made templates that feels kind of impersonal because you can't add your touch to it. + many of you are scared to remake your whole blog BECAUSE WHAT IF I GET THE CODE WRONG AND EVERYTHING CRASHES AAFGHJKL..

...

I thought the same too when I started to scrap my old template and installed the Simple template from Blogger. The whiteness scared the crap out of me. But soon enough I got used to the blankness and see it as an outlet for my creativity yay!

So here's how to get started...this will be the first part of the bunch I will be posting over the few days...I'm still not sure how many so we'll count as we go along. This might be a no-shit kind of post because it's only the very basics, but it helps to set the blog for later stuff. By the way, I'm also a minimalistic person so expect simple (but eye-catching) designs. I don't do (or teach) elaborate stuff.

1. Scrap your template. Install the MOST BASIC template available on Blogger.

•  Go to Blogger > Template > Customise 

• As the above picture, choose the Simple Template, the blank white one with grey/black tones.

2. Background. (Let's skip this part). 

This is only useful if you want to add any patterned background to your blog, which is not recommended as patterns are distracting. To add patterns, choose an image from the big box and make it "tile" so that the patterns repeat themselves. 

We'll talk about adding solid colours later.

3. And now for the "Adjust widths".
One reason why I like my background to be white is that the post area looks BIGGER than it is. Compare these two blogs below:

The white one looks a lot bigger, even though they have the same post width.
As a rule of thumb, I generally like my widths to be 1200 for the entire blog and 300 for the sidebar. It's appropriately large and allows ample space to put photographs and links, as well as some space for the background colour to show if you have one.

4. Layout
It's always a good idea to have a sidebar because you might have extra info or stuff or links that you want permanently on every page, and that's where the sidebar comes in. It's also best to have only one sidebar that is large and clear, rather than two small ones that are cramped into limited screen space. You can pick left or right, whichever looks better to you. Footer rarely comes into play (unless you put a lot of stuff at the bottom of your blog) so I picked only one column.

5. Advanced
Under Advanced you get to customised your fonts and colour choice.
They are almost self-explanatory so just explore and fiddle around, try them out and pick the final look that you prefer.

Backgrounds: This is where you can pick colours. It's always good to make the background white because this means that anything that you put on top will look more vibrant later and your words will pop out more than if you have a different colour. I also like white because this way the background of any images I want to upload later can be white and still blend in. If you have any other colour, you will need the background of, for example, a picture of a flower to be transparent so that it won't have a square white background behind (which is really ugly)

But if you really want some colour, you can always choose a solid colour here. Pastels are also good. Avoid dark colours as they make your blog shady and hard to read. Black background with white words are uncomfortable to the eye.
You can either choose different shades for the outer and main backgrounds, but because I like to give the illusion that the post area is big (as said above), I always like to have them with the SAME colour shade.

^ Like this! Leave the header background to be transparent.

Play around with the rest, they're pretty simple to understand. If you're not finicky about the choice of fonts that I was, you can pick the fonts available. Try to have simple to read fonts for posts and words, while maybe a slightly fancier one for the titles. Since we're going to create our own header and tabs later, we won't be needing fancy fonts for them.

If you ARE finicky, click HERE for a tutorial on how to add other fonts.

For the Date Header, if you don't like a grey box behind, just turn it into whatever colour your background is (green in my example here) or just make it transparent.
Leave the Add CSS box blank, that's for other stuff that you might want to add later. :)

Yay! We're done with the basics. Right now it still looks a little bald and bland, but once we have our header, it's gonna be better! :D The header will come in another post ;)