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('<data:post.dateHeader/>'); </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('<data:post.dateHeader/>'); </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('<data:post.dateHeader/>'); </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.
Related Posts
Create a circular date header
Move date underneath the post title