Tuesday, October 2, 2012

How to Center a Title in Blogger

As I'm sure you've noticed, I've changed the header on Splash of Ink to a new picture and centered title. I had a difficult time getting the title centered, so I wanted to give you simple instructions to save you some time that will work in case you want to do this on your blog.

What I used:
Google Chrome
Windows Seven (this probably won't make a difference)
Blogger (as of 02/10/2012)

Step One:
Go to your blog on your dashboard and look for the template button on the left hand side. It should take you to the page that looks like this:

Click on "Edit HTML". It bring you to a warning that says not to proceed unless you're advanced. Click proceed. I know it's scary, but you'll be fine. You should come to a screen that looks like the one below. To make it a bit easier, go into your tool bar and click "Find" (or "Search" if you're using IE). Type in "header" and it will highlight all the times the word "header" shows up in the HTML script so you don't have to manually search the script.



Next you want to find the highlighted "header" that says .Header h1 (it's four lines above the red box in the picture below). It will probably be near the top. Your four lines will probably have some different info than mine depending on your font and colour. Right after the last semicolon before the curly bracket (does anyone know the proper name?)start a new line then copy and paste this:
text-align: center;


You're almost finished, just click "Preview" at the bottom right hand corner beside "Save template" and make sure that the blog title is centered. If you put the text in the wrong spot then it might show up as an error, or not have changed at all. If that happens just close the preview screen and click "Clear edits" and start over. Do not save anything without previewing it first. If the preview is right then close the preview screen and click "Save template" and you're done!

It really is quite simple (even know it might seem challenging to root around in the HTML stuff) if you follow the steps. Let me know if you have any questions and what you think of my new header.

What I'm reading: Frankenstein by Mary Shelley
What I'm listening to: Turning Pages by Sleeping At Last
What I'm watching: Hawaii 5-0 (the new one)

5 comments:

  1. I love your new header! Did you take the picture? Just curious. It's gorgeous. :) Ah, HTML... I leave all that stuff to Cait. I've never been the most techno person, but hey. I just click around until things work. Great tutorial, though!

    ReplyDelete
    Replies
    1. Thanks for the compliments!

      And yup, I took that picture on the weekend of our darling Dakota Densmore for a photography assignment. It just so happened that I was getting tired of my old header when I remembered this picture.

      And yes, I generally just click random things until something works, haha.

      Delete
  2. Hey, I recognize that pic! XD The blog looks epic!! Way to go!! :D hey, maybe you'll have to send me one of those pics, and I'll use it and your info to change the look of MY blog. ;)

    ReplyDelete
    Replies
    1. Sure thing Kotes! Thanks for the compliment:) Let me know if you need any help.

      Delete
    2. Np, np! :D and thanks!

      also, these {} are called braces. These [] are brackets and these () are parentheses. ;)

      Delete

Related Posts Plugin for WordPress, Blogger...