Create a calendar or banner style date header for blogger posts

calendar-or-banner-style-date-header
In my last post, I showed you how to create a circular date header for blogger posts that floats to the side. Todays post will take it a little further, showing you how create a calendar style, your own imagea, a banner style or a triangular date header and how to customise it to suit your blog. This post contains 4 separate tutorials!

[postwarning]

calendar-style-date-header

Calendar Style Date Header for Blog Posts

  1. Setting > Language and Format > Change date format to 00/Month/0000
  2. Layout > Blog Post Gadget > Edit > Change date format to 00/Month/0000
  3. Template > Format Template and find the following code
    <h2 class='date-header'>
     <span>
    <data:post.dateHeader/>
    </span>
    </h2>

    Replace it with the following code. If you find the above code twice, replace both of them.

    <span class='date-header'><div id='date'> <script> 
    replace_date(&#39;<data:post.dateHeader/>&#39;); 
    </script> </div></span>
  4. Find </head> in Template > Edit HTML. Under it, paste the following.
    <script> function replace_date(d) { var da = d.split(' '); day = "<div class='day'>"+da[0]+"</div>"; month = "<calendar class='month'>"+da[1].slice(0,3)+"</calendar>";  year = "<div class='year'>"+da[2]+"</div>"; document.write(month+day); } </script>
  5. Now we need to style the date, to do this add the following code to Template > Customise > Advanced > Add CSS (anything added here will be placed above ]]> </b:skin> in your template)
    /* Date Style */
    span.date-header {
    margin-left: -60px; /* CHANGE POSITION */
    width: 30px; /* CHANGE WIDTH */
    height: 30px; /* CHANGE HEIGHT */
    padding: 10px; /* CHANGE PADDING SPACE */ 
    word-wrap: break-word;
    float: left;
    -webkit-border-radius: 10px; /* CHANGE RADIUS OF CIRCLE */
    -moz-border-radius: 10px; /* CHANGE RADIUS OF CIRCLE */
    -o-border-radius: 10px; /* CHANGE RADIUS OF CIRCLE */
    border-radius: 10px; /* CHANGE RADIUS OF CIRCLE */
    font-family: 'arvo'; /* CHANGE FONT */ 
    text-align: center; 
    background-color: #fcfcfc; /* CHANGE BACKGROUND COLOUR */
    background: linear-gradient(top, #fcfcfc 0%, #dad8d8 100%); /* CHANGE BACKGROUND GRADIENT */
    background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%); /* CHANGE BACKGROUND GRADIENT */
    background: -webkit-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%); /* CHANGE BACKGROUND GRADIENT */
    font-size: 10px; /* CHANGE FONT SIZE */
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); /* CHANGE SHADOW */
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); /* CHANGE SHADOW */
    border: solid 1px #d2d2d2; /* CHANGE BORDER STYLE, WIDTH AND COLOUR */ 
    }
    
    #date { 
    display:block; 
    line-height:1.3em;  
    text-align:center; 
    }
    
    calendar {
    background: #d10000; /* CHANGE BACKGROUND */
    background: linear-gradient(top, #d10000 0%, #7a0909 100%); /* CHANGE BACKGROUND GRADIENT */
    background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%); /* CHANGE BACKGROUND GRADIENT */
    background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%); /* CHANGE BACKGROUND GRADIENT */
    padding: 0px 10px 0px 10px; /* CHANGE PADDING SPACE */ 
    position: absolute;
    left: 0px;
    top: 0px;
    left: -1px;
    right: -1px; 
    border-radius: 10px 10px 0px 0px; /* CHANGE RADIUS OF BORDER BOTTOM */
    }
    
    .day { 
    font-size:20px; /* CHANGE FONT SIZE OF DAY */
    padding-bottom:1px; /* CHANGE SPACE UNDERNEATH */
    text-shadow: 0px #666666; /* CHANGE TEXT SHADOW */
    position: absolute;
    top: 30px;
    left: 0px;
    right: 0px;
    padding-top: 1px; /* CHANGE SPACE ON TOP */ 
    letter-spacing:0px; /* CHANGE SPACE BETWEEN LETTERS */ 
    text-align: center !important; 
    }
    
    .month {
    padding-top:2.5px;  
    letter-spacing:3px; /* CHANGE SPACE BETWEEN LETTERS */
    color: #FFFFFF; /* CHANGE FONT COLOUR*/ 
    height:20px; /* CHANGE HEIGHT OF MONTH */ 
    width:32px; /* CHANGE WIDTH OF MONTH */ 
    }
  6. Experiment with the CSS and change the style to suit your own blog. The /* ... */ are comments to help you identify each piece of code, you can leave them in. They won’t appear on your blog.

Use your own Background Image for date header

  1. Follow steps 1-4 above
  2. Design your background using these Photoshop alternatives
  3. Add the following code to Template > Edit HTML > above ]]> </b:skin>
    /* Date Style */
    span.date-header {
    background: url("PLACE DIRECT URL HERE"); /* CHANGE BACKGROUND COLOUR */
    color: #333333;
    margin-left: -60px; /* CHANGE POSITION */
    width: 30px; /* CHANGE WIDTH */
    height: 30px; /* CHANGE HEIGHT */
    padding: 10px; /* CHANGE PADDING SPACE */ 
    word-wrap: break-word;
    float: left;
    -webkit-border-radius: 10px; /* CHANGE RADIUS OF CIRCLE */
    -moz-border-radius: 10px; /* CHANGE RADIUS OF CIRCLE */
    -o-border-radius: 10px; /* CHANGE RADIUS OF CIRCLE */
    border-radius: 10px; /* CHANGE RADIUS OF CIRCLE */
    font-family: 'arvo'; /* CHANGE FONT */ 
    text-align: center; 
    font-size: 10px; /* CHANGE FONT SIZE */
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); /* CHANGE SHADOW */
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); /* CHANGE SHADOW */
    border: solid 1px #d2d2d2; /* CHANGE BORDER STYLE, WIDTH AND COLOUR */ 
    }
    
    #date { 
    display:block; 
    line-height:1.3em;  
    text-align:center; 
    }
    
    .day { 
    font-size:20px; /* CHANGE FONT SIZE OF DAY */
    padding-bottom:1px; /* CHANGE SPACE UNDERNEATH */
    text-shadow: 0px #666666; /* CHANGE TEXT SHADOW */
    position: absolute;
    top: 30px;
    left: 0px;
    right: 0px;
    padding-top: 1px; /* CHANGE SPACE ON TOP */ 
    letter-spacing:0px; /* CHANGE SPACE BETWEEN LETTERS */ 
    text-align: center !important; 
    }
    
    .month {
    padding-top:2.5px;  
    letter-spacing:3px; /* CHANGE SPACE BETWEEN LETTERS */
    color: #333333; /* CHANGE FONT COLOUR*/ 
    height:20px; /* CHANGE HEIGHT OF MONTH */ 
    width:32px; /* CHANGE WIDTH OF MONTH */ 
    }
  4. Experiment with the CSS and change the style to suit your own blog. The /* ... */ are comments to help you identify each piece of code, you can leave them in. They won’t appear on your blog.

banner-style-date-header

Banner Style Date Header for Blog Posts

  1. Setting > Language and Format > Change date format to 00/Month/0000
  2. Layout > Blog Post Gadget > Edit > Change date format to 00/Month/0000
  3. Template > Format Template and find the following code
    <h2 class='date-header'>
     <span>
    <data:post.dateHeader/>
    </span>
    </h2>

    Replace it with the following code. If you find the above code twice, replace both of them.

    <span class='date-header'><div id='date'> <script> 
    replace_date(&#39;<data:post.dateHeader/>&#39;); 
    </script> </div></span>
  4. Find </head> in Template > Edit HTML. Under it, paste the following.
    <script> function replace_date(d) { var da = d.split(' '); day = "<div class='day'>"+da[0]+"</div>"; month = "<div class='month'>"+da[1].slice(0,3)+"</div>";  year = "<div class='year'>"+da[2]+"</div>"; document.write(month+day); } </script>
  5. Now we need to style the date, to do this add the following code to Template > Customise > Advanced > Add CSS (anything added here will be placed above ]]> </b:skin> in your template)
    /* Date Style */
    span.date-header {
    margin-left: -85px; /* CHANGE POSITION */
    width: 0px; /* CHANGE WIDTH */
    height: 0px; /* CHANGE HEIGHT */ 
    word-wrap: break-word;
    float: left;
    font-family: 'arvo'; /* CHANGE FONT */ 
    text-align: center; 
    font-size: 10px; /* CHANGE FONT SIZE */ 
     border-color: #ccc #ccc #ccc transparent; 
      border-style:solid;
      border-width:25px 50px 25px 25px;
    }
    
    #date {
    display: block;
    line-height: 1.3em;
    text-align: center;
    position: absolute;
    top: -20px;
    left: 10px;
    }
    
    .day {
     font-size: 24px; /* CHANGE FONT SIZE OF DAY */ 
    padding-top: 0px;
    letter-spacing: 0px;
    text-align: center !important;
    color: #333; /* CHANGE COLOUR OF DAY */ 
    position: absolute;
    top: 25px;
    }
    
    .month {
    font-style: italic; /* CHANGE FONT STYLE */
    font-family: Georgia;
    padding-top: 0px;
    color: #f9f9f9; /* CHANGE COLOUR OF MONTH */
    font-size: 20px; /* CHANGE FONT SIZE OF MONTH */
    }
  6. Experiment with the CSS and change the style to suit your own blog. The /* ... */ are comments to help you identify each piece of code, you can leave them in. They won’t appear on your blog.

Triangle Shape Date Header for Blog Posts

  1. Setting > Language and Format > Change date format to 00/Month/0000
  2. Layout > Blog Post Gadget > Edit > Change date format to 00/Month/0000
  3. Template > Format Template and find the following code
    <h2 class='date-header'>
     <span>
    <data:post.dateHeader/>
    </span>
    </h2>

    Replace it with the following code. If you find the above code twice, replace both of them.

    <span class='date-header'><div id='date'> <script> 
    replace_date(&#39;<data:post.dateHeader/>&#39;); 
    </script> </div></span>
  4. Find </head> in Template > Edit HTML. Under it, paste the following.
    <script> function replace_date(d) { var da = d.split(' '); day = "<div class='day'>"+da[0]+"</div>"; month = "<div class='month'>"+da[1].slice(0,3)+"</div>";  year = "<div class='year'>"+da[2]+"</div>"; document.write(month+day); } </script>
  5. Now we need to style the date, to do this add the following code to Template > Customise > Advanced > Add CSS (anything added here will be placed above ]]> </b:skin> in your template)
    /* Date Style */
    span.date-header {
    margin-left: -105px; /* CHANGE POSITION */ 
    width: 0px; 
    height: 0px; 
    border-left: 40px solid transparent; 
    border-right: 40px solid transparent; 
    border-bottom: 60px solid #000000; 
    word-wrap: break-word;
    float: left;
    font-family: 'arvo'; /* CHANGE FONT */
    text-align: center; 
    font-size: 10px; /* CHANGE FONT SIZE */
    }
    
    #date {
    display: block;
    line-height: 1.3em;
    text-align: center;
    position: absolute;
    top: 15px;
    left: -15px;
    }
    
    .day {
     font-size: 24px; /* CHANGE FONT SIZE OF DAY */ 
    padding-top: 0px;
    letter-spacing: 0px;
    text-align: center !important;
    color: #FFFFFF; /* CHANGE COLOUR OF DAY */ 
    position: absolute;
    top: 25px;
    }
    
    .month {
    font-style: italic; /* CHANGE FONT STYLE */
    font-family: Georgia;
    padding-top: 0px;
    color: #FFFFFF; /* CHANGE COLOUR OF MONTH */
    font-size: 20px; /* CHANGE FONT SIZE OF MONTH */
    }
  6. Experiment with the CSS and change the style to suit your own blog. The /* ... */ are comments to help you identify each piece of code, you can leave them in. They won’t appear on your blog.

Related Posts

Create a circular date header
Move date underneath the post title

17 responses on “Create a calendar or banner style date header for blogger posts

  1. Thanks for the great tutorial! The banner style is super cute but I can’t get it in the right position on my blog ๐Ÿ™
    I want it to be overlap the side of the post about half way down, is that possible? It doesn’t look too good on the top left corner.

    Thanks!

    1. Hello Kirsty. You can reduce the margin-left value under span.date-header to move it further into the actual post. Then to move it down the post add top: 50px; z-index: 9999; between the brackets and increase the top value to move it down the post. Hope this answers your question?

  2. Currently using the banner style on my blog and I LOVE it! Just wondering, though, if there’s any way to include the year? ๐Ÿ™‚

  3. Hi Ellie! Thank you so much for the tutorial, but for some reason on my blog only the banner shows up without the date or anything. I’ve double checked everything that I was supposed to do and I’m pretty sure it’s all there. I’m not sure what’s wrong! Hopefully you can give me any tips. Thanks!

    XO, Kate // seersuckerandstripes.blogspot.com

    1. Hello, usually it means that something hasn’t been added correctly or isn’t in the right place. I can’t tell exactly without seeing the code so the only thing I can suggest is check that the settings are correct, that the script is in the right place and that you replaced the date header code more than once.

  4. Hello,
    I tried to put the banner header on my blog but it doesn’t work so i tried to use the calendar method to put an image as header background. It does work but I can’t see any number.
    Could you help me ?

    1. Hello. Three things could be causing this – Double check that the date is properly set in the settings and that the script is fully copied over and in the right place. Also check that you’ve replaced all instances of the code in your template.

  5. very nice tutorial is working but only for one post plz tell me how i can create a date header for each posts in blogger you have my email send me the answer plzz, thank you!!

    1. By default, Blogger only show the date once a day no matter how many posts you have. If you publish two or more posts in one day it will only show date on the latest post.

  6. Hi there! Thanks so much for sharing how to do this. I’ve been looking for how to create a triangle date header for the longest! I was able to get all of the code in and the display is good, however the year is not displaying for the triangle date styling. Is it not supposed to or did I miss something in my coding?

    Thanks! ๐Ÿ™‚

  7. Hi,
    Thanks for this great post! I put it on the blog and played with all the numbers, but it won’t save the fonts that I put in. Is there a way to change the font? I am using fonts that are part of blogger.

    Thanks,
    Charlotte

Sorry, comments are closed!