I have had requests lately on how to add a calendar icon for the date on posts- heres how you do it:
1. Go to your Dashboard> Design> Edit Html. Now check ‘expand widget template’ box.
2. Find The <head> tag in your html (at the top of your code), and paste the following code underneath it:
<!– orangevolt calendar widget –>
<script src=’http://anniebluesky.googlepages.com/fastinit.js’/>
<script src=’http://anniebluesky.googlepages.com/prototype-1.5.0.js’/>
<script src=’http://anniebluesky.googlepages.com/orangevolt-calendar.js’/>
<link href=’http://anniebluesky.googlepages.com/calendar.css’ rel=’stylesheet’ type=’text/css’/>
<!– end calendar widget –>
3. Now you will find this code in your html:
<data:post.dateHeader/>
And replace it with:
<h2 class=’date-header’>
<data:post.dateHeader/>
</h2>
4. Now for the last step- this code will allow you to customize your widget like change the colors of the font, float the icon to right or left, and where you add the calendar icon image.
In your code anywhere between
<b:skin><![CDATA[/* and ]]></b:skin>
add in the calendar stylesheet:
/* Calendar
———————————————– */
span.cal {
background:transparent url(‘CALENDAR IMAGE. URL‘) no-repeat scroll 0%;
float:left;
height:49px;
width:48px;
font-family:”Trebuchet MS”,Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin-right: 13px;
}span.cal_month {
color:#FFFFFF;
display:block;
font-size:11px;
line-height:11px;
margin-left:-3px;
padding-top:2px;
text-align:center;
text-transform:uppercase;
}span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:-3px;
padding-top:8px;
text-align:center;
text-transform:uppercase;
}
5. Download the calendar icons:
6. Extract your zip file, then pick which icon you want to use. Go to your photobucket account and upload the desired icon. Then grab the direct URL provided by photobucket- and paster it over the CALENDAR IMAGE.URL in your calendar stylesheet (it is shown above in red).
7. Now hit save and everything should show up correctly on your blog, if it isn’t showing up properly- go back through your steps to ensure you haven’t made any mistakes. To view a working version of the calendar widget check out my BLOG
Hope you find this tutorial useful, if you have any questions don’t hesitate to ask.
Note: Original tutorial was found at: Blogger University, Thanks for the great tutorial.
Chaudalyn
Wednesday 6th of February 2013
I've been look around for this particular sequence for the calendar widget. But, when I implement your method, I'm getting an error.
"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The content of elements must consist of well-formed character data or markup.
Error 500"
What am I supposed to do?
Jody @ Mommy Moment
Wednesday 6th of February 2013
Chaudalyn, blogger has made alot of changes since that widget was posted. I would recommend that you look for a current widget that's compatible with blogger since they did the blog overhaul. Good Luck, sorry I do not have a better answer for you. {The designer who wrote the tutorial no longer contributes to the blog and I do not know much about blogger}
Sarah B.
Thursday 26th of May 2011
Cute!
Any idea what I should do if that "data:post" line appears TWICE in my html? I've tried replacing one with the other code & deleting the other (both ways) & even replacing BOTH with the code. Errors all 3 ways. Advice? I love these little calendars!
Callista
Sunday 15th of May 2011
I don't understand. What is this? Your blog doesn't seem to have it unless I'm just blind. What does it do/look like?