Before you start, always back up a copy of your template just in case anything goes wrong! You can do this by opening your Blogger dashboard, clicking on
Template >> Backup/Restore >> Download full template. Remember to check out the
first post in this series for some other ways to customise your template!
You can actually customise quite a bit in the Blogger Template Designer (
Template >> Customise), so it's always a good place to start. Under the Advanced tab, click on the
Post Title,
Date Header and
Gadgets sections to do some basic changes. I've changed the font to Georgia, made it size 16, changed the colour of the sidebar titles, and made the background of the date header transparent:
It still looks a bit messy and mismatched, however, so we're now going to edit the CSS code. Go back to the
Template page and click on
Edit HTML. Now we're going to search for the correct CSS tags which control the design of each element. (Handy tip - if you're using Firefox or Chrome as your browser, open your blog and right click on the area you want to customise, then choose
Inspect Element. When you hover over the line of code in the bottom box, it will highlight the corresponding element, and show you the CSS name for it on the right. Have a look at
these screenshots to get a better idea of what I mean!). The post title is controlled by the
h3 tag, so in the
Edit HTML section press ctrl+F and search for h3. You should find the following code (or something similar, depending on which template you're using):
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
Now we can customise the fonts, colours, borders etc. of the post title. There are lots of different things you can change, so I'm just going to quickly explain a few of the ones I use most often. Have a look at the
W3Schools site for a full list of CSS properties. Words in bold are the actual code, italic words are just my descriptions, and should be deleted if you copy and paste the code into your own template:
font-family: "Georgia", serif; Any of the basic fonts e.g. Arial, Tahoma.
font-size: 16px; Can also use a percentage value.
font-weight: bold; The default setting is 'normal'.
font-style: italic; The default setting is 'normal'.
color: #b9a4a5; Text colour, use a colour picker to find the number you need.
text-align: left; Can also be 'right', 'center' or 'justify'.
text-decoration: underline; Default setting is 'none'.
text-transform: uppercase; Can also be 'lowercase' or 'none'.
letter-spacing: 2px; Space between letters, default is 'normal'.
border-bottom: 1px solid #e9e3e3; Can be 'dashed' or 'double', 'top', 'left' etc.
background-color: #e9e3e3; For a solid colour.
background-image: url('PICTUREURL.JPG'); For an image as a background.
I've chosen the attributes I want, entered them into my HTML code under the h3 tag and then pressed save. The code now looks like this, and this is how my new title looks:
h3.post-title, .comments h4 {
margin: .75em 0 0;
text-transform: uppercase;
text-align: center;
font-family: "Georgia", serif;
font-size: 16px;
font-weight: normal;
font-style: italic;
letter-spacing: 2px;
border-bottom: 2px solid #e9e3e3;
color: #b9a4a5;
}
I'm now going to do the same with the date header and sidebar title. Both are controlled by the
h2 tag. I want them to look different however, so I'm going to have to specify the tags in more detail. The existing
h2 tag will specify the sidebar titles, and I'll have to add a new tag called
h2.date-header for the date header (again, you can use the
Inspect Element tool to find out the name of tags).
h2 is the parent element, so everything here will also appear in the
h2.date-header tag unless it is "cancelled out". This is what my code will be and how the page now looks:
h2 {
text-transform: uppercase;
text-align: center;
font-family: "Georgia", serif;
font-size: 16px;
font-weight: normal;
font-style: italic;
letter-spacing: 2px;
border-bottom: 2px solid #e9e3e3;
color: #b9a4a5;
}
h2.date-header {
font-size: 10px;
border-bottom: 0px;
color: #555555;
font-style: normal;
}
Now everything matches and looks nice and neat. Yay! But now I want to move the date header underneath the post title, so for this I'll need to edit the HTML to move the elements around. Make sure you've saved everything you've done so far, then tick the
Expand Widget Templates box at the top left of the window. Then search for the following code, cut it out and paste it temporarily into a notepad document (make sure it is deleted from your HTML):
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/> </h2>
</b:if>
Now search for the following code, and paste the first code directly underneath it (in some templates these codes appear twice, so you may have to do the cutting, deleting and pasting twice):
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Now your date should be underneath your post title, and the finished product should look something like this:
This tutorial ended up being quite long, but I hope you found it useful and easy to understand anyway! Once you get used to the names of CSS properties it becomes much easier to quickly edit parts of your design to make it fit in with the colour scheme/appearance of the rest of your blog. You can use the same principles to edit other parts of your blog's template, for example the post footer which is controlled by the
.post-footer tag. If you have any questions (or suggestions of what to include in my next blog design tips post) then please do get in touch!
Gillian x
