Sunday, January 15, 2012

How to Center Blog Title and Description in New Template

If you would like to have your blog title and description in the center, this how to do it. First I will start by showing you how to center the title or heading of your blog.   Login in to Blogger - Dashboard - Design - EDIT HTML. By use of Ctrl + F, find out the following codes


}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top)
$(header.shadow.spread) rgba(0, 0, 0, .2);

}

In the above code, insert the following code immediately below the color code line.

text-align:center;

You new code will look like this:

}

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-align:center;
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top)
$(header.shadow.spread) rgba(0, 0, 0, .2);

}

To center the description, look out for the following codes by use of Ctrl+F;

}

.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);

}

In the above code, insert the following code immediately below the font-size code line;

text-align:center;
Your new code will look like this;

}

.Header .description {
font-size: $(description.text.size);
text-align:center;
color: $(description.text.color);

}

Save your template and check your blog. You title and description are now centered in the blog. If you want to change the alignment, you can just replace text-align:center; with text-align:left or right, depending on what you want.

Related Posts
Duplicate Title or Meta Tag Problems

12 comments:

  1. Thank you for this tip. I used it and it worked out well :)

    ReplyDelete
  2. Welcome. I am glad that it worked out as you expected.

    ReplyDelete
  3. Oh My Gosh. Thank You So Much. This Was The Only Place Where It Worked out.

    ReplyDelete
  4. Thank you thank you.... I used 20 different tips from people and none of them worked... yours was the easiest and worked fine! Again, thank you!!!

    ReplyDelete
    Replies
    1. Welcome. I am always very happy when I see that, my readers are getting information that they want.

      Delete
  5. I can't find that code in my blog. I searched the Edit HTML and it saw the color code but nothing around it looked the same. So then I tried the code anyways and previewed it but it was still the same....??

    ReplyDelete
    Replies
    1. Try locating the code using .Header h1 { and .Header .description {. You should be able to find it.

      Delete
  6. Hallelujah, this is the first code that worked!

    ReplyDelete
  7. Thank you so much! This is the first website whose instructions worked, really appreciate it

    ReplyDelete