Saturday, October 10, 2009

How to center date header and change font size

"Do you know how centre the date?????"

Open the template editor by going to Dashboard > Layout > Edit HTML and look for these codes:
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}


and change it to

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
text-align:center;
}


and if you also want to change the font size, add this line - font-size:200% or font-size:12px; or whatever values you wish, so that the codes become

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
text-align:center;
font-size:200%;

}

32 comments:

  1. ok so I don't know whether you'll be able to answer this question as we didn't have any luck with the last - but here goes !

    How do I use a recently purchased domain name as my blog URL, rather than the long and unweildy one blogger gave me ?

    ReplyDelete
  2. Elise, I am afraid I cannot help you on this one as I have never tried tangling with this Cname Aname whatever although in the future I may have to try. Although I have custom domains those were done direct via Blogger post editor and Google Apps where Google Apps practically do everything and I just sit and wait 3 days.

    Your best bet would be to go to Blogger Help Forum and perhaps try to catch the attention of Chuck @ nitecrutz who is IT savvy

    ReplyDelete
  3. Hey Elise i think i can answer ur question. from ur blogger dashboard go to settings and the very 1st option u'll get is Import Blog - Export Blog- Delete Blog
    You can then export ur blog to ur custom domain

    ReplyDelete
  4. Hi Rahul,

    That sounds interesting and I will like to hear you elaborate on that. For a full conversion to custom domain, not only the current content have to be redirected to new domain, all future traffic to the blogspot blog need to be redirected to the new domain and merely exporting the content of the blog will not enable that.

    However, will like to hear you out.

    ReplyDelete
  5. I am getting what u r saying peter and we have posted the technique to do that on our blog:
    How to redirect traffic to another domain??

    ReplyDelete
  6. hi , i want to put the an ad of amazon .com how can i do that?
    plss help me

    ReplyDelete
  7. With Adsense, other than direct via Blogger, there is only one way - copy-paste the AdSense script direct into a HTML/Javascript gadget. With Amazon, if you use the script from Amazon, it is also HTML/Javascript gadget but Amazon gives you more choices which include incorporating the Amazon ad direct into the post. What kind of Amazon ad do you want to add to your blog?

    ReplyDelete
  8. Hi Peter;
    I have this problem with the top margin for the Date Header. Whenever, the blog is opened, the the Date Header for the first post only has a large gap for the top margin.

    Is this the correct editing to remove that large gap :

    h2.date-header {
    /* margin-top:0; */
    margin-$endSide:8px /* 28px; */ /* date height */
    margin-bottom:0;
    margin-$startSide:43px;
    font-size:100%; /* 85%; */
    line-height:1em; /* 2em; */
    text-transform:uppercase;
    letter-spacing:.2em;
    color:$dateHeaderColor;
    }

    Please help! i've been spending many hours trying to rectify this.

    Thanks.

    ReplyDelete
  9. I think your best option is to post your question over at Blogger Help Forum. Let us have the URL of the thread after you posted.

    ReplyDelete
  10. Here's another centering issue. Is it possible to centre the date and also centre the post title as it automatical starts left.

    Cheers

    desmond

    ReplyDelete
  11. heya I want to move my Header text toward right side of my blog !!! can yew tell me how can i do that???

    ReplyDelete
  12. "my Header text toward right"

    I am assuming you are referring to the text in the date header, if so...

    Refer back to this post How to center date header and change font size and

    h2.date-header {
    margin:1.5em 0 .5em;
    text-align:center;
    font-size:200%;
    }

    Just change
    text-align:center;
    to
    text-align:right;

    ReplyDelete
  13. Mondodes said..."Is it possible to centre the date and also centre the post title as it automatical starts left."

    Look at Testing Blogger Beta and see how the post title has been shifted to the right.

    Just go to the template editor and look for this:

    .post h3 {
    margin:.25em 0 0;
    padding:0 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    }

    and change it to

    .post h3 {
    margin:.25em 0 0;
    padding:0 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    text-align:right;
    }

    ReplyDelete
  14. thanks! your blog is great! very informative, easy and helpful!

    ReplyDelete
  15. Peter- thanks for all your tips! I've now changed my post titles to center, but I can't get my date to the center? I don't see the option in my HTML you are referring to. Also, do you know how I can move my date to appear UNDER my post title that is centered?

    Thanks so much!
    Chelsea

    ReplyDelete
  16. Try adding the whole thing and preview to see if any changes

    */
    h2.date-header {
    text-align:center;
    }
    /*

    ReplyDelete
  17. I can not change the font of my latest blog post and have no idea why...I tried looking in html codes..and tried copying from word...None works for me for my latest post..

    ReplyDelete
  18. When all things fail, inline CSS comes to the rescue. Say you want Georgia fonts, italic and red color, just start the post with
    <div style="font-family:Georgia; font-style:italic; color:red;"> and end your post with </div>

    ReplyDelete
  19. Thanks. We did exactly what you said,and it worked. We centered the date and changed its font size :)

    Pierre and Penelope

    ReplyDelete
  20. and...how can i center my word below picture..the caption..Font..

    ReplyDelete
  21. hey!

    so, i tried this and it doesn't work. sent you an email about it last night so feel free to reply to that or this post. (reference email for details) i sent it through google docs.

    help!
    thanks for being an expert.
    rachel

    ReplyDelete
  22. may try to respond if I find the time or the email

    ReplyDelete
  23. I also tried the above method and it didn't work

    ReplyDelete
  24. For those using templates for which this tip don't work, center the <h2> header instead which I have tested at SEO tips and Tricks and found to work.

    However, note that using this technique, all H2 heading, not just the date header, will be centered as shown by an example post SEO insight for bloggers

    ReplyDelete
  25. wow thank for this solution...it helped me in my blog here

    ReplyDelete
  26. Thank you for GREAT blog! I have found so many helpful answers on how to do a number of things, starting out with no knowledge of html, css etc. Seems to be no end to your knowledge - you are like a living thesaurus! :) Thanks! (Ps. I just centered my date header thanks to your guide :)

    greetings from Tonje

    ReplyDelete
  27. Hey, does anyone know how to align the date header without it affecting the widget headings? I'm trying to make mine align to the right, but when I do then all my widget titles are moving to the left too! (I'm using the Simple template)

    Thanks!!

    (Blog: thejessjournals.blogspot.com)

    ReplyDelete
  28. font size works well. but the alignment doesnt work on simple template. :( what should i do?

    ReplyDelete
  29. Thank you, thank you, THANK YOU!!!

    ReplyDelete
  30. I can't make it work. I can't find any of the codes.

    ReplyDelete
  31. I got this:
    /* Posts
    ----------------------------------------------- */
    .date-header span {
    background-color: $(date.header.background.color);
    color: $(date.header.color);
    padding: $(date.header.padding);
    letter-spacing: $(date.header.letterspacing);
    margin: $(date.header.margin);
    text-align:center;
    }

    and it isn't working...am I doing something wrong?

    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