Pages

Friday, November 2, 2012

How to center the blog title in blogger?

Hola! While I'm developing my new blog Tet's Food Getaway, I came across several problems or should I say issues on setting the blog up. I forgot how to center the blog title like what I did in here. I visited different tech sites to achieve the perfect answer to my question. I found out that there's more answer to my question and I just chose the best one that fits for my blog. ;)

I listed several steps on how to do it one by one. Try to pick one that will suit in your blog. 

FIRST OPTION
(this is for the new blogger interface)

1. Log in to your blogger account
2. Click Template.
3. Go to your Customize> Advanced > Add CSS
4. Add this code:

#header-inner img {margin: 0 auto !important;}
#header-inner {text-align: Center ;}

5. Click Apply to blog
6. Enjoy!


SECOND OPTION
1. Log in to your blogger account
2. Click Template
3. Go to Edit HTML
4. Push command F (ctrl f) and find this: 

#header-inner {text-align: left ;} --- (or whatever "left" may say)

5. Then change left to center
#header-inner {text-align: Center ;}

6. Save template
7. Enjoy! :)

THIRD OPTION

1. Go to Dashboard > Template > Edit HTML.
2. Look for ]]></b:skin> line in your HTML code
3. Add this code right before it
#header-inner {background-position: center !important; width: 100% !important;}
4. Save template
5. Enjoy! :)

  
Currently, these are just some of the ways that you can use. The first one works really fine with me. Instead of editing the html, it's safer adding the CSS snippet. Just remember to download template first and back up your file just in case you'll use the last two options in case their will be a mistake.

I cannot guarantee the 2nd and 3rd option since I've only done the first one. I added it here in case it would work out on your case my dear readers.  

I hope this helps. I would appreciate your comments if it works on your blog. :)
 

89 comments:

  1. did the first option! weee. thanks for this helpful post :D

    ReplyDelete
  2. Hurray! I tried option #1 and it worked well! Thank you for sharing this really! :)

    ReplyDelete
  3. thanks for sharing this tutorial :)

    ReplyDelete
  4. Thanks for this! Btw, Congrats on your food blog! Looking forward to your foodgasm posts! :)

    ReplyDelete
  5. I was a blogger user before and it helped me used my course in college. Using HTML codes made me realized na "ay may natutunan rin pala ako..." hehehe! But now all my blog are in Wordpress. CSS naman. Alhamdulillah thank God, naka-cope up naman :) Visiting from CommEx 10/30.

    ReplyDelete
  6. thanks for sharing. the first time I edited my nlog, it was tough.

    ReplyDelete
  7. Oh nice, Tet! Will try this one out one of these days. :) Thanks for the tip!

    ReplyDelete
  8. Thanks! When I edit my blog again this will come very handy. :)

    ReplyDelete
  9. This would be really helpful to those who have blogger accounts. Your instructions are easy to understand also that even newbies would not have a hard time trying the options out.

    ReplyDelete
  10. i bookmarked this page so i can have a reference when i change my blog layout. thanks for the post :)

    ReplyDelete
  11. I've tried tips like this but didn't work in my blog. I'm not sure though if they're really the same so I'll give it a shot once again. For now, my title looks like its in the center but actually its not. I just tweaked the size of the header so that it would look like its in the center.

    ReplyDelete
  12. Interesting share. more options for the blog titles!

    ReplyDelete
  13. Oh this is helpful! Thanks for sharing this one :)

    ReplyDelete
  14. thanks for sharing, this will surely help newbie bloggers..

    ReplyDelete
  15. Thanks for the tip. :) My blog's only a month old and i need all the help i can get with the design.

    ReplyDelete
  16. Great to have options... although, I might leave this as it is!

    ReplyDelete
  17. Really helpful post for someone like me who struggles everytime I feel like changing my blog theme :)

    ReplyDelete
  18. Thank you! Super easy and worked perfectly!

    ReplyDelete
  19. Thank you! This was such a help and so easy!

    Laura x

    ReplyDelete
  20. THANK YOU SOOOO MUCH!!! This was such a help!! Excellent!

    ReplyDelete
  21. Such a small but helpful tip!!!! Thank you so much!

    ReplyDelete
  22. That you so much! This was so helpful! I followed the first one! I surely am no techie and this was SUPER helpful! Thanks! Now I know where I'm coming if I ever need tech help!

    ReplyDelete
  23. helpful tip!!!! Thank you so much!

    ReplyDelete
  24. Thanks! This was a wonderful tip! I love how it cleaned up my blog!

    ReplyDelete
  25. it's work! good job! thank you! :D

    ReplyDelete
  26. Thanks for posting this! #1 worked perfectly!

    ReplyDelete
  27. Did the first option and it's work! Thank you so much ! :)

    ReplyDelete
  28. Thank-you. I fathom why blogger can't help like this.

    ReplyDelete
  29. THANKS A MILLION !!! So easy !!!

    ReplyDelete
  30. WOW thank you for this post! I've tried so many ways recommended by other but I just can't seem to get the HTML stuff to work so I tried the first option, it's a million time easier! Followed you! :)

    pinkresistors.blogspot.com

    ReplyDelete
  31. I love your page, its cute and most of all very educational.

    I applied the tutorial and it worked!!

    http://how2getfbcredits.blogspot.com/

    ReplyDelete
  32. I tried the first option and it worked, thank you so much!!!
    www.abeautifulmaison.com

    ReplyDelete
  33. Thank you! Super easy to follow directions! =)

    ReplyDelete
  34. Thank you so much... I just started my blog, trying to figure out how it works.
    http://jojolovesbunny.blogspot.com

    ReplyDelete
  35. I was really battling to center the blog title.
    With your tutorial it's piece of cake.
    Much appreciated :)
    Have nice day ^^

    ReplyDelete
  36. thank , I very interested with your article
    please read also my article
    http://jurussun-tzu.blogspot.com/

    ReplyDelete
  37. best i ever come across.......... thanks dear

    ReplyDelete
  38. Did the first option. THANK YOU SO MUCH!

    ReplyDelete
  39. thank you so much you are indeed a great help!!

    ReplyDelete
  40. not working on my blog techproplus.blogspot.in

    ReplyDelete
  41. Thank you! I used the first option. This really helped.

    ReplyDelete
  42. Thanks for posting! The first option was so easy! :)

    Amy Caitlin xo | cloudcaitlin24.blogspot.com

    ReplyDelete
  43. Like all the others: the first option worked. Thanks!

    ReplyDelete
  44. the first option worked! Thanks so much :) x

    www.pillarbox-post.blogspot.com

    ReplyDelete
  45. I did the first option, thank you so much! Very helpful!

    ReplyDelete
  46. Suerb!!!!!!!!!!!!!!!!!! It encourages me a lot. Thanks to you a lot........

    ReplyDelete
  47. Superb!!!!!!!!!!!! It gives me more encouragement to do more work. Thank you a lot.......

    ReplyDelete
  48. Thank you so much for this great helpful post!!!

    ReplyDelete
  49. Please help me! Last night, I followed the information you provided for option 1 above and my entire header (title, description, etc.) disappeared immediately. Now I have tons of white space above my blog first visible post and there is not title at all. Just the oodles of white space which you have to scroll down through to see my posts. I have had to strip everything down...remove the templates, the third-party background and I still have not been able to fix the problem. I have spent hours trying to correct this. All I wanted was to center my blog title. :(
    I would appreciate any help you can give. I know very little about working with html or codes and I am at my witt's end.
    Amy @ http://www.thegiftedgabber.com/

    ReplyDelete
  50. The first option worked perfectly. Thank you!

    ReplyDelete
  51. OH MY GODNESS YES!!!
    I have been working on an image title and the centering has just perfected it for me thank you!!
    So easy brilliant!!
    Let me know what you think?
    http://www.letstravelthisworldtogether.com/

    ReplyDelete
  52. Thank you so much for this! I tried the first one and it was perfect!

    ReplyDelete
  53. This comment has been removed by the author.

    ReplyDelete
  54. I have been searching for a way to do this for the longest! Thank you, it worked like a charm! Now is there any way to change the font style in the blog description which is located under the title? I am using the "simple" template in blogger and it does not have an option to change the font style.

    ReplyDelete
  55. Thank you so much for this post, it helped.

    ReplyDelete
  56. Thanks very much. I finally did it after following your 1st option.

    ReplyDelete
  57. This helped sooo much & was so easy & simple!

    glamgirl029.blogspot.com

    perfectinparis.blogspot.com

    ReplyDelete
  58. I used option 1 and it worked a treat. Thanks so much!

    ReplyDelete
  59. This helped a lot since I am new to Blogger. Thank you! :)

    ReplyDelete
  60. So extremely helpful, thank you so much!

    ReplyDelete
  61. lovely, thanks! Worked for me like a charm.

    ReplyDelete
  62. YAY great tip! Thanks so much!

    XO

    ReplyDelete
  63. Hi, #1 worked, #3 did not - that b:skin line was not in the html code. :) just wanted to let you know! Thanks for the tips!

    angrysistersnatural.blogspot.com

    ReplyDelete
  64. It worked like a charm! Thank you so much for sharing (I did the first option :0)!

    ReplyDelete
  65. Did the first one, couldn't have been easier! Thanks so much!

    ReplyDelete
  66. It's 2014 and your tutorial is still working. :D

    See it on my blog : http://feedermatrixteaminfinite.blogspot.com

    Thank you very much for this.
    Team Infinite

    ReplyDelete
  67. thank you very much, your article is so helpful! You're the best! ^^

    ReplyDelete
  68. OMG - You are awesome! I tried the first one and it worked perfectly! I have been trying unsuccessfully for about an hour before finding your blog!
    Thank you!!!!
    Laura
    First Grade Spies

    ReplyDelete
  69. Thank you so much!! I used the first option.
    I might add, though, to post the code above anything other code already in the CSS box. I pasted it in below everything at first and it didn't work.
    the writeress || barefoot in the snow

    ReplyDelete
  70. thanks so much this is so helpful. how can I change the font and size?

    ReplyDelete
    Replies
    1. 1. log into Blogger and go to Template
      2. click Customize > Advanced > Blog Title
      3. adjust to preferences :)

      || the writeress || barefoot in the snow ||

      Delete
  71. Such a helpful post! Thank you so much!! :)

    ReplyDelete
  72. First option worked great! Thank you so much.

    ReplyDelete
  73. Worked on my first attempt! Thanks!

    ReplyDelete
  74. Thank you SO much for this. It's been driving me crazy for the longest time. I used Step 1. So simple. Thanks again.

    ReplyDelete
  75. I used the third option, worked great! Thank you!

    ReplyDelete

Leave a LITTLE comment ^o^