>>> How to Download Paid Android Apps for Free   >>> Aakash Tablet Good for Blogger to Blog on The Move   >>> Use Automatic Fixed Read More Jump Break With Thumbnail On Blogger   >>> How To Create A Privacy Policy Page To Comply With AdSense TOS   >>> Solution for Common Problems of "Drop Down Menu" for Blogger Blogspot Blog   >>> Best Tutorial to Make CSS Drop Down Menu for Blogger Blogspot Blog   >>> Add Custom Search Box In Blogger Blogspot   >>> Create a Facebook Fan Page for your Blog   >>> Add a Contact Me Page (Form) To Your Blogger/BlogSpot Blog   >>> Add Cool Subscription Widget to Blogger Blogs   >>> How to Setup Your own Domain to Blogger Blogspot Blog   >>> Add background music to your blog   >>> How to Buy Custom Domain For Your Blogspot Blog Via Blogger   >>> Blog's Definition & History In Short Note   >>> How To Remove Low paying Adsense Ads   >>> How To Host Javascript Or .Js Files On Blogger Itself   >>> Adding Numbered Page Navigation Bar For Blogger Blogspot Blog   >>> How To Change Blogger Mouse Cursors In Easy Way   >>> New Blogger App for mobile phones like iPhone, iPad, iPod Touch   >>> How to Delete or Remove Posts From Blogger Blogspot Blog   >>> How to Remove or Change the Blog Title Border in Blogger (Blogspot) - Minima Template   >>> Add or Change Background Image of a Blogger Template   >>> Add a Post Divider Between Blogger Posts   >>> How to Align and Justify Blogger Posts   >>> Guide to Blogger Blogspot FAQs   >>> How To Delete a Blogger Blogspot Blog   >>> Solution to Missing Add a Gadget Feature in Blogger   >>> Free Essential Tools for a Blogspot Blogger   >>> Add 3 Column or 4 Column Footer to Blogger   >>> Add Email This Post Link to Blogger   >>> How to Change Bullet Point Style in Blogger (Blogspot) Lists   >>> Show Date Above Blogger Post Title   >>> Blogger Post Image Borders Change or Remove   >>> Remove Image Border in Default Blogger Templates Simple and Awesome Inc   >>> How to Add a Table to Blogger Blogspot Post   >>> Choose Your Own Blogger Post Date   >>> How to Add a Subtitle to Blogger Posts   >>> Add Profile Images to Blogger Comments   >>> How to Highlight Author Comments in Blogger Posts   >>> Get More Comments on Your Blogger Blog   >>> Blogger Read More Links in Posts with Jump Breaks Feature   >>> How to Add Internal Links Within Blogger Posts   >>> Add Simple Image Slider to Blogger   >>> Add Printer Button or Link to Blogger Blogspot   >>> Add Outbrain Ratings Widget to Blogger   >>> Hide Remove Navbar from a Blogger Blog   >>> Add a Horizontal Links Menu to Blogger   >>> Add a Welcome Message to Blogger Blog   >>> Avoid 6 Common Blogger Mistakes   >>> Add Twitter Badge Button to Blogger   >>> Add a Twitter Followers Counter to Blogger   >>> Tips to Add a Digg Button to Blogger Blogspot   >>> Free Social Bookmark Buttons for Blogger   >>> Add Social Bookmark Buttons to Blogger   >>> Add a Social Bookmarking Button to Blogger   >>> Add Email Subscription Form and Links to Blogger Blogspot   >>> Add a Recent Comments Feed to Blogger Sidebar   >>> Add a Recent Posts Feed to a Blogger Blog   >>> Add a Categories Section to a Blogger Blog (Blogspot Blog)   >>> Add Affiliate Banner Below Post in Blogger   >>> Add an Affiliate Banner to a Blogger Header   >>> Add an Affiliate Banner to Blogger Sidebar   >>> Place Google Adsense Below Post Title in Blogger   >>> Add Google Adsense Below Blogger Post   >>> Add Feedjit Live Traffic Feed to Blogger   >>> Add Google Analytics to a Blogger Blog   >>> Track Visitors to Your Blogger Blog   >>> Submit Blogger Blog to Blog Directories   >>> Submit Your Blogspot Blog Sitemap to Google   >>> Submit Your Blogspot Sitemap to Yahoo   >>> Add a Blogger Sitemap to MSN Bing Webmaster Tools   >>> Submit a Blogger Sitemap to Major Search Engines   >>> Blogger RSS Feeds and Feedburner   >>> Burn Blogger RSS Feeds at Feedburner   >>> Add a Feedburner FeedFlare to Blogger Feed   >>> How to Create Search Engine Friendly Permalinks for Blogger Posts   >>> Adjust Blogger Title Tags to Improve SEO   >>> Add Amazon Product Links to Blogger Posts   >>> Make Money Add an Amazon Widget to Blogger   >>> Add Chitika Ads to Blogger Blogspot   >>> Earn Money with Chitika and Blogger   >>> 5 Easy Ways to Make Money from Blogger   >>> Make Money Add Banners Ads to Blogger   >>> Blogger Guide to Google Adsense Placement   >>> Add Banner Adsense Above Blogger Header   >>> Bloggers Guide to Google Adsense Myths   >>> Add Google Adsense to Blogger Header   >>> Better Placement of Google Adsense in Blogger   >>> Google Adsense Tips for a Blogger Blog   >>> Add Paypal Donate Button to Blogger   >>> Increase Google Page Rank Blogger Blogspot   >>> Make Money With Adsense Keywords and Blogger   >>> Add Meta Tags to Blogger for Better SEO   >>> Add Breadcrumb Navigation to Blogger Blogspot   >>> Blogger Blogspot SEO Tips and Tricks   >>> 10 Tips to Build Blogger Blogspot Site Traffic   >>> Embed a Comment Form in Your Blogger Posts   >>> List of How Blog Works Blogger Tutorials   >>> Add Missing Embedded Comments Form to Blogger   >>> How to Add Missing Quick Edit Wrench to Blogger      + Grab this Widget on howblogworks

Thursday, September 01, 2011


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.


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;
}





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>



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.


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 How Blog Works Tutorials for Blogger Blogs

No comments:

Post a Comment