Sunday, September 22, 2013

[Blog Design] Basic Coding: How To Center Tabs Text and Gadget Titles




Since I have heard many of my readers don't know much about coding or just not tried much around it. So I will start with the easiest and most basics that I think will be useful for many of you.

I will make a coding post once in a while from now on
So if there is any specific codes you want me to make a post about, you are welcome to tell me about it on my comment box and I will consider over making a post for it on the coming week.

Maybe some of you don't know, but it take less than 3 minutes to make them into the center.


I have seen many blog that have their gadget titles and tabs on the left side instead of in the center, but personally I think it would looks better to make them into the center.


Before 

After

Here is a example of how my blog would looks like if I did the centering codes or not.

Don't you agree that the after one looks better? So if you still have not done it yet, then maybe you should consider about using this code on your blog!

So.... After all this talk... How to do it?


On the page where you edit everything for you blog

1. Click Template

2. Click Customize


After these steps above you will be directed to a page that can do easy editing for your blogs design.

1. Click Advanced

2. Scroll down and Click Add CSS

3. Copy the code from below and past it to the CSS box

Center Tabs Text


Center Widget Titles
DONE!

I hope some of you find this to be useful!

If you used it, let me know how it worked for you!



Follow Me  : Facebook / Twitter / Bloglovin / GFC

23 comments:

  1. Thank you so much! I have been trying to center my tabs for a while now! Your tutorial was the easiest to follow and the least intimidating! :)

    ReplyDelete
  2. Thank you for this Yomi! I just used the center widget code, and it does look better! :D
    I like how you included the code for easy copy pasting. xD

    ReplyDelete
  3. OMG Thank you for sharing!!! Totally needed this @-)

    ninaalvia.blogspot.com

    ReplyDelete
  4. Loved this post! I actually never noticed the whole centering tabs thing until you mentioned it. Gonna try it out on my new blog design! Thanks Yomi! (Told you I'd still read this post. XD)

    Phailee

    ReplyDelete
  5. I actually did this a few days ago! I can't believe it took me that long, but centered makes everything look better! Thanks for sharing this with those who don't know about this already!

    Vanessa | Citron and Guavaberry ʘ‿ʘ | Makeup & Silly things

    ReplyDelete
  6. Thanks a lot! Now i can finally update my blog's code :)

    Liebst, ina

    www.petite-saigon.com

    ReplyDelete
  7. thanks Yomi for this tutorial! I'm looking forward for more! ^_^

    http://ee1988.blogspot.com

    ReplyDelete
  8. thank you Yomi!!!!!!!
    such a simple, easy to follow tutorial ♥ ♥ ♥
    xoxo
    charmaineeeeeeee

    http://charrmyn.blogspot.com.au

    ReplyDelete
  9. I love tutorials like these - so useful, thanks! Also, thanks for your lovely comment on my blog!

    Jo x
    www.woobered.com

    ReplyDelete
  10. perfect tutorial and really helpfully - thank you :)

    like your blog and your design<3
    with love,
    www.throughalltimes.blogspot.de

    ReplyDelete
  11. Very nice tutorial , very helpful..
    Keep in touch,
    www.beingbeautifulandpretty.com
    http://instagram.com/beingbeautifulpooja

    ReplyDelete
  12. you saved alot of people time, when i was younger i also learn html from website by myself
    but it can take quite alots of time to remember those code , luckily for me i remember those important basic code for aligning and such :D

    rainxdropz.blogspot.sg

    ReplyDelete
  13. Hello Ivy! I think your blog is really informative as always! Thanks for sharing, I am a noob when it comes to coding! >.<!!

    ReplyDelete
  14. Oh really helpful post ~ !!!
    And I like the easy way you explained it , thanks for sharing ☆

    Chibilaria ღ Cute Random Lifestyle and Beauty Blog

    ReplyDelete
  15. Even though I'm not blogging on Blogspot anymore. I love to read through Coding solutions for blogspot and stuff. I never knew about this gadget titles problem because I actually never used them on blogger, haha (to be honest I didn't know how... OTL)
    I really look forward to your future posts. :)
    Just found out about your blog and I am highly interested in your beauty reviews! (:
    Following you now <3

    much loves,
    Hong
    sparkingroar.com

    ReplyDelete
  16. Oh really interesting, very helpful!
    xx

    www.sakuranko.com

    ReplyDelete
  17. Thank you so so much! It was such a helpful post. I finally got mine to be at the center.

    Love,
    keryicanboleh.blogspot.com

    ReplyDelete
  18. Oh my gosh I have been wanting to know how to do this for SO LONG!!
    Would you be able to show us how you made your tabs into a super cute little ribbon? ^^

    ♥♥♥ from
    Little Porcelain Princess

    ReplyDelete
    Replies
    1. Thanks, I will consider about it. It's much more difficult than this one and I don't want everyone to have same design as myself. So I will need to figure out how to present it to you guys in a easy way and won't be exactly like what I have =)

      Delete
  19. omigosh this tutorial is so so useful Yomi! Please do have more tutorials ^^


    xx Mandy

    ReplyDelete
  20. Very helpful thank you iv been trying for ages to centre my tabs :)

    ReplyDelete
  21. really helpful, thankyou yomi :)


    愛実
    http://aimiharuna.blogspot.com

    ReplyDelete

I always read all comments, I will reply all comments that have questions!

Tweet me if you want a quick reply
@yomistyle

Related Posts Plugin for WordPress, Blogger...

ShareThis