How to Change the Font of the Blog Description in the Blogger Header
Blogger Tips

How to Change the Font of the Blog Description in the Blogger Header


In today's Blogger tutorial I show you step-by-step how to change the font style and font size of the blog description. The blog description is the tag line under the Blog Name that appears in the header section of your Blogger blog. If you do not yet have the blog description for your Blogger blog enabled follow these steps:
  1. From your Blogger dashboard select "Settings" which is located at the bottom of the left menu
  2. Then choose "Basic"
  3. Type your blog description in the description box located below the blog name. (Make sure you choose something that describes what your blog is about)
  4. Save your changes.
  5. Choose View Blog to see the blog description you added now in your blog header.

The main reason you might want to change the font of the default blog description is because the blog description in default Blogger templates is on the small side. Just by increasing it to 16px or even 20px will make a difference. Also you might want to customize the blog description to achieve a particular look. This tutorial will help you customize the blog description to your own individual requirements.

This tutorial assumes you are using a default Blogger template such as Simple or Awesome. If you are using a custom template the template code may be different, however, these instructions should still work in most cases.

Instructions to Change the Font Size and Style of the Blog Description
Unfortunately, the only modification to the blog description Blogger currently allows using the Template Designer is changes to the font color. Changes to the font style and font size of the blog description therefore require a manual insert of a little bit of CSS code into your Blogger template. Follow these steps to change the text style and size in Blogger:

  1. Log in to Blogger and go to the dashboard of your blog.

  2. From the left hand menu select "Template"

  3. On the Templates Page select "Edit HTML" under Live Blog.

  4. From the top menu select "Jump to Widget" and then "Header 1" from the drop down menu.

  5. Find this line:

    <b:widget id='Header1' locked='true' title='Your Blog Name (Header)' type='Header'>...</b:widget>

  6. Now click on the dots that appear between type='Header'> and </b:widget> to expand the section.

  7. You should now see the following code

    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Your Blog Name (Header)' type='Header'>
    <b:includable id='main'>
    <b:includable id='description'>...<b:includable>
    <b:includable id='title'>
    </b:includable>
    </b:widget>
    </b:section>

  8. Click on the dots between <b:includable id='description'> and </b:includable>

  9. Now you will presented with this code:
    <b:includable id='description'>
    <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p> </div>

  10. Find this line:
    <p class='description'><span><data:description/></span></p>

  11. Now to change the blog description to a different font eg default to verdana change the code to the following
    <p class='description' verdana;'><span><data:description/></span></p>

  12. To change the blog description font style to italics change the code to the following
    <p class='description' verdana; font-style: italic;'><span><data:description/></span></p>

  13. To change the font style of your blog description from the default capitalized case to uppercase change the code as follows. Note for lower case use: text-transform: lowercase;
    <p class='description' verdana; font-style: italic; text-transform: uppercase;'><span><data:description/></span></p>

  14. To increase the size of the blog description font from 12px to 16px for example change the code to the following
    <p class='description' verdana; font-size: 16px;'><span><data:description/></span></p>

  15. Putting all the changes together from 11 to 14 would need the following code change
    <p class='description' verdana; font-style: italic; text-transform: uppercase; font-size: 16px;'><span><data:description/></span></p>



Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Change the Blog Description Font Color in Blogger

Copyright Blog Know How 2009. Please do not reproduce any material contained in this blog without the express permission of Blog Know How





- How To Add Static Pages To A Blogger Blog (updated)
A few months ago, Blogger has completely redesigned the section of the Pages, which now, looks very similar to that of the Blogger Posts. Now we will be able to manage the pages with more flexibility. For example, we can publish, delete or change many...

- How To Add Custom Variable Definitions To Blogger
In this post we are going learn about the CSS Variable Definitions for Colors and Fonts that could be found at the top of the style sheet of a Blogger blog. The values for the Variable definitions can be modified directly through the Blogger Template...

- Adding A Meta Description To Blogger
An important part of a good SEO is the implementation of meta tags, which are commonly located in the header of our website, that are being, in the same time, invisible to users visiting the site. Well, to be more succinct, these tags have only one purpose:...

- Blogger Auto Video Template By Webbilgi
Rate this template: Demo: Click here for Demo Source And Designer: Author page Click here to Download Features: Automatic thumbnail creation for Youtube videos.A picture similar to the articles.Custom fields gadget.Simplified design.Dailymotion, metacafe,...

- Add Multi-colored Popular Posts To Blogger
Popular Posts is a widget provided by Blogger that displays the most viewed posts on the blog in the last 7 days, last month and of all time. It has three displaying modes: display title only, display title with image thumbnail or display title along...



Blogger Tips








.