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. :)
 

71 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 friend..helps me a lot...

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

    ReplyDelete
  31. 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
  32. I love your page, its cute and most of all very educational.

    I applied the tutorial and it worked!!

    http://how2getfbcredits.blogspot.com/

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

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

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

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

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

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

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

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

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

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

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

    Amy Caitlin xo | cloudcaitlin24.blogspot.com

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

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

    www.pillarbox-post.blogspot.com

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

    ReplyDelete
  47. this is very helpful! thanks!

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

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

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

    ReplyDelete
  51. 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
  52. The first option worked perfectly. Thank you!

    ReplyDelete
  53. 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
  54. Thank you so much for this! I tried the first one and it was perfect!

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

    ReplyDelete
  56. 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
  57. Thank you so much for this post, it helped.

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

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

    glamgirl029.blogspot.com

    perfectinparis.blogspot.com

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

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

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

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

    ReplyDelete

Leave a LITTLE comment ^o^

Related Posts Plugin for WordPress, Blogger...