Tuesday, November 30, 2010

Styling the blog date header

A reader asked: " I really want to make a different date header!"

Well this can be done via editing the CSS (Cascading Style Sheet) in the template. Note that before making changes to the template best to first backup the blog template (Dashboard > Design (previously called LAYOUT) > Edit HTML >Download Full Template).

Now in the template editor, look for h2.date-header (use ctrl+F) which may be like the following:

h2.date-header {
margin:1.5em 0 .5em;
}

You can ten add in specifications for fonts and colors, example:

h2.date-header {
margin:1.5em 0 .5em;
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-size:125%
color:red;
}

or whatever you wish. For more details, refer to W3schools: CSS Fonmt

21 comments:

  1. Hi, we wanna know how to put our information ( i don't know a lot of english because i'm portuguese so sorry if i said something without sence ) , i don't know .... to people can't copy and past , we don't wanna people copy our information and past in somewhere .

    ReplyDelete
  2. Some people try to disable right click etc but will not stop someone determined to copy something. You may want to consider turning your text into an image, but then, even the image may be copied.

    ReplyDelete
  3. Hi! I'm doing my Christmas rounds before Santa arrives. Wishing you and your family a Merry Christmas and a Happy New Year.

    Take Care,
    Peter2

    ReplyDelete
  4. Hi Peter! Long time no see

    ReplyDelete
  5. Is there any way to display the date header somewhere else? I would like to have the date header like this blog.

    http://www.webdesignerwall.com/

    Thank you very much

    ReplyDelete
  6. I don't see any date header there?

    ReplyDelete
  7. Hi the date "header" is in the left hand side of the post title, which is in a square displayed in this form
    DEC
    !5

    ReplyDelete
  8. That is interesting in that the date header seemed to be outside content column. Nope I don't know how to do that if you found out do let us know.

    ReplyDelete
  9. Great post. Thanks for the tip. Your tips and tricks are always of great value,

    ReplyDelete
  10. help! awhile back i removed the html code for the date/time stamp as i found it in the way. i THINK i still had it shown on the bottom of the posts though. i recently switched to the new blogger design template and now have NO time stamp anywhere on my posts.
    i've gone to elements/layout/edit blog post and clicked the box to show the date and nothing happens.
    i think i need html code to be added to my template. can you help with that?
    thank you

    ReplyDelete
  11. Why don't you try this - create a test blog using the same template and compare the post footer section of both and try to identify what is missing:

    <div class='post-footer'>

    ReplyDelete
  12. i think my head would explode if i did that. i did find a post in google blogger forum where someone had the code to use and i looked for the post=info blah blah blah on every single template (expanded version) line and it wasn't there.
    i find it odd that by changing to new blogger design/getting a whole new theme that those changes that i made long ago remain.
    i guess my question to you is, do you know what code and where i could put it to get date to show up at bottom of each post. i really disliked it showing above the post(under title).
    thank you for you time!

    ReplyDelete
  13. Paula, have a look at Test result: removing the timestamp in post footer and hope that it can point you in the right direction to get back your timestamp

    ReplyDelete
  14. so i took your advice and created a temp blog and found the missing html stuff and copied/pasted on new one and it now shows up where i want. THANKS!!!

    ReplyDelete
  15. thank you.. this is very useful

    ReplyDelete
  16. Do you know how I can make the date show as the one on this blog: http://btemplates.com/2011/blogger-template-pink-touch-2/demo/ ? The css/html I'm working on doesb't have the h2.date-header code either, so I'll have to work around that or try to add that as well. Would be happy to hear from you even though this is an old post.

    ReplyDelete
  17. Easiest way is to get the template from http://btemplates.com or other sources like http://www.bloggerbuster.com/

    ReplyDelete
  18. Yes, but the problem is that I'm using another template for the actual design on my blog, I only want the box that the post date is shown in, but have no idea how to do so :P

    ReplyDelete
  19. I would like to try on my new blog http://inayum.blogspot.com

    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