Alphabeth: design tips

When I first started blogging I knew literally nothing about coding or blog design or any of that. And, when first confronted with one of Blogger's default templates, I had no idea how to manipulate it or transform it into something I felt represented me or what I wanted my blog to be, beyond changing the text font and colour, which really did little to improve the situation. Even once I'd managed to carve out a very basic design, I couldn't figure out how to iron out Blogger's little quirks, like the shadow around my images or the way my post title and date would always be aligned left no matter what I did.

In an attempt to quash my frustration with my blog design, I bought a custom template from a designer which I had for about a year and I suppose just through altering it and changing bits and pieces here and there I finally started to understand a bit more about how Blogger worked. However, it did take me a little while before I felt justified actually spending money on making my blog look a bit nicer, especially because at that stage I didn't know whether I'd actually be in it for the long haul (turns out I was!). If you're like I was and are a bit unsure about whether you want to invest in a designer template, or if you'd rather just design your blog for yourself, I've put together a list of 10 very simple things you can do to improve the look of a Blogger default template, all of which are sort of outside the realm of Blogger's customisation tool which will only get you so far.

A quick explanation of HTML and CSS:

HTML and CSS are both coding languages that make up and support different elements of a website or page.
HTML makes up the main building blocks of the site and provides the website with instructions on how it should look. Your blog's HTML can be found in Template > Edit HTML on your Blogger dashboard.

CSS deals with the stylistic elements of the site, dictating the site's design and aesthetics. Things like fonts, margins, colours, heights and widths can be easily edited using CSS. You can edit your blog's CSS in Template > Customise > Advanced > Add CSS.

On a website, the CSS code is linked to parts of the HTML and the two work hand in hand to create what you see on the page.

1. Create a header image

Your header is the first thing your readers will see when they visit your site and so I can't stress the importance of a clear, attractive header that represents the theme of your blog and content well!

Creating a header image as opposed to just using the default text header on Blogger can give you a lot more room to be creative and have control over the font, colour, size etc. You don't have to have Photoshop or be a total design whiz to come out with a great header. Pixlr.com/editor is an excellent Photoshop alternative and Picmonkey.com is another great easy-to-use site.

The recommended size of a Blogger header is (w) 900px x (h) 400px, though I normally end up cropping the height down to about 250px when I design custom headers. I'd recommend you work with a transparent background and save it in a .png format which is designed to support images that are to be displayed on the internet and allows you to save an image on a transparent background.

To upload your header image go to your Blogger dashboard and then click on 'Layout' in the sidebar and then the under bar saying 'Header' click 'edit' in the bottom right-hand corner. In the new window that appears check the box next to 'Instead of Title and Description' under the 'Placement' section and also make sure that the box beside 'Shrink to fit' is not checked. Upload your header image, hit 'save' and that will be your header in place.

2. Centre your blog header

If you've uploaded a header image that is 900px in width, it's likely that the content of your header will be a little more centred than it was before but you'll still want to reinforce its position in your blog's code. Note that this method will centre both text and image headers and will keep either in place if you decide to switch between them.

Click on 'Template' in the sidebar of your Blogger dashboard, and then click on 'Customise' and 'Advanced'. In the advanced section of the Blogger customisation tool you need to scroll down to the bottom of the list and click on 'Add CSS', copy and paste the following and then hit 'enter' to make it appear in the preview:

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

#header-inner {
text-align:center !important;
}

If you're happy click on 'Apply to Blog' to save your changes.

3. Centre your post title and date

It's entirely up to whether you'd like your post title and date centred, it's a design preference really, though if you've ever wondered how you get them to sit in the centre, this is how you do it! Similar to how you centre your blog header, in Template > Customise > Advanced > Add CSS, underneath where you've pasted the code to centre your header add:

.post-title { text-align: center; }
.date-header { text-align: center}

Similarly, if you want to align them to the left of your post, simply replace 'center' with 'left' in the code above.

If you're using Blogger's white 'Simple' template you can also remove the grey background behind the date header by going to Customise > Advanced > Date header and changing the background to transparent and the text to a colour of your choice.

4. Centre your sidebar headers

Again in the 'Add CSS' section, copy and paste the following under the code you have so far:

.sidebar h2 {

text-align: center;

}

You can customise the font, size and colour of your sidebar headers in Customise > Advanced > Gadgets.

5. Centre your tabs and remove the border around them

Centre your tabs

In 'Add CSS' enter:

.PageList {
text-align:center !important;
}

.PageList li {
display:inline !important; float:none !important;
}

Hit 'enter' to see your changes in the preview.

Remove the borders

Again, add the following into your CSS:

.tabs-inner .widget li a, .tabs-inner .widget ul, .tabs-inner .section:first-child ul {border:none;}

If you want to make your tab backgrounds transparent the easiest way is to go to Customise > Advanced > Tabs Background and change both to transparent.

6. Remove the border and shadow around your images.

You'll have noticed that all default Blogger templates automatically place a border and shadow around your images. This used to annoy me so much, especially when I was trying to create a profile in my sidebar and Blogger kept putting a square border around my circular image! Thankfully it's an easy fix, you just go to Template > Customise > Advanced > Add CSS and insert the following under your existing code:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
padding: 0px !important;
border: 0px !important;
background: none !important;
-goog-ms-box-shadow: 0px 0px 0px transparent !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important; }

7. Remove the Blogger navbar

All Blogger templates include a Blogger navigation bar by default which appears at the top of your blog and contains various tools such as a shortcut to create a new post and access to Blogger's design area. It also allows readers to surf through other Blogger sites. A useful feature, though unfortunately it appears to everyone who visits your blog and in a way takes away from the sense of your blog as its own entity separate from Blogger. It's also a little unsightly.

To remove it go to your Blogger dashboard and click on 'Layout' in the sidebar. You'll see the the navbar along the top of your layout. Click 'edit' in the bottom right-hand corner, scroll to the bottom of the list of options and set it to 'off'.

8. Add your own favicon

Your favicon is the tiny image that appears in your blog's tab on an internet browser. Blogger templates come with the standard Blogger favicon that you can then change to an image that you feel represents your blog well- maybe your header, button or a part of your header- though it needs to be able to work as a square thumbnail.

If you're creating your favicon from scratch, try to design it as a relatively small image, say 50px x 50px, so that eventually making it smaller won't have too much of an adverse effect on the image quality. When you have your final design, on your Blogger dashboard go to 'Layout' and the option to edit your favicon will be in the top right-hand corner. Upload your image and save it.

9. Adjust your widths

For some reason, Blogger templates aren't very wide to begin with. Increasing the width of your blog and making the most of the space you have on your page not only gives you room to fit in more content, for example, by allowing you to upload larger images without them beginning to overlap into your sidebar, but it also is a lot more pleasing to the eyes of your readers.

To adjust the width of your blog go to Template > Customise > Adjust widths, and play around with the widths of both your main content and your sidebar.

10. Change your link colours

This is something very basic and again is up to your own personal preference but I do think changing the colour of the links from the standard "Blogger Blue" that comes with the white Simple template can really help to transform the look of your blog.

To change your link colours go to Template > Customise > Advanced > Links. I'd personally recommend you make the 'link colour' and 'visited colour' the same and use another complementary colour for your 'hover colour'.

I just want to reiterate the fact that these are all just suggestions of ways you can customise your blog and make it more your own. Please don't feel like you have to apply any of these if you don't want to! Though I do hope someone finds them helpful.

Hope you're having a brilliant weekend!