I am by no means a blog design expert but I have been designing my own websites and blogs for the past seven or so years, and have picked up a fair bit of HTML and CSS along the way. Once you get started with HTML/CSS it's (usually!) surprisingly easy to understand, but staring at a page of code you don't understand can be very daunting. I thought I would share a few tips for customising Blogger templates that are pretty simple and quick to do but will instantly smarten up your layout.
Before we get started, it's important to remember the difference between HTML and CSS. HTML controls the construction of a webpage whereas CSS determines the design of the page. So, for instance, if you wanted to change the order of elements on the page you would alter the HTML, but if you wanted to change the colour of elements you would alter the CSS. This post will mostly be dealing with CSS. You should also note that everything uses the American spelling, so you'll have to use "color" not "colour" etc!
How to: Remove drop shadows from images

I quite often see people asking this question and it's so easy to fix. To get rid of the annoying grey shadows from around all the images on your blog, open the Blogger dashboard and go to
Template >>
Customise >>
Advanced >>
Add CSS and enter the following code:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
How to: Remove shadow from content box
Blogger's default Simple Template has a shadow surrounding the main content box which can look a bit weird, especially if you're using a white background. To remove it, go to the
Add CSS section (as above) and enter the following code:
.content-outer {
-moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0);
-goog-ms-box-shadow: 0 0 10px ;
box-shadow: 0 0 40px rgba(0, 0, 0, 0);
margin-bottom: 1px;
}
How to: Centre the header image
By default, header images are aligned to the left. If your header is smaller than the full width of your content area, this can be annoying so it usually looks much neater if the image is centred. To do this, simply paste the following code into the
Add CSS section:
#header-inner img {
margin: 0 auto ;
}
How to: Centre the page tabs navigation bar
If your header image is centred, you might also want to centre your page tabs (the navigation links which are often found directly under the header). If you have the 'Pages' widget installed on the Blogger
Layout dashboard, just add the following code to the
Add CSS section to centre the page tabs:
.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; float:none !important;
}
How to: Create a clickable image link
I'm sure most of you will already know how to create a text link, and how to add an image to your page using HTML. To create a clickable image link, all you need to do is combine these two codes by wrapping the link around the image. This can be used for anything e.g. social media buttons, blog sharing buttons (or grab buttons, I'm not sure what the 'proper' name is!), navigation titles etc. Copy the following code and add in your own URLs where appropriate:
<a href="LINK URL"> <img src="PICTURE URL" /> </a>
How to: Turn off Word Verification
This is not so much HTML-related, but it's a question I often see getting asked and it's so easy to fix. Turning off Word Verification makes it much easier for your readers to leave a comment on your blog. To make sure yours is turned off, open the Blogger dashboard and click on
Settings >>
Posts and comments >>
Show word verification and then select "No". Done!
How to: Remove the Blogger Navbar
Since removing the 'Follow' function from the Navbar (the bar right at the top of the page above the header) it has become pretty redundant. Personally, I think most layouts look a lot nicer and cleaner without it. To remove it, open the Blogger dashboard and go to
Layout >>
Navbar (it's in the upper right corner) and click "Off". You can easily turn it back on again here if you decide you want it back at a later date.
I hope you found these little tips useful, they're all pretty simple but by changing these few basic things your layout will instantly look more "finished". I'm planning on doing a series of these Blog Design posts with some more in-depth design tips, so if there's anything you would like to know then please let me know (either by
email,
tweet or leaving a comment) and I will do my best to include it in the next post. My
design shop is still open at the moment if you would like a full redesign, but if you've just got a couple of quick HTML questions please do email me and I'd be happy to help free of charge!
Gillian x