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

Monday, July 5, 2010

Change font style/size of Pages Tabs in Blogger blogs

I'm extremely delighted to have discovered how to customize the font for my Pages tabs to make it more interesting and lively!

Screen shots showing the 'before and after changes' of Pages Tabs

Just learnt how to do that when I was preparing for my previous article, Create Pages in Blogger Blogs with ease, to share in this blog. That's why I've always found it so rewarding to share my knowledge, simply because in giving I receive much more! ;-)

Thanks so much to Aneesh of BloggerPlugins (comment dated March 27 2010 is referred) and W3Schools on CSS styling fonts who provided clues that aided me in getting the results that I've wanted for a long time. Yippee...I've managed to style the fonts of my header's title and description too in the process! :-)

Okay, enough of my joy and back to serious sharing on:

how to change the font of Page Tabs in Blogger Blogs
(by restyling the font family, size, boldness, style and color,
to name a few, using the CSS font properties)
  1. For this, you'll need to edit your blog's html - go to Dashboard | Design (previously Layout) | Edit HTML. Before editing, it's advisable to always do a backup, by clicking Download Full Template.

  2. Next, use the browser's search function (press Ctrl+F keys) to find this code: ]]></b:skin>

  3. Then, insert above it the following CSS (cascading style sheet) font properties:

    .PageList li a {
    font-family:"Lucida Handwriting", cursive;
    font-size:130%;
    font-weight:bold;
    font-style:italic;
    color:red;
    }


    (Note: the above is just an example which I've experimented, you can change the values of the font properties according to your preference. You can refer to W3Schools and W3C on styling fonts and colours, or google for more)

  4. Finally, click Preview to see your changes. If satisfied, hit Save Template and you're done! Easy, right?
Template's screen shot showing how to insert CSS text to change the Pages tabs's font

Keep learning~~keep smiling~~keep sharing!

Update: December 31 2011
An easier way to change the font style and appearance of Page Tabs is via Blogger Template Designer. Check out my updated tutorial here.

52 comments:

  1. Thanks, Avinash...appreciate you taking a moment to pen your thoughts! :)

    ReplyDelete
  2. http://ramasamydemo.blogspot.com/

    see this...this is a test bog of me...using your code i changed the font size and colour of pages. but there is a problem. i'm using simple ii template released in 2006 by jason sutter. for this template pages appear vertically. how to set them horizontally one after the other?

    ReplyDelete
  3. oh madam, i changed vertical pages horizontally now...so, i dont need that help from you...but i want another help now. how to embed search box within header? that is i want to place search box within header at the right side of it..how to do it?

    ReplyDelete
  4. Sorry, thandapayal, I'm unable to help you with regards to placing a search box within the header as I don't know how to. Tutorials in this blog focus on what I've learnt thus far as stated at my blog's description. So please do a search at my archives for related articles that you'd like to try and if no results are available, then do a google search for your enquiries.

    Frankly, I'm no expert at all, just learning like you, but sharing them here whenever I learn something new or come across some technical knowledge acquired in the process.

    ReplyDelete
  5. I looked all over google for a way to change my page tabs font to a handwriting font I had saved on my computer. Thank you so much for providing the coding and instructions. It worked beautifully.

    ReplyDelete
  6. The pleasure is all mine, Robyn! Thanks for your appreciation.

    ReplyDelete
  7. You're very welcome, UVFC! Thanks for comment.

    ReplyDelete
  8. Your blog is a wonderful resource = please keep up the good work and thank you!

    ReplyDelete
  9. Thanks for your feedback and encouragement, Sian! Much appreciated.

    ReplyDelete
  10. It works. Thank you so much :-) Any idea how I can leave more blank space between the pages tabs and my first blog post? Also, do you know how to put the pages tabs in the center of the page? I tried with 'page-align: center;', but that didn't work.

    ReplyDelete
  11. You're most welcome, Vanessa.

    Re your enquiries, go to Design > Template Designer > Advanced > Add CSS and add the following code snippets:

    1) To increase height between the PageList and Blog Posts:
    .main-inner {padding-top:50px;}
    (change the value in px as desired)

    2) To center-align the Pages/PageList:
    .PageList {text-align:center !important;}
    .PageList li {display:inline !important; float:none !important;}

    ReplyDelete
  12. every once in awhile i change my blog around, and i keep coming back to your website for help. thank you so much!!!

    ReplyDelete
  13. You're most welcome, Danielle! I truly appreciate your positive feedback. Thanks.
    Hehe... you'd be surprised to know that I need to fall back on my own tutorials quite often too to show me anew the way out when problems arise. :)

    ReplyDelete
  14. Hi Trish,
    Try this out - instead of doing it at Edit HTML of your blog's template, go to Blogger Template Designer > Advanced > Add CSS and add the code snippets as shown at step 3. of the tutorial above but change:
    .PageList li a to .tabs-inner .widget li a instead. Then, play around with the font properties as you wish.
    Hope this helps.

    ReplyDelete
  15. Hi, I've tried what you suggested for trish and it still didnt work. Is there a way you could contact me through my email at idwanderers@gmail.com for further assistance? I would most assuredly appreciate your help

    ReplyDelete
  16. Hi D'Asia E!

    Frankly, I'm not that proficient in CSS/HTML. Some of the tips shared are my successes after trial and error. Thus, unable to troubleshoot your problem.

    However, I've experimented some CSS variables and they worked fine in replacing .tabs-inner.widget li a

    The variables are either one of the following:
    1) .tabs-inner .PageList li a
    2) .tabs-outer .PageList li a
    3) .tabs-outer .widget li a

    That's all that I can provide. Hope it helps otherwise I'm sorry.

    ReplyDelete
  17. how come it doesnt make a difference?
    i swear i made it just like you did in the pictre, but the font just refuse to change...

    ReplyDelete
  18. Hi Jacqueline,

    Just wondering... I want to do the same thing but with my own handwritten font (ie. an inserted 'picture/scan' of words I have actually written - I'm an illustrator). Is there any way to do this so the reader clicks on my hand written page tab to be directed to that page? Best, Gus

    ReplyDelete
  19. Hi Eternal,
    Please check through my replies to Trish and D'Asia dated Oct 20 and Oct 27 respectively and see whether it helps - those are just the other alternatives I know of.

    ReplyDelete
  20. Hi Gus,
    I'm sure there's a way because I've seen something similar to your request at http://www.sneakymommablogdesign.com/ but I've never experimented that before.
    Further viewing that site's page source makes me deduce that a HTML gadget (widget) was added below the blog's header instead of a Page List gadget.
    The following is what I feel can be done to create a similar-looking page tab:
    1. Do not create a page via the New Page tab. Instead create your pages as posts, using the New Post tab.
    2. Then create your relevant handwritten fonts (image+words as wished) and save as .png format online to enable linkage with the illustrated fonts and the related posts. Repeat the process for every post that you wish to be represented like a page tab.
    3. Add a HTML/JavaScript gadget below your header and insert into the content box the HTML of the clickable images that link to the related posts. As a guide, check out my tutorial on how to make an image clickable or as a link at http://jacqsbloggertips.blogspot.com/2010/11/make-imagepicture-clickable-or-as-link.html.
    Hope the brief suggestions above helps... just my humble thoughts as envisaged, unsure of its outcome.

    ReplyDelete
  21. you know there's a simpler way. you just go to -design-tenplate designer-Advance-Tab text, there's all these fonts you can choose and you can change your font size too.

    ReplyDelete
  22. Thanks for update, Anonymous! Blogger has made it so easy now!!

    ReplyDelete
  23. Great, easy tutorial! Thanks so much!

    ReplyDelete
  24. You're most welcome, Charlotte. Thanks for positive feedback.

    ReplyDelete
  25. Hi
    I want to show reduced size of my post size in blog.
    Like on first page instead of showing full post only 20% part of post should be visible.

    ReplyDelete
    Replies
    1. Try using the 'Jump Break' feature, Kalashgroup! You can find my tutorial about it @ http://jacqsbloggertips.blogspot.com/2010/01/bloggers-read-more-with-jump-break.html

      Delete
  26. Thanks Man. Good Job. Keep Sharing... I am also working on my Site www.flavorsofsoul.com.
    Will wait for some feedback for your side as it needs lot of improvement.

    ReplyDelete
    Replies
    1. You're most welcome, Khappi! I love sharing my knowledge. :-)

      Delete
  27. ohh thank you so much it is great help for me ,
    You know i was headache .
    jo i want to change post color and size also change sidebar fonts color and size
    this is my test blog http://bit.ly/MP0zs3
    Please also help me

    ReplyDelete
  28. i also want add doted line between main-wrapper and sidebar-wrapper kindly ,also guide me for this :)

    ReplyDelete
    Replies
    1. Hi Mahi princess!
      If you're using Blogger Template Designer, to customize your blog, just go to your 'Dashboard', click 'Template' and 'Customize' (which is below the image 'Live on Blog') and click the related items on the left menu and customize as you desire. Best to explore what it has to offer you.
      Hope this helps.

      Delete
  29. Thanks so much, really really useful!xxx

    ReplyDelete
    Replies
    1. The pleasure of sharing is all mine, Lizzie! Great to know happy with the result.

      Delete
  30. Thanks for your kind appreciation and willingness to share this tip with others, Roxanne!

    ReplyDelete
  31. Hi Jacqueline,
    It doesnt work with me awwww
    I find the ]]> code, stick just above the code presented and it does not work.
    The weirdest is that through blogger designer template -tab text- i have also selected my font (courier) and it doesnt work either.
    Can you assist ?
    Best
    Olivia

    ReplyDelete
    Replies
    1. Hi Olithee,
      I would advice you to remove the code you've added following this post.
      There's an updated tutorial on this subject.... follow the link provided at the end of the post above where I've mentioned that it's easier to use those fonts provided at Blogger Designer Template > Advanced > Tabs Text submenu. But if you had previously added custom CSS codes or Edit Html, all that have to be removed first to enable your choice of fonts at Tabs Text to work.
      Hope this helps.

      Delete
  32. Jacqs ! I must be the dummest blogger you ever talk to !
    Im also wondering how my messages can be classified automatically in the right tabs. for example I want my cooking posts to appear on the home page but also in my cooking tab.
    Your help would be very much appreciated;

    ReplyDelete
    Replies
    1. Don't underestimate yourself, Olithee... all of us bloggers (including me) have much to learn and digest. I'm not that tech saavy and only share whatever knowledge I've acquired thus far through research and trials.
      Re your enquiries above.. sorry, I'm unable to help as it's out of my league.

      Delete
  33. Thanks a lot for sharing such a nice article.

    I have implemented this on my sites:
    www.wikiconsole.com
    www.isoftfiles.com

    ReplyDelete
  34. Hi! Thanks for this article Very helpful I have a problem with my tabs: there is an annoying black bar on the right and I can't get rid of it and there are even more annoying separators between the tabs. What can I do about that? Here's my blog:


    http://greluchesetfanfreluches.blogspot.fr/

    Here's the CSS I added to obtain this result:

    .tabs-inner .widget li a {
    font-family:"Gruppo";
    font-size:122%;
    font-weight:bold;
    font-style:bold;
    color: black;
    border:0px;
    background: #ffffff;

    }
    I would reeeeaaaally appreciate any help!
    ^^

    ReplyDelete
    Replies
    1. Hi... I don't think you need to add CSS. An easier way is to go to Dashboard > Template > Customize (Blogger Template Designer) > Advanced > Tabs Text and Tabs Background, where you choose your options to effect the changes you desire. You have first to remove the CSS that you've added earlier to make them work.
      Hope this helps.

      Delete
  35. hey jacq,,, its good tips....i have implemented on my site,,, good.. keep going...thanks..

    ReplyDelete
    Replies
    1. You're most welcome, Manjunath! Thank you so much for the 'thumbs up'!

      Delete
  36. Thanks for share this articel, nice post

    ReplyDelete
  37. Great Work, Thanks and God Bless You

    ReplyDelete
    Replies
    1. Great to know, Syra Ahmad. Thanks and God bless you too.

      Delete
  38. thanks for sharing! but anyway, how to increase the size of pages tabs (not the font but the pages tabs itself)? i want my pages tabs to have a big border or kind of thing i guess.

    cheers!

    ReplyDelete

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

Custom Search