Create a calendar or banner style date header for blogger posts • XOmisse

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 for Blog Posts

Setting > Language and Format > Change date format to 00/Month/0000
Layout > Blog Post Gadget > Edit > Change date format to 00/Month/0000

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>

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>

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 */ 
}

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

Follow steps 1-4 above
Design your background using these Photoshop alternatives

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 */ 
}

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 for Blog Posts

Setting > Language and Format > Change date format to 00/Month/0000
Layout > Blog Post Gadget > Edit > Change date format to 00/Month/0000

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>

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>

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 */
}

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

Setting > Language and Format > Change date format to 00/Month/0000
Layout > Blog Post Gadget > Edit > Change date format to 00/Month/0000

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>

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>

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 */
}

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.

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”

Kirsty says:

February 18, 2014 at 6:57 PM

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. Ellie M says:
  
  February 19, 2014 at 1:31 PM
  
  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?
  1. Kirsty says:
    
    February 19, 2014 at 3:37 PM
    
    Thank you so much!
Taylor says:

March 26, 2014 at 1:57 AM

Currently using the banner style on my blog and I LOVE it! Just wondering, though, if there’s any way to include the year? 🙂
1. Elaine Malone says:
  
  August 23, 2014 at 9:48 PM
  
  In Step4, the line document.write(month+day) change to document.write(month+day+year)
Katelyn says:

March 30, 2014 at 6:17 PM

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. Ellie M says:
  
  March 31, 2014 at 10:34 PM
  
  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.
Candace Stevenson says:

April 16, 2014 at 4:59 AM

This is awesome!! Can you tell me how to make just a solid black square (or whatever color) with the date inside the square?
1. Ellie M says:
  
  April 25, 2014 at 7:20 PM
  
  Check out this tutorial for creating a circle date and just remove the border-radius values.
Sonia says:

June 1, 2014 at 11:43 PM

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. Ellie M says:
  
  June 2, 2014 at 4:10 PM
  
  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.
oussama says:

July 26, 2014 at 1:22 PM

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. Elaine Malone says:
  
  July 26, 2014 at 7:04 PM
  
  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.
Tenns says:

August 3, 2014 at 5:03 AM

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! 🙂
1. Elaine M says:
  
  November 27, 2014 at 8:45 PM
  
  Hello. In step 4, replace month+day with month+day+year
Charlotte says:

August 8, 2014 at 12:17 AM

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
Barb says:

June 4, 2015 at 3:56 AM

Wow! That is so VERY cool. Thank you!