Skip to main content

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

Image
By Admin
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' style='font-family: 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' style='font-family: 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' style='font-family: 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' style='font-family: 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' style='font-family: 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
Labels:

Comments

Post a Comment

Popular posts from this blog

Panjang Maksimum Deskripsi Video Youtube dan Pesan Kesalahan

By Admin
Ada banyak diskusi di sekitar tentang menambahkan Caption teks ke deskripsi video YouTube Anda. YouTube secara otomatis akan mengkonversi konten audio dari streaming video Anda ke teks biasa - sehingga dapat digunakan untuk teks tertutup. Anda tentu saja harus cek dan edit ini sebagai hasil yang sedikit aneh dari waktu ke waktu! Anda kemudian dapat menambahkan teks keterangan ini untuk deskripsi video YouTube Anda. Sehingga akan diindeks juga oleh mesin pencari. Masalahnya adalah bahwa itu sangat mudah untuk menemukan kesalahan pada YouTube di mana dikatakan bahwa pengaturan video Anda tidak bisa diselamatkan alasan adalah bahwa baik deskripsi terlalu panjang atau berisi karakter ILLEGAL.  Ini adalah pesan kesalahan yang sangat tidak membantu. Oke. YouTube Anda memberitahu bahwa deskripsi terlalu panjang? Atau apakah itu mengandung karakter ilegal? Atau keduanya? Setelah mengalami masalah ini beberapa kali, saya mengatur tentang bereksperimen dan melihat apa yang sejauh des...
Post a Comment
Read more

How to Add Internal Links Within Blogger Posts

By Admin
In the Blogger tutorial I discuss how to add internal links within your Blogger posts (Blogspot posts) to point to either another section within the same post or to another post. There are lots of times when you may want to direct a reader to a different part of your Blogger post depending on what their needs and interests are. Or you might want to alert the visitor to something significant in a related post. In this article I will show how to make use of internal links both within posts and in Blogger generally. Why bother with internal linking you may be wondering? Well the answer is to improve SEO. Blogs with a good internal linking structure will fare better than blogs that don't link posts. Plus you will be creating an aid to navigation for your reader. On longer posts jumps links to different sections within your post or to other posts mean readers can quickly find the information they are looking for. How to Create Internal Links To Sections Within the Same Blogger Posts How...
2 comments
Read more

How to Add a Subtitle to Blogger Posts

By Admin
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...
Post a Comment
Read more