How to Show Blogger Post Date as in the calender form.As its an option by google to show the date of your blogger post at the bottom of the post or below the title of the post,just you have to select that you want to show up the date or not.As i am not in the habbit of showing the date of my blogger post.But with this calender widget you will love to show up the date of blogger post.
Lets watch an demo picture below first.
As you can see the date in calender form before the post title,that is what i am talking about.If you liked it continue reading this tutorial.
First, go to Settings > Formatting, and change the date header format to YYYY-MM-DD like this:
This enables the script we will be using to correctly parse the date header format.
Now login to blogger > go to Blogger Layout > Edit/Html > Check mark expand Widgets >
Press Ctrl + F > And now search for below code
<data:post.dateHeader/>
This above line you found will be wrapped in heading tags of <h2> or <h3> like below
<h2><data:post.dateHeader/></h2>
Just what you have to do is make it wrap like this instead of using heading tags.
<div class="date-header"><data:post.dateHeader/></div>
If you already find your codes wrapped like this then leave it its ok.Continue to next step.
Now search for </head> tag and place the below codes immediately before it.
<!-- calendar widget -->
<script src='http://bloggerbuster.com/scripts/fastinit.js'/>
<script src='http://bloggerbuster.com/scripts/prototype-1.5.0.js'/>
<script src='http://bloggerbuster.com/calendar.js'/>
<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/>
<!-- end calendar widget -->
As if you want to adjust size of calender widget or change its image just open the red url in above codes.Save it-make changes to it-and upload it to your server and then change the url too in above codes.For more downloadable calendar for printing available at PsPrint.
I hope you will love this widget.I have taken this tutorial and all codes and scripts from amanda blog,as all this widget credits go to her.
Important:-If you do more than one post a day,as today you did 3 posts,this widget will show up calender widget on top post only,this is its drawback.I hope you can understand it.
Lets watch an demo picture below first.
As you can see the date in calender form before the post title,that is what i am talking about.If you liked it continue reading this tutorial.
First, go to Settings > Formatting, and change the date header format to YYYY-MM-DD like this:
This enables the script we will be using to correctly parse the date header format.
Now login to blogger > go to Blogger Layout > Edit/Html > Check mark expand Widgets >
Press Ctrl + F > And now search for below code
<data:post.dateHeader/>
This above line you found will be wrapped in heading tags of <h2> or <h3> like below
<h2><data:post.dateHeader/></h2>
Just what you have to do is make it wrap like this instead of using heading tags.
<div class="date-header"><data:post.dateHeader/></div>
If you already find your codes wrapped like this then leave it its ok.Continue to next step.
Now search for </head> tag and place the below codes immediately before it.
<!-- calendar widget -->
<script src='http://bloggerbuster.com/scripts/fastinit.js'/>
<script src='http://bloggerbuster.com/scripts/prototype-1.5.0.js'/>
<script src='http://bloggerbuster.com/calendar.js'/>
<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/>
<!-- end calendar widget -->
As if you want to adjust size of calender widget or change its image just open the red url in above codes.Save it-make changes to it-and upload it to your server and then change the url too in above codes.For more downloadable calendar for printing available at PsPrint.
I hope you will love this widget.I have taken this tutorial and all codes and scripts from amanda blog,as all this widget credits go to her.
Important:-If you do more than one post a day,as today you did 3 posts,this widget will show up calender widget on top post only,this is its drawback.I hope you can understand it.
12 comments:
Hi,
Thanks for the wonderful tutorials on this blog. I actually had a small request. Could you please tell me, is it possible to make a template, such that there are three columns on the front page, labels and archives, but only two columns on the content page? Also is it possible that the content can take up the unused space? Will be waiting for your reply and any suggestions u can make.
@Dr.Vishal As you can hide any widget in sidebar you dont want to show in blogger home page or blogger post pages,but as you want that instead that space should be used ,i have an alternativ for you.Just place two widgets at same place and make it one visible at blogger home page which you want to show up and make other visible at blogger pages.For this you can use this post How Show Blogger Widget Only In Posts-Homepage-Archive Pagesas with this way the widget at home place will not show up in blogger pages and that space will be get used by other widget that will only show up in blogger post pages.
Hi...anshul in my template there is no such line as data:post.dateHeader... and no date is being specified..could you please tell me where to add this command in my template?so that I can continue with this hack.please help me..
Hi Anshul, its me again. I want to use the calendar icon beside my blog post. But I cannot find this the data:post.dateHeader in my html; the cntlr+F cannot find it. So I cannot proceed. Why is this? Thanks.
@shankar Cyberron you might not have check mark to expand widgets
Hi again... long time no see :)
I did this twice, calendar icon not showing, only standard date format as per instructions xxxx-xx-xx.
Just FYI.
just would be making mistake as its working on mine check here
http://workfromhomefreeonline.blogspot.com/
is it possible to display the year? thanks.
@vs this will work only like that.There is other hack we bloggers use to show of date in any form and format in templates, i need to hold an tutorial for it as it could be complex for most of you.
how can i set the date for when i post , cause it says undefined
UNDEFINED
@aisaa change the date header format to YYYY-MM-DD like this- 2010-01-12
not working, may blogbuster remove the code from their servers?
Post a Comment