SUBSCRIBE TO GET FREE UPDATES
RSSRSSEmailEmail
       "Keep learning ~~ keep smiling ~~ keep sharing"     

Saturday, December 31, 2011

Change Font Style of Page Tabs easily in Blogger blogs (revisited)

Gosh! I wasn't aware until recently that Blogger's Template Designer has provided a wide variety of web fonts from Google Web Fonts API for the various elements in our blog's template. Previously, we had to be contented with just 7 default ones, namely, Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet and Verdana.

But now, with the long list of font choices made available,  changing the font style and appearance of the page tabs would be a breeze! You will be spoilt with choice!

Screenshot examples of web fonts made available at Blogger Template Designer

No need at all to edit the HTML of our blog's template as previously mentioned at my earlier tutorial or to tackle with custom CSS codes. Thus, I felt it'll be good to present an updated tutorial because there may be many bloggers (like me, previously) who are not aware of these high-quality, open-source web fonts that are offered by Blogger at the Template Designer.


Many thanks to the Blogger Team and the Google Web Fonts Team who have made it so simple and easy for us.

For Blogger blogs, follow these easy steps below on
how to change the font style and appearance of Page Tabs
(by selecting your preferred font family, size, style and color,
at your blog's Template Designer, using Blogger's new user interface)
  1. Log in to your Blogger account.

  2. Click either on Your Blog's Name or on the Dropdown Menu next to the Post List icon and select Template.

    Screenshot to illustrate how to change font style of Page Tabs - Step 2

  3. At the Template page, click the Customize button below the Live on Blog image to go to Template Designer.

    Screenshot to illustrate how to change font style of Page Tabs - Step 3

  4. At the Template Designer page, click Advanced | Tabs Text submenu to choose your preferred font style (so many font choices), to bold or to italicize and to select your font size. Here too, you can change the text color and the color of selected tab. As you make your changes, check out the results in the live preview in the lower pane to help you decide.
    (Note: If you had previously added custom CSS codes related to the above, it has to be removed first to enable this to work.)

    Screenshot to illustrate how to change font style of Page Tabs at Blogger Template Designer - Step 4

  5. Next, change the appearance of the Page Tabs or Pagelist by clicking the Tabs Background submenu. It will enable you to choose your page tabs' background, selected and border colors.

    Screenshot to illustrate how to change the Page Tabs background at Blogger Template Designer - Step 5

  6. When you're finally satisfied with your choices or changes, just click the Apply to Blog orange button to save changes, and the View Blog link to view them or the Back to Blogger link to exit the Template Designer.

That's all, enjoy!

Check out Greenlava's article at Blogger Sentral to get further insights on how to change other elements of the Page Tabs or Pagelist - there's much to learn, especially from the comment section where he gave solutions to problems encountered by some bloggers. God bless you, Greenlava, for your generosity!

  "Keep learning~~keep smiling~~keep sharing"

Jacq's signature
Labels: , ,

26 comments:

  1. AndreaJanuary 4, 2012 at 8:52 AM

    Hi Jacqui, i just saw this blogsite. You have many blogs, i wonder how you were able to manage all of them. I know you are very good with computer techniques, so i think i have to be here often to at least be aware of some possibilities, or maybe ask you questions. I am not good in following computer instructions, as you noticed with my boring blogsite! hahaha. regards.

    ReplyDelete
  2. JacquelineJanuary 6, 2012 at 6:03 PM

    Lovely to see you here, Andrea, and thanks for following... hope you'd not be disappointed. Here, I just share some blogging techniques I've acquired along the way and to keep a record too, being fully aware that they will come in handy should my memory fails.
    Frankly, it's not easy to manage my blogs, though few in number, it's really time consuming and at the expense of my other interests/enjoyment, like visiting other gardening blogs and reading.
    You're too modest... in my opinion, your blog's articles are superb, never boring - these are what draw readers, not the 'decor'.
    Happy learning and blogging, Andrea!

    ReplyDelete
  3. AnonymousJanuary 9, 2012 at 1:50 AM

    Greetings from California.

    Good tip! Thanks :-)

    I am Your Newest Follower.

    I invite you to visit My Blog

    Have a Nice Day :-)

    ReplyDelete
  4. JacquelineJanuary 9, 2012 at 10:58 PM

    Thanks for your encouragement and for following, Ron! I appreciate that very much. You have a lovely day too and all the best for a joyful, successful and healthy new year 2012. God bless. :-)

    ReplyDelete
  5. JLFebruary 20, 2012 at 2:09 AM

    I appreciate your post, and I wish it were this easy for me. However, I've set up a Pages list and can see the links underneath my header. However, when I go into the Advanced menu mentioned here, I do not get an option for Tab Text. Something about my template is not getting "Tab Text" recognized as a customizable element.

    ReplyDelete
    Replies
    1. JacquelineFebruary 24, 2012 at 12:20 AM

      Hi JL! I checked your blogs and noticed that you're still using the old Layout Ttemplate, Minima. You need to upgrade to Blogger Template Designer if you wish to have the latest features and options. If interested, check it out at http://buzz.blogger.com/2010/06/blogger-template-designer-now-available.html. My article at http://jacqsbloggertips.blogspot.com/2010/07/my-designer-blog-with-blogger-template.html may be helpful too.

      Delete
  6. tao.owlApril 21, 2012 at 4:01 AM

    Thank you so much, great post!!

    ReplyDelete
    Replies
    1. JacquelineApril 23, 2012 at 9:58 AM

      Thanks for your positive response, tao.owl! Much appreciated.

      Delete
  7. KatJune 29, 2012 at 8:24 PM

    Love this site..its fab!
    Tho I've noted font options doesn't appear under-advanced/blog description..
    I'm using simple template btw..
    best from blighty!

    ReplyDelete
    Replies
    1. JacquelineJuly 3, 2012 at 9:22 AM

      Thanks Kat... your kind appraisal make my day! :)
      Since font options for blog description is unavailable for Simple Template, then you have to add some CSS codes if you desire to change its font.
      Cheers!

      Delete
  8. BaggieAggieJuly 2, 2012 at 5:49 PM

    Thank you so much! :D

    Rosie. x

    ReplyDelete
  9. The Mad Elvish PoetJuly 14, 2012 at 4:32 AM

    Okay, I know how to do that, but do you know how I can change the text to a font that isn't in the little selector thing? And if I do manage it, will the font show up on other computers, even if they don't have the font installed on their computer?
    Thanks!

    ReplyDelete
  10. Leah (Proctor) PrattAugust 17, 2012 at 9:59 AM

    I am having some trouble...I have successfully changed my blog title fonts and my widget title fonts; however, the problem is this: when you visit my page, you see the fonts scroll through and change from font to font (all the ones I tried previously) until they finally land on the current setting. Help!

    ReplyDelete
    Replies
    1. JacquelineAugust 21, 2012 at 9:38 AM

      Leah Pratt, you've solved your problem, right? I visited your blog and saw that the fonts are static. Anyway, your problem is out of my league and am sorry, I'm unable to assist.

      Delete
  11. MalikAugust 23, 2012 at 7:41 PM

    Thank you friend the tutorial given above is very explanatory.

    ReplyDelete
    Replies
    1. JacquelineAugust 24, 2012 at 4:30 PM

      You're most welcome, Malik! Great to know that you've found the tutorial helpful.

      Delete
  12. HazelAugust 28, 2012 at 5:36 PM

    The tricks is so cute, I want to experiment font color and style of my blog. I can imagine my blog will look so cute than before thanks for sharing us this kind of tricks, this is very helpful.

    Cheers,
    Hazel
    Blogging Profits Unleashed

    ^_^

    ReplyDelete
    Replies
    1. JacquelineAugust 29, 2012 at 11:13 AM

      Great to know the tutorial was helpful. All the best in your experiment, Hazel!

      Delete
  13. AnonymousSeptember 13, 2012 at 1:40 AM

    You are awesome! I followed your font techniques on my blog www.hadapsar.co.cc. Thanks for share

    ReplyDelete
    Replies
    1. JacquelineSeptember 14, 2012 at 4:28 PM

      My pleasure in sharing. I'm delighted to know that you're happy with the results, Imran.

      Delete
  14. Deborah T.October 15, 2012 at 11:37 PM

    Very good tutorial.

    I have discovered, however, that the tabs text resorts to default size and font when placed on the sidebar.

    Just a note.

    Best,
    Deborah

    ReplyDelete
    Replies
    1. JacquelineOctober 17, 2012 at 10:14 AM

      Thanks for the compliment and note, Deborah! Much appreciated.

      Delete
  15. DebarpanOctober 18, 2012 at 3:36 PM

    Thanks for this tutorial.Very helpful.

    ReplyDelete
    Replies
    1. JacquelineOctober 18, 2012 at 4:57 PM

      Thank you for your thanks, Debarpan... great to know it was helpful for you.

      Delete

Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Subscribe to: Post Comments (Atom)
Custom Search