Thursday, March 26, 2009

How to Add a Subtitle to Blogger Posts

This Blogger tutorial shows you how to easily and quickly add a subtitle to your Blogger posts (Blogspot posts) so that both search engines and readers will have more information about your post. I also discuss the benefits of adding subtitles to Blogger articles. This is an easy tweak to your Blogger blog that anyone can carry out in a couple of minutes.

blogger Blog with Subtitle Under Post for Emphasis and Search Engine Friendliness

Benefits of Using Subtitles in Posts
Adding a subtitle which appears below the title of your post can be both eye catching and informative. For instance a titling schema for this post could be:

Title: Add a Subtitle to a Blogger Blog

Subtitle: Make Your Posts More Search Engine Friendly and User Friendly

If you craft your titles and subtitles carefully you will encourage more targeted readers of your blog as they will be able to see at a glance what your post is about rather than reading the whole article. Your traffic therefore might be slightly less but they will be far more targeted to the content of your site resulting in a lower bounce rate.

If the subtitle you choose for your Blogger post is keyword rich then you are also improving your chances of gaining a higher position in search engine result pages because search engines give added weight to headings and to text early on in an article. By adding a subtitle to a Blogger post you have a SEO tool which if used effectively could result in more visitors finding your site because of higher keyword density.

You can of course add a subtitle manually to each post and format it everytime. The advantage of this method over doing it manually though is that all the formatting is in the stylesheet section of your template so you only have to change the colour scheme and font variables in one location and Blogger will look after the rest. Any change will be reflected in each and every post that has the subtitle <div> tags.


How to Add a Subtitle to Blogger Posts
This tutorial guides you through the steps to take to add a subtitle to your Blogger blog. The trick requires only takes a few short minutes and requires only a small snippet of code to be added to your template. Provided the instructions are followed anyone can do this including beginners and new bloggers. Interestingly it is not widely known or written about in technical blogs that a subtitle can be added to your Blogger Blogspot blog posts yet the advantages are considerable.

1. Log in to Blogger and navigate to Design > Edit HTML

2. Find the </b:skin> tag in your template. If you are have difficulty finding it use CTRL + F to bring up the Blogger toolbar at the bottom of your blog and enter the tag </b:skin> into the search box on the toolbar

3. Copy and paste the code below into your template making sure that it appears before the </b:skin> closing tag.

.subtitle{
font-family:Trebuchet MS',Verdana,Arial,Sans-serif;
font-size:15px;
color: #ca1717;
line-height:20px;
}

Add a Subtitle to a Blogger post - edit template and customise if desired

Update November 14, 2010. This code inserts a subtitle in red. You will need to change this color to match your template. See later in this post for information on how to add styling or change the color of the subtitle. If you wish to use a known variable as shown in the above image you can. color: $dateheadercolor; could be used for example provided this variable had already been declared in the variables section of the template.

4. Save Template

5. Go to the post you wish to add a subtitle to by clicking on the Posting tab and then the Edit Posts link.

6. Copy and paste the following code into your post ahead of any other text.

<div class="subtitle">Subtitle Text. Please Substitute for your own text</div>

Add a Subtitle to a Blogger Post

7. Substitute your own text between the <div> tags

8. Navigate to Settings > Formatting and under the last option Post Template enter the following into the box:

<div class="subtitle"></div>

This will mean that every time you create a post you will have the tags appear automatically. All you need do is place the text of your subtitle between the tags. If you don't want to use a subtitle for a particular post just delete the tags.

9. Save Changes to Post and click on View Blog to admire your new subtitle.

blogger Blog with Subtitle Under Post for Emphasis and Search Engine Friendliness

Customizing the CSS Styling of a Blogger Subtitle
It is easy to customize your subtitle for a different font type, color and size. Just change the code you added before the </b:skin> tag. If you want a specific color for instance you could change the color I have chosen for another color, increase the font size, and change the font face to Times Roman for instance. Thus your code would become something like this:


.subtitle{

font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
color:#ff6600;
line-height:20px;


This Blogger tutorial has shown you how to add a subtitle to your Blogger posts (Blogspot posts) quickly and easily. I have discussed the benefits of inserting a subtitle feature on a Blogger blog including how this might assist search engines to correctly index your blog articles. I have also shown you how to customize your subtitle to your own individual requirements using CSS styling


Related Posts
List of Blog Know How Tutorials for Blogger Blogs



Subscribe to Blog Know How by Email

14 comments:

blog for beginners said...

i've found good artiles in your site,but unfortunately i don't like your blog template....can you consider this....

Your best friend...ramesh

The Wizz said...

Ramesh thanks for your comments about my template. I totally agree with you that this current template is not the best but I have deliberately worked with the Rounders template to show beginners that it can be developed and that they don't necessarily need to add a third party template to their blog. In fact my advice would be to spend your energy building up your blog rather than spending hours on fixes to your template. I have been testing a lot of custom templates lately with a view to changing the template for blog know how but most of them fail the browser tests or have some other problem with them. As soon as I find a suitable replacement I will change the template for a new improved one. Watch this space because I will be upgrading it even if I have to write my own template. For best Blogger templates and themes why not try my blog Top Free Blogger Templates

VoIP for Bangladesh said...

I hade the same feeling as Ramesh, but your explanation for not changing your template impressed me. You are right I have been spending hours and hour to change and tuning my template for VoIP for Bangladesh blog at http://voipforbangladesh.blogspot.com. Now it is optimized for search engine, at least I would say the blog is attracting readers.

Your blog and tips (know how) helped me a lot to tuning up my blog. I will implement this one too to make a subtitle for my blog, I need targetted traffic through Google. But my earning is still low, could you please suggest any for my blog. Any of your suggestions would be highly appreciated.

Thanks
Siraj

The Wizz said...

Hi Siraj. I have been building my own template based on a default Blogger template to reduce compatibility issues. I will making the changeover before the end of the month I hope so keep a lookout for this.

As to your question about targetting Google traffic make sure you use tags for your blog articles that correspond to keywords. Have you read my articles about Adsense, keywords and building traffic for a Blogger blog:

10 Tips to Build Blogger Traffic
Blogger Guide to Google Adsense Myths
Submit Your Blogger Blog to Directories
Make Money with Blogger by Optimizing Adsense Keywords

B n D said...

Your site is one of the best of help where i can get...... i refer for all the tips, tricks and tweaks at ur Blog keep up the go0d work :)

The Wizz said...

B n D thank you for this high praise. I am so glad you are finding my blog useful. It makes all the hard work worthwhile.

Brenda said...

Thanks for posting such great information on your site. I have been referencing it extensively and have found it very easy to implement on my own blog. I am so excited to see this post regarding subtitles, but am running into some trouble. On both steps 6. and 8. I am receiving error messages reading: closing tag has no matching opening tag for DIV. Can you help me fix this? I'm running Mozilla Firefox on XP.

The Wizz said...

Hi Brenda. I have just updated this article and hopefully fixed the offending html entities that some browsers have trouble with. Fingers crossed that the code in steps 6 and 8 is now more browser friendly. If not please come back to me and I will email the code to you

Janardhan Raju said...

Hi Bro..
Thanks for your Information...
Lot of useful information i found.

Great blog...

This is my blog

www.123friendz.blogspot.com having free softwares...

Can u suggest any modifications to improve traffic.....

The Wizz said...

Hi Janardhan. You are prolific in your posting which is great. Definitely one of the best ways to get regular traffic. You seem like you are covering the bases. One thing though is your blog load time. This is something I too am struggling with as my blog increases in size and I add extra gadgets. There is no bigger turn off for the impatient surfer than sites that are slow to load. Let's face it we work hard to reel visitors in and we don't want to lose them before they actually see our site and what we have to offer. Good luck!

vanessa leete said...

Hi
You have a very good tutorial, what I am enquirying about is how do I add extra pages to a blog, I have dating website and safe dating blog, but I would like to add extra pages to my blog and do not know how to.

Regards
Vanessa

The Wizz said...

Hi Vanessa. A blog works a bit differently from a static website where you just add pages. Each time you write an article on a blog it is given its own page. So every article has its own page even though you have quite a group of articles appearing together on the home page. What are you trying to achieve with the new pages? More articles or links like about and contact?

nizam khan said...

Very well explained .

I will try it on my Blog

http://liveingreenworld.blogspot.com/

Thank you.

AppReleases said...

thanks man it worked for me

Post a Comment