Create a calendar or banner style date header for blogger posts

How to create a calendar or banner style date header for Blogger
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

Related Posts