Using a Calendar Icon as the Post Date Header
But since we're on the subject of the date header. Have you been able to figure out (or maybe seen somewhere) how people add the caledar icon next to the date header?
It's usually a graphic behind the month and date to the left of the date header. Like:
JAN
---
10
WOW, this was not an easy task. At least for me. Sometimes it is just an uphill struggle. But, I stuck with it and won.
Of course, I found help from two places: Orangevolt for the calendar code and Euphorish for the icons, which I resized to fit this code. Many thanks to them for all their work. You can read about it on their site, or follow the instructions that I've simplified below.
So, let's get started.
- Open the Dashboard | Settings | Formatting
- Locate the Date Header Format and set it to YYYY-MM-DD (2008-01-12)
- Save settings.
- Open the Dashboard | Template | Edit HTML.
- Check the Expand Widgets Template box.
- Find the <head> tag and paste the following code under 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 -->
Next you will locate this code in your template: <data:post.dateHeader/> and replace it with:
<h2 class='date-header'>This is pretty painless, isn't it. Last step. This is where you can customize the font used, color of font, float the icon to the left or right, and where you add your calendar image. In the CSS Style Sheet, add this code:
<data:post.dateHeader/>
</h2>
/* CalendarIf you have a calendar icon upload it to your webhost (I use Ripway). Put your Calendar Image.URL in the above code. Or, download this set of icons and take your pick. It looks like candy!! This set of calendar icons will make your blog POP!
----------------------------------------------- */
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;
}
Labels:
Blogger Beta,
Calendar,
Classic Blogger,
Design,
Graphics,
Reader's Emails,
Web2.0
113 Comments:
I already implemented this. Thanks for coming through once again.
@Omondudu, Beautiful! You may want to add this code margin-bottom: 3px; to this section of the CSS:
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;
}
To make it look like this:
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;
margin-bottom: 3px;
}
Since you are using Drop Caps, this will give a little clearance between the cap and the calendar.
For those who are opting for the Classic template, would the calendar code work if <$BlogDateHeaderDate$> is replaced h2class=?
@Anonymous, I tried it, but it wouldn't parse correctly.
I took help from two places- Orangevolt and Euphorish. Really helpful. thanks for sharing.
Annie,
You're like my Blogger Genie. Thanks so much for looking into these two hacks I asked about. I'd try them out except my computer is currently on its last legs.
How about a third wish?
One of the things I've wondered about is how to move around the credits. Say maybe have the (1)Comments links above and to the right of the title. Or moving them completely around like this template:
rounded-blue-for-blogger.blogspot.com/
I think with a few of these hacks we could all make our blogs look a little different from the default templates.
Thanks again for looking into it and satisfying my curiousity.
This is realy helpful.Thanks.
@MrBrownThumb, I'll put it on my list of things to figure out!!
Hi Annie!
First time visitng your blog, and I just wanted to say a BIG thank you for all the awesome information you supply us with in Blogland!
I'm just starting to dabble in code and web design, and I find that your instructions here are BEYOND easy and clear!!!
I'm going to place your blog link on my own blog, for others who are looking for help.
Thanks again, Annie. I'll be back often!
hii ur site rox
my site is
www.seeonline12.blogspot.com
can u help me with the look of my blog i need a three column blogs with considerable main column and 2 sidebars in lot of templates lot of sodespace is getting wasted
can u send a beuitful template wich has all latest hacks and gizmos to it to my mail
chaituhot@gmail.com
plzzzzz ,
@admin, you may want to look at
Fluid 3 Column Blogger Template.
@Ron, thanks! That is always nice to hear.
This is such a cool little writeup.
I need to come back here more often.
Nice ideas.
hey annie,
you have helped me a lot in hacking my blog, thank you so much! i emailed you a few days ago but i see that you're busy right now that's why you haven't posted the answers here yet, i completely understand.
maybe you could take a look at my blog, http://inspiringthespirit.blogspot.com
on the rightmost sidebar when you scroll down, the second widget falls so far away from the first one.. can you please tell me what might have caused this? thank you!
@teban, when I look at your blog, all the widgets look fine. No spaces.
Hi Annie! Thanks for this code. I used to envy the wordpress bloggers to have this calendar icon. Now, I've got it in my blog! :)
-Martin
@Martin Manurung, I envied them for years! Your's is lovely...nice icon.
Can't get it to work, keeps showing a blank field. I've tried other scripts as well, so I'm pretty sure it's something I'm doing. anyone please knows?
@Moving companies reviews, It looks like your're missing this part of the calendar widget code:
<link href='http://anniebluesky.googlepages.com/calendar.css' rel='stylesheet' type='text/css'/>
Annie,
I've tried to add this cute little icon to the new Blue Dust layout, and I can't seem to make it work. any ideas?
thanks,
Patti
@Patti, I feel like it has something to do with the image that is in the post header, but I'm swamped for time and don't have time to play around with it.
If I get a chance and figure it out, I will let you know.
@Patti, I looked at your source, and for the life of me, I can't figure it out. If it were me, I would remove all of the calendar code, download and start fresh. That works for me many times.
Oh, if you want your blog title to fit better, find this code:
#header h1 {
margin:5px 5px 0;
padding: 60px 15px 20px 220px;
line-height:1.2em;
text-transform:none;
letter-spacing:.2em;
font: italic bold 256% Georgia, Times, serif;
color: #807163;
}
and change:
padding: 60px 15px 20px 220px;
to:
padding: 60px 15px 20px 320px;
or play with that 220/320 until you get the title placed where you want.
Thank you. I played with the title, and took out the calendar. I will do without since I like the little swirl better. You rock!!!
Patti
hi Annie, I tried your code and it worked out only that the date on the blog post still shows up like 2008-3-19, how can I get rid of it?
thankyou!
@Chant, the only reason I can think of why that would happen is that you missed this step:
1. Open the Dashboard | Settings | Formatting
2. Locate the Date Header Format and set it to YYYY-MM-DD (2008-01-12)
3. Save settings.
@annie
Just loved the cute calenders...
u r blog is rocking...
i have downloaded the calender images to my pc and how to add those to my blog....
u have asked to upload the pics to webhost i give the url ..can u b little clear on this.can i upload it to picassa web albums and then give the clear there???
I hope am clear in my doubt
Thanks in advance
@mrs, yes, you can use images hosted on Picassa Web Albums. To find the URL, open the image in Picassa, click on Link to this Photo which opens up a little info under it. Select the code in the Paste link in email or IM box and paste it in the code from my post:
background:transparent url('CALENDAR IMAGE. URL') no-repeat scroll 0%;
where it says CALENDAR IMAGE. URL
Hi Annie! I searched and searched but couldn't find an icon I liked as much as yours so I stole it! :D I hope you don't mind.
I was so inspired by all your tweaks here I wanted to see what I could come up with on my own starting with the minima template as a base, how do you think I did?
@Miranda, It tickles me when people just up and say they stole it! I don't mind.
Love your new template! Isn't it fun working with the Minima template? You may want to consider adding a footer...the items there are getting lost in the background.
@annie
thanks a lot annie...
i will try it now and if am unsucessful will comeback and shoot questions again if you dont mind....thanks once again
hi, i found your site very informative and cute layout too. problem is, i am using a classic template and having trouble hacking calendar icons. a little help pls. :)
@Mimay, I will have to look into that. I haven't tried it yet. When I do, I will let you know.
Hi,
I followed all the steps for this but the only thing that changed is the format on my posts, now being "2008-04-23"
any ideas? :)
@veggiemama, I tried looking at your source, but couldn't see anything wrong. If you send me your XML file, I will take a closer look at the code.
I love your blog!! I'm customizing right now. Do you have any suggestions wher I can find calendar icons? Thanks!
Sara
just another day in paradise
I'm having a lot of trouble with this. I had it displaying correctly on my computer, but it wouldn't show up on my parent's computer, so I messed with the font size code. Now it won't show up anywhere. Any ideas?
@Sara, did you find the icons? I had a link in the post.
The adjustments are made in the CSS portion. Height, width, margin-left, paddint-top. It is a matter of getting all right according to your template, the icon you choose, etc. So, it is trial and error.
Glad you are enjoying my blog!
Thanks for the code! Is it possible to display the year in the icon as well ?
@Alexandre Campagna, It is possible, because I think I have seen it. I just haven't figured out the additional code. I'll put that on my list of things to do.
Annie, you have a great site. The calendar is awesome. However I can't get the calendar image to appear. I've managed to get the date correct and it appears in the proper place on my blog, but no background image.
Also, it took me a bit to realize that the jar files and the stylesheet in the code are actually linked to your site. So I had to download those and put them on my server and then change the URLs for those. I've also downloaded the calendar images to my server and linked to the one I want in the code, but the image still does not appear.
Anyway, great job and thanks for sharing with everyone. You have earned a link on my blog for this.
Ok, figured it out. In order to get the calendar image to appear I had to remove the following from my template code:
h2.date-header {
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 0;
padding-$startSide: 18px;
text-transform: uppercase;
color: $dateHeaderColor;
background: url() no-repeat;
font-size: 80%;
font-weight: normal;
}
.date-header span {
margin-top: 0;
margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: 5px;
padding-top: 0;
padding-$endSide: 25px;
padding-bottom: 0;
padding-$startSide: 25px;
background: url() no-repeat $startSide 0;
}
After studying it for a while it occurred to me that the original template code for the date was interfering with your code; so I simply removed any code reference to that and viola! - it worked.
Now to get the post titles to line up correctly.
I ended up making my own calendar icons. I solved the issue with the year by adding "2008" to the graphic itself. You can check out my blog to see the results.
I'll be making a post soon to offer the icons I made if anyone is interested.
@dcloud, I'm so happy you figured it out. Believe it or not, it took me over a year of trying to get it on my blog and then removing it again. I finally got it to work. (And now I have it off...may put it up again soon!)
Love your blog! Thanks for the link. Your calendar icon is great! When you do your post to offer the icons you made, I will tell my readers. Several have been looking for a new source.
@dcloud, you really should put up an RSS feed button! If you do, let me know. And when you get the icons up, let me know.
Thanks!!
Ok, the post is up. I included a screenshot of the icons I made along with a download link. I'll have to look into that RSS thing.
Hi! I"m back again. I'm trying to add my own calendar image, and I can't get it to work. What did I mess up? Thanks!
how do you do, to post HTML tags in a blogspot post?
it doesn´t work for me..
@Anonymous,
seen on post
Change URL and seen on post. For instance, to have a link to BlogU, the code would look like this:
BlogU
"@Anonymous,
seen on post
Change URL and seen on post. For instance, to have a link to BlogU, the code would look like this:
BlogU"
----------------------------------------------
Thanks for your answear, but that guide doesnt work for me, maybe i did something wrong..
What i want is a hack too post a script in a blog post, also not in a pageelement.
I want a box were i can post a HTML code without activate it so my blog readers can copy the code, just like you do in your blogposts.
Now when i post a code, i get a error messange an the code be invisible in the post..
Thanks for your help!
Best reagards..
@Anonymous, well, that is a different story! Here is a link to parse code to paste into posts: Blogcrowds: Parse HTML. A great resource!
Love Love Love this tutorial. I got it up and running alright, except for one thing. If I post more than once in one day, the second post gives has this error message, instead of the calendar:
"Orangevolt Calendar : Parsing date ' ' using pattern '/(\d\d\d\d)-(\d\d)-(\d\d)/' failed."
Is there any way to fix that? Thanks SO much!
http://standnakedinthelight.blogspot.com/
@Ms. Scartastic, I really don't know why. I will have to see if I can figure it out. But, don't hold your breath...this is javascript based which I am not proficient in.
My suggestion is, and not meaning to be smart, only one post per day. I don't think I have ever done more than one post a day, so I never had that problem!
Hi Annie,
sorry didn't get that. I've checked this code again and again. Can you please have a look on my site and send me a tip? Thanks
@Lars, you will have to either send me your XML file or give me the URL to your blog.
@annie
sorry www.lars-heppner.de/blog
thank for your help
@Lars, I'm having a hard time figuring out your problem. I have looked the source code over a couple of times, and it all seems in order.
Did you do these changes:
1. Open the Dashboard | Settings | Formatting
2. Locate the Date Header Format and set it to YYYY-MM-DD (2008-01-12)
3. Save settings.
If you did, then I'm at a loss. If you did those changes, email me privately.
Hi. I've tried on it. But it turn out that the calender icons are in transparent while i wanted it to be in purple colour. Could you pls teach me? thank you.
@OkIdoCkIe, hmmmm. I don't understand how it could be transparent. Did you download the icons from the link in my post?
If it were me. I would start over and make sure I did each step.
hi annie! i've been wondering & looking for this tutorial for a long time. Thanks for sharing this.
I tried this in both my blogs. One of them works & the other doesnt work. Can you please help me & look into this matter.
Doesn't work: http://agreatpleasure.blogspot.com
Work: (fyr)
http://glossalicious.blogspot.com
Thank you.
hi annie, it's me again, jean!
it appears that the calendar icon in my blog: AGP will only works on firefox but not IE. Please help!
@Jean Chia, If it is an IE issue, I may not be able to resolve it. IE is a thorn in my side. But, if I figure it out, I will let you know.
So glad I found this site. Very helpful site indeed!
This is one feature I really like on Wordpress blogs and happy when I found it here. But I just can't make it work. The image won't show. The 'day' shows up but I have to highlight the 'month' for it to show.
Thanks for what you do here.
On The Bricks
nice one... again! thanks!
Hi Annie,
first of all, I would like to thank you for all your fantastic tutorials so easy to follow even for a blogger novice such as myself. Once my blog design finished, I won't forget to mention YOU as the mastermind behind my blog template :)
One problem though, it appears that I have the same problem as Jean Chia concerning the calendar icon display in IE.
My blog Mangosteen's Canteen looks fine in Firefox but in IE, the calendar icon doesn't show up...Have you been able to figure out what the problem is? If not, what would you do to go around it ?
Thanks for your help.
@Miss Mangosteen, I havent' been able to figure that out yet. Solving problems between the browser platforms is most difficult for me.
Hi Annie,
It's Miss Mangosteen, again! I solved my problem, yay! Actually, it was a lucky fiddle...
I found out that for some reasons, in IE, the rounded corners of the main wrapper were covering the calendar icon...
.roundedcornr_box_799771 {
background:#fffff0; <--- GUILTY code line for IE but not for Firefox (go figure the impenetrable mysteries of technology!)
So I just changed the background value to "transparent" and it worked ! Now, the calendar icon shows up in IE!
I'm doing the happy dance...till the next glitch...so you'll probably hear from me again looking for advice, help or support ;)
Take care.
@Miss Mangosteen, I'm so glad that you figured it out! That was a tuffie!!
Hi! I'm sorry if this is a stupid question but I can't find "data:post.dateHeader/" (with the <> on it, of course) on my template (I'm trying this with "Minima"). What should I do?!
I have a question, my blog template/layout isnt in the minima style... is there anyway this would work on my blog? I cant seem to figure it out. Thanks for any help :)
hi annie,
love this idea, but i can't seem to put the calendar icon, don't know what's wrong.
thanks!
hi annie..
I have problems of inserting the code for the calendar icons for my blog...
:(
hello!
unfortunately not visulizzare calendar.
Do not be understood to include the CSS,
footer after?
thx for the info
I really love this calendar icon as date idea and I've searched all over for help and couldn't figure it out. I hope you have time to answer. I'm using new blogger (xml) but I don't have the =postdateHeader= line anywhere in my template. I got this template from the web and they coded it differently I guess.
Do you know what I should do?
Thanks in advance.
@sonja, you have to figure out what code is used for you post date and put the h2 code around it.
Very easy and comprehensive post on Date header customization.My blog is www.techieway.blogspot.com
Hey there I really like this one and use it at http://figurefan.blogspot.com/ BUT: I have a big problem with the prototype library.
Isn't there a way to use this one WITHOUT prototype?? - Because it'S incompatible with JQuery and MOOTOOLS.
Can'T you uptdate this one to use one of these instead.
Or at least update it to work with Prototype 1.6.x
Hope this gets noticed!!
Hi Annie, i tried the code that you have given but didn't work on my blog. why is it so? Help, pls. :)
http://foodiesqueen.blogspot.com
Oh thanks so much! I've always wanted to have the date displayed like this, but not having much technical know-how myself, I thought it would have to remain a far away dream.
Your tutorials are amazing! Keep up the good work.
Hi there, Thanx for the info, but I'm getting the following 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: Open quote is expected for attribute "{1}" associated with an element type "cond".
Any tips on fixing this please?
omg that was totally awesome, only problem/question... Is it possible to add the year in?!
Thanks for this post also... I've used it on my wordpress template which is available for free :)
Hi, I know I'm very late on this post. However I just implemented your hack. Works very well on blogspot, but not in my custom domain. Any idea why? if you fix this you'll be my hero! ;-)
tahnks in advance
@downshiftingnow, Sorry, but I don't have experience with custom domains. So I don't have a clue as to what to do.
This icon can truly add spice to your blog posts...also it is easier for people to see the dates of your posts because it already an icon..also you can customize the color to fit your blog's template and look...how cool is that!
Annie,
I'm having a problem. I worked up a test blog (http://justanotheroneofmytestblogs.blogspot.com/)and everything works fine. When I uploaded that template to my actual blog (http://straightstitches.blogspot.com/) the calendar doesn't work.
I'm stumped. I've tried clearing out the code and reinstalling from scratch, I've also tried clearing my cache because that also seems to be another issue I'm having with Chrome. In IE the calendar shows up just fine, but the background doesn't. le sigh.
Any help, insight or magic would very much be appreciated.
Thanks!
Heather
@heather, sorry but I'm not good with cross platforem issues. As a matter of fact, I removed the calendar from my blog because of issues I couldn't figure out. But, it does work for some people. I just figured I had some sort of code conflict.
I recently came accross your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have very enjoyed . I like your articel information , I will keep visiting this blog very often.Its a really very impressive blog.I think it will be very useful for every It persone.
Penny Stock Videos
They look soooooooo cool!
Hey Annie
this is something I will be adding to my newly created blog. Let's see how it works!
Listen, Do you know how to add the "carousel" to a blog built on thesis 1.8 ?
many thanks
ciao!
looks nice! thank you.
Nice tutorial. If I customize one of those icons with a little Photoshop it can do wonders.
Another wonderful article and informative post and some great technical tools on the calender for headers. Thanks!
I have just come across your blog, just wanting to say great advice and tuition, very helpful site. will be visiting alot more now found your site, thank you
Thanks, this tip will help with our upcoming hunting blog. Wasn't able to find this detailed info anywhere else.
It's nice idea!!
Hi,
I love cute calenders.I followed all the steps and the good thing is that it works for me.Thanks for information.
Regards,
Vanessa
thank you for this article it's usefull
it's my blog trading Forex
So glad I stumbled on your site when looking for more information on Article Marketing.I will take your advice into consideration – thanks for sharing!
Hi,
Really nice post.I enjoyed reading it completely.Thanks for sharing useful information.
Regards,
Sana
Great tutorial! This totally helped me in designing my upcoming project.
I get this: ORANGEVOLT CALENDAR : PARSING DATE ' 2011/07/06 ' USING PATTERN '/(\D\D\D\D)-(\D\D)-(\D\D)/' FAILED.
:(
Very useful tutorial..Thanks.
wow, this is a nifty little script! the correct date pops up automatically!
thanks
can i copy the download icon zip nad that image on my blog? thanks..
sooo coool mec .... thnx
Thanks for the tutorial but my question is how can I show a watch on my blog page
I usually don't post in Blogs but your blog forced me to, awesome work,stunning!
http://www.pinkhandtech.com
Thanks for the tips.
Thanks for the piece of info.leme try it on my site :)
I use the date each time you create articles, but not by using pictures. I will try...
i cannot for the life of me get this to work on my blog. if you have time, can you help me figure out why i cant get it? please and thank you!