Adding Subtitles To Your Blog Entries Instructions for Blogger blogs, but should work on Wordpress too

I don't know if you were aware of this, but you can include special tags into a Blogger post title. For instance, you can include a <strong></strong>, <i></i> (italic) tags, etc. Using this info, we can style our blog posts (entries) titles to display a subtitle: text that appears right under the title.

You can achieve this in 2 ways: either by adding some permanent CSS to your blog template, or by adding the CSS directly into a post (this will only work by using Blogger in Draft).

1. Directly into the post

All you have to do is include a piece of code code in the begining of your post (again: by using Blogger in Draft!):

This is the code you need to enter:

<style>.post h1 small {  display: block!important;  font-size: 14px!important;  font-weight: normal!important;}</style>

Depending on your template, you might need to use h2 instead of h1 in the above code.

2. Inserting the code into your Blogger template

Go to your Dasboard > Edit HTML and paste the code below right before the ]]></b:skin> tag:

.post h1 small {  display: block;  font-size: 14px;  font-weight: normal;}

Again: you might need to use "h2" instead of "h1" in the above code, depending on your post template.


For both methods:


Then, write the title as normal, and the text you want to appear under it, between <small></small> tags (like in the image at the begining of method 1). This is how the title should look like:

This is My Title <small>And this text will be displayed right under it</small>

This is how it will look like:

Also, you can play with the font size, weight and add any other CSS style you want.


For a live preview... well, I guess you already saw the title of this post :D. If you are reading this in a feed reader, obviously you need to visit the website to see this CSS hack in action.