Sunday, September 16, 2007

Change font size of blog footer

I did a test blog Test Footer Font Size. Note the size of the fonts in the footer.


The instrutions below will involve scanning through long line of codes in a template. See section on how you can find code easily at the bottom of the post if you have difficulties. Also, before you do anything to the template, always backup your template PLUS the Page Elements. See
Backup New Blogger template PLUS Page Elements and change template

Backup New Blogger template PLUS Page Elements and change template

Amazon computer products




To change the footer font size, sign into blogger.com (Dashboard). Click LAYOUT for the relevant blog, then under the TEMPLATE tab, click the EDIT HTML sub-tab. Look for block of codes that may look something like this (the exact code will depend on template. The one below is for the Blogger Minima template):

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Just add a line

font-size: 400%;

so that the block of codes become

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
font-size: 400%;
}

Preview and if everything seems OK, click "Save template".

NOTE: The font size can be in % or px (pixels). You may also use 250% or 18px. Experiment, preview until you get what you want before you save the template.

How to easily locate the code you are looking for

To make your task of scanning the long lines of codes in the template, press ctrl+F and a Find [ ] will appear at the left of bottom of the browser. Tpye all or part of the code you are looking for and the scrollbar will scroll down to the part where the code is located and highlight it. See screenshot below:



Do all the necessary editing and preview. If everything seem OK, click "Save template" and VIEW BLOG" to ensure everything is OK

If this method don't work, click on the inside of the template editor window and press ctrl+A (or right-click and chose "Select all") to highlight all the template. Click ctrl+C (or right-click and chose "copy") to copy the template into clipboard, open a Notepad file, click ctrl+A again (or right-click and chose "Select all"), then click EDIT > FIND in the menu bar of Notepad at the top (or press ctrl+F), and in the "pop-up" FIND box, type or copy all or part of the code into the box and click "Find Next" and again the code you are looking for will be located and highlighted (see screenshot below):



Do whatever editing you need to do, then press ctrl+A (or right-click and chose "Select all") to highlight all the edited template in Notepad to copy into clipboard. Go back to the template editor. The whole unedited template should still be highlighted. Click the DELETE key and the template editor window will become empty. Paste the edited template into the empty template editor window, preview, then save.

22 comments:

  1. Hello again Peter!
    Two questions:
    1. How do I remove the border from my blog header? I am using Minima lefty stretch template.
    2. Do i have options of color beyond what is provided in blogger. I want to change the page color from white to some other very light color, but don't like any colors provided by blogger.
    Thanks!

    ReplyDelete
  2. Hi Bhavna,

    Regarding the border, I tested playing with

    #header-wrapper {
    margin:0 2% 10px;
    border:1px solid $bordercolor;
    }

    but whatever I tried, I only managed to remove 1 border (there are 2 borders for that template).

    Regarding background color, refer to

    Change blog background color and others.

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)

    ReplyDelete
  3. uncle, i face a problem regards my feedburner.

    When i try to "burn" my url. It's appear "your url does not appear to be a valid feed".
    What happen??

    **you can reply at this comment box**

    ReplyDelete
  4. Hi Johnson,

    The first thing I may think of is that your feed may have to be set to full or something, but I have mine set to short and have no problem. However, if the feed is set to NONE (which I have never done) then very likely you will have this problem. Go to SETTINGS > FEED and make sure it had not been set to NONE.

    If that is not a problem, suggest you contact Feedburner. They do reply for request for support.

    BTW, where are you located. I have a travel blog which I hope to decorate with digital photos of various countries and hope you may be able to send me some. However, feel free to disregard this request if it is a problem.

    Peter (Blog*Star)
    Natural Remedies

    ReplyDelete
  5. HOPELESSLY RIGHT-BRAINED

    I have read with great interest the posts and comments on your site regarding custom domains. I still, however, do not understand the solution. The solutions offered are confusing to me.

    My question is: Where is the custom blog domain I purchased and how do I access it? Why is it not automatically available to me through the blogger interface as my first purchased URL was? Why has it defaulted to an ‘apps’ page when I never requested this?

    1) I recently created ‘.blogspot’ blog, then purchased the custom domain through GoDaddy. Within a few days, as promised, my custom domain automatically came through, and I could work on it within the blogger interface. (I deleted the previous '.blogspot' version.)

    2) I then created a second, new ‘.blogspot’ blog, and then also purchased this second custom domain, the same as I had the first. But after two weeks, the new URL had still not come automatically through into the blogger interface, as the first one had.

    3) When I typed in the URL, it would default to a Google ‘apps’ page, not to the blogger interface as before. When I fooled around with the 'apps' page, possibly deleting something, the URL now defaulted to an 'Error: URL Not Found' page. (I briefly retrieved this unwanted (but still better than ‘Not Found’) ‘apps’ page this afternoon, but now it’s back again to: ‘Not Found’ without my changing anything.

    4) I called GoDaddy and spoke with their Google help desk, but they were unable to help me without an IP number, which Google never gave me, and even then they said that they’d only be able to tell me to what server/program the URL is defaulting, and I already know the answer to that question: this unwanted google ‘apps’ page, now 'Not Found'.

    Google is unreachable through all the channels I’ve tried. They are free, I know, but I paid for this URL, so I assumed there’d be some channel of direct contact somewhere. But there isn’t. I have spent the past two days sifting through the Google help page, posting my question, and tearing my hair out. Is there anyone who can break this whole process down for me in very simple layman's terms? I didn't have to deal with this the first time, as the transfer was automatic.

    I just want to have my URL show up in my blogger interface.

    Thank you!

    P.S. Perhaps I should have just kept the '.blogspot' address as you suggest, Peter. But then, what's to stop Google from deleting it without letting me know?

    ReplyDelete
  6. Hi author,

    First, deleting your original blogspot.com blog is a big mistake which you should never repeat.

    Second, in the email notification for comment moderation, there seem to be some strange links like ‘apps’, but there are no clickable links in the published comments. Perhaps it may be good for you to learn how to make hyperlinks by referring to Make clickable links. That post was made a long time ago but I remember there was a section on HTML for hyperlinks. Ignore the rest.

    This post Contacting Blogger Support used to be an effective way to get to them, sometimes you have to use devious ways by giving false responses, but recently even that don't work anymore. They keep changing to make it hard for us to contact them.

    If you are desparate, you can try Contact AdSense Support. There is a Google phone no. there but I don't live in US and I don't know if you will get connected to a machine (wouldn't be surprised) but may eventually reach a human. If you live in US and you tried, will appreciate getting feedback on the result by commenting in that post.

    Peter (Blog*Star)
    Google Blogger Blog*Star official announcement

    ReplyDelete
  7. what a helpful blog! I just switched to lefty minima. To get my header big enough, I took out my blog description and substituted the invisible character (Alt 0160) and made it ginormous.

    But for changing the footer, your tips were great. And so is the ctrl-F for finding things in the template. Thanks!

    ReplyDelete
  8. Peter,

    you seem to be well versed in Blogger! I cannot, for the life of me, get the size of the date header for a post to change. What am I doing wrong?

    The blog is http://www.vinceantonucci.com

    HEre is the code:

    .post-footer .date-header {
    margin: 0 5px 0 5px;
    }

    I've added every px, %, and font-size tag there is. CANNOT get it to change.

    Any idea as to what I am doing wrong?

    Thanks!

    ReplyDelete
  9. Try this:

    h2.date-header {
    font-size:300%;
    margin:1.5em 0 .5em;
    }

    You may also be interested in trying a new template - Super customerable template

    ReplyDelete
  10. Peter,

    that fixed it! thank you! I'd been working on that for WAY too long! You da man!

    ReplyDelete
  11. Is it possible to change the font size of a specific word?

    http://voipcallsforfreeworldwide.blogspot.com/

    ReplyDelete
  12. Change the font size of a specific word where? In the footer? Is so, I am afraid the answer is no as any changes will apply to the whole footer. However if it is a specific word in a post or some gadgets like the TEXT gadget, it is easily done. If it is the later, let me know and I will answer that with a post.

    ReplyDelete
  13. Hello Peter!
    I've got problems with Bolgger.
    1. How to make my blog more exciting because it looks empty.I don't know how to decorate it because I'm still new and don't have any friend to help me.
    2. How can I make Blogger layout as same as MySpace.I want to put my Blogger from URL(http://wwww.pimp-my-profile.com).there's got a lot of layout and like it.

    Thanks!

    ReplyDelete
  14. Hi there! I was wondering if you know if it's possible to change the font of the "comments" link at the footer of each blog entry? I've been trying to get it to have the same font as the rest of the text in my blog, but no matter what I do, it doesn't change. I use Arial for my blog entries, but the comments link is Trebuchet MS, and it seems impossible to change it to Arial. I know basic HTML and this is usually not a problem for me, but I just can't figure this out.

    Thanks!

    ReplyDelete
  15. Wow..great help! It's so hard to find easy HTML instructions. Thanks!

    ReplyDelete
  16. Peter whenever I am looking for a hack Google always brings me here first! But I noticed this does not work on the "newer" templates. Can you add a hack on how to decrease font size on the newer templates? OR... what I'm *really* trying to do is suppress labels from showing up on the hompeage but still display in the full post.

    I think it involves moving the code somewhere where the comments are... but can't seem to achieve what I'm looking to do with a simple copy and paste.

    Ciao and thank you for all of your wonderful tips!!

    Laura

    ReplyDelete
  17. I found these codes below with template designer template EDIT HTML:

    .post-footer {
    margin: 20px -2px 0;
    padding: 5px 10px;

    color: $(post.footer.text.color);
    background-color: $(post.
    .background.color);
    border-bottom: 1px solid $(post.footer.border.color);

    line-height: 1.6;
    font-size: 90%;
    }

    You can probably change the font-size there.

    ReplyDelete
  18. nice tutorial. thanks :)

    ReplyDelete
  19. Hi Peter,
    I would like my "comments" to appear on my blog just like yours. Now I have to click on -Comments- to read them. How can I keep them in full visibility at all time.
    Best regaqards.
    Greg.

    ReplyDelete
  20. Go go Dashboard > Settings > Comments
    and select "Embedded below post"

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics