Blog Design Tips #2: Customising Titles and Post Layouts



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

Gillian

Freelance social media and digital marketing consultant with a penchant for writing blog posts, drinking sickly sweet cocktails and exploring the cobbled streets of Edinburgh.

15 Comments

  • Valeria says:

    Hello 🙂 Thank you so much for this tutorial, I'm fairly new to blogger and blog design so it was quite helpful 🙂

    Valeria xx

  • This was a wonderful thread really enjoyed the information !…

  • wow your so clever, I bet this is so easy to do but I just can't figure it out 🙁 x x x.

  • Jackie says:

    That is so neat! I will try it on my new layout I am deaigning. I usually do it the long way and this seems so much easier.

    Jackie
    http://fashionxfairytale.blogspot.com

  • Abbi says:

    Amazing post!!! So detailed and better than anything before – actually works! Fiddling with mine now! xxx

  • Julia simple says:

    very very good information hun. and nice blog here !xxx Very happy to follow you, would be really cool if you can follow back
    http://babyemilycloset.blogspot.co.uk/

  • Cinderella29 says:

    Thank you so much for this. Very helpful, as always.

    xx.

  • Cristina says:

    Very useful! It helped me a lot!! Thank you 🙂

  • Anya says:

    You're amazing! Thank you ! <3

  • Great post thanks for the tips 🙂 follow each other ? Pocockins.blogspot.com Sophie xx

  • Thanks for this Gillian, it really helped me with my blog, especially as I love your layouts!

    I have linked to this post and your 'Blogger Basiscs' in my own blog post on how I created my layout from scratch.

    Whenever you have some time and want to create more layouts, I'll be waiting to commission you for one 🙂

    Love,
    Kimberley xx

  • Heather says:

    hi, my html looks like this for the h3 part:

    all i want to do is align the text into the centre but i don't know where to add the text-align: center; part. do you know?

    x

    • gillian says:

      Your HTML doesn't seem to be showing up in your comment, but you just need to add it into the h3 section of code between the brackets. For example:

      h3.post-title {
      text-align: center;
      }

      Hope that helps!

  • Hi, I tried the move the date under the title but it' not working. I'm unable to find this code. Please help. …
    I tried to paste it above the other code mentioned, but then I was getting to post titles.

    • gillian says:

      Depending on the template you're using, sometimes the code appears 2 or 3 times. Make sure you have moved the correct code each time. (There will also be a "mobile" version of the code which is slightly different – leave this one as it is!)

Leave a Reply

Your email address will not be published.