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.
No comments:
Post a Comment