Date header is one of the most important elements in blogging, because this element can inform the readers regarding when the post of the blog is written by the author. But again, same with the HTML Quotation Marks provided by Blogger, the date header in our blog will appear without any particular style. So if you want to modify the date header with a new and cool style, let's proceed to the tutorial!.
Configuring the format of date header
1. Log in to Blogger
To begin this tutorial, now head on to Blogger.com and sign in to your account.
2. Go to Setting
In the Dashboard, pick one of your blog that will be added with the new style of date header. And then, press the Setting button to enter the whole configuration page of your blog.
3. Switch the sub-tab to Formatting
In the Setting page, switch the sub-tab to Formatting. After landing to the Formatting page, look at the option Date Header Format. Now press the drop-down tab and set the date calendar format to yyyy-mm-dd. For example, 2010-09-12.
4. Save the Change
Now save the change and proceed to the next step
Adding script and CSS style for the new date header
5. Go to Edit HTML
Switch the tab to Layout/Design, and go to Page Element > Edit HTML. .
6. Find the code
In Edit HTML, now find the code below in your blog template (Ctrl + F):
</head>
Note: Anyway, before doing any kind of customization around your blog template, please make sure that already save your existing template file to the computer. To do this, press Download Full Template.
7. Copy and Paste the Script Codes
Now copy the script code below and paste it above </head>
<script src='http://datecalendarwhatmakesblog.googlecode.com/files/fastinit.js'></script>
<script src='http://datecalendarwhatmakesblog.googlecode.com/files/prototype-1.5.0.js'></script>
<script src='http://datecalendarwhatmakesblog.googlecode.com/files/orangevolt-calendar_1.js'></script>
<script src='http://datecalendarwhatmakesblog.googlecode.com/files/prototype-1.5.0.js'></script>
<script src='http://datecalendarwhatmakesblog.googlecode.com/files/orangevolt-calendar_1.js'></script>
8. Find the Code
Press CTRL + F at the same time again and find the code below:
]]></b:skin>
9. Paste the Css code of New Date Calendar Style
Now copy the CSS style of new date header below and then, paste it above the code section ]]></b:skin>
.cal {
text-align: right;
width: 65px;
float: right;
white-space: nowrap;
font: Normal 34px Helvetica, sans-serif;
letter-spacing: -2px;
color: #ccc;
background-color: grey;
text-transform: uppercase;
line-height: 35px;
}
.cal_day { float: right;}
.date-brick {
float: right;
height: 30px;
width: 45px;
background-color: #6498cc;
color: #bbd5f1;
font: Bold 12px Verdana, Sans-Serif;
text-align: center;
line-height: 12px;
margin-left: 10px;
padding-top: 5px;
letter-spacing: 0px;
overflow: hidden;
}
text-align: right;
width: 65px;
float: right;
white-space: nowrap;
font: Normal 34px Helvetica, sans-serif;
letter-spacing: -2px;
color: #ccc;
background-color: grey;
text-transform: uppercase;
line-height: 35px;
}
.cal_day { float: right;}
.date-brick {
float: right;
height: 30px;
width: 45px;
background-color: #6498cc;
color: #bbd5f1;
font: Bold 12px Verdana, Sans-Serif;
text-align: center;
line-height: 12px;
margin-left: 10px;
padding-top: 5px;
letter-spacing: 0px;
overflow: hidden;
}
10. Save the Change
To end this tutorial, now press the Save Template button. As you can see in your blog, if the date header in your blog will appear in a new different style, that later can be further modified with your own preferences.
Why this date header doesn't work on my blog?
Anyway, in order to make this tutorial works on your blog, you have to make sure that you must firstly wrap up the new date header tag with the standard date heading in your blog template. For example, find this code in your template (ensure that "Expand Widget templates" is ticked):
<data:post.dateheader />
Now modify that tag code by wrapping it up with the red code below:
<h2 class='date-header'><data:post.dateHeader/></h2>
Okay, that's it for this tutorial to customize date header on Blogger. If you counter any problem to apply this article on your blog, just leave your question below on the comment section. Hopefully, i can help you with that.
Enjoy the New Calendar Style!!
You might also like to read :
Share This Article to Other People Across the World !
Thanks!
Get the fresh update from Whatmakesblog.com!
To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe.
Your email address will not be shared to any third party
Delivered by FeedBurner
Labels:
Date Header,
Javascript
3 comments:
not worked...
Yeah @zeyrules, thanks for reminding me this error. The problem why this tutorial wont work because of the script which hosted by BloggerBuster.com. I think you should head to Bloggerbuster.com to get the actual script.
didn't work for me, either :(
Post a Comment