How to Make the Blogger Posts Have a Calendar for the Date in

It's quite common to see calendar style dates next to some WordPress posts but for the Blogger platform it isn't always easy adding it. But who said you can't do it? You need to look no further than this blog. In this tutorial, we'll learn how to create a calendar style for your Blogger posts date!


How to create calendar style dates in Blogger

Step 1. Go to Settings > Language and Formatting - Date Header Format and change the date format as you can see in this example below (first add day, month and finally year)
 

Step 2. Go to Template > Edit HTML


Step 3. Click anywhere inside the code area and press CTRL + F to open the blogger' search box

Step 4. Type or paste the following line inside the search box and hit Enter to find it:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Step 5. In case you find it twice, replace it twice with this code:
<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>
Step 6. Now type this tag inside the search box and hit Enter to find it:
</head>
Step 7. Just ABOVE the </head> tag, paste this code:
<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(http://1.bp.blogspot.com/-NVj6tUKJgLo/UBShW2dCLSI/AAAAAAAACZk/3TkTa8Hzqt0/s1600/calendar07.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px -40px -108px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* Month's color */
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Day's color */
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Year's color */
}
</style>
</b:if>
Before saving your Template, here we can make some changes:
  • To change the calendar style, replace the url in blue with yours;
  • If the calendar doesn't appear as it should, change -108 with 0;
  • With green are marked the areas where you can change the color of the dates

Step 8. Now Preview your Template and if everything looks ok, click on the Save Template button.
That was all... Enjoy!

    Random Posts

66 comments:

  1. Please give a preview site link

    ReplyDelete
    Replies
    1. Ok, i've updated my post.

      Delete
    2. Thanks for the demo link and your beautiful post :D

      Delete
  2. Doesn't seem to work for me other at my blog. http://click-a-brick.blogspot.co.uk/

    Please help, thanks.

    ReplyDelete
  3. It doesn't show any dates !!

    ReplyDelete
    Replies
    1. go to layout and make post dates tick

      Delete
  4. Thanks, worked perfect for me (finally!)

    ReplyDelete
  5. hello i used the above code all things fine but.
    My Post Title has got some space above it same size of Calender.
    how to remove it.

    www.iosstuffs.tk

    ReplyDelete
    Replies
    1. Search for the following line: h3.post-title, h4 { and this one too h3.post-title a {... then add the next code just below of them: margin-top: -10px;

      Delete
  6. thank you it works perfectly for me

    ReplyDelete
  7. Awesome..finally i made it..Thanks

    ReplyDelete
  8. Thank You. Can you personally help me in my blog?

    ReplyDelete
  9. thanks mate , it works perfect

    ReplyDelete
  10. hi. i use mant tips in this blog and all working. thanx for sharing. i want to ask a question in my blog(smart4computing.blogspot.com) after the first post in my home there is some extra space. can u see my blog and tell me the solution.......pleaseeeeeeeeee
    i have a request please add tips for adding thumnail image for blog post, i see many sites but can't understand.......
    please help me.............

    ReplyDelete
    Replies
    1. Hi Shubham,

      Go to Layout and click on the "Blog Posts" Edit link, then deselect the "Show Ads Between Posts" option. Then Save the changings and press on the 'Save arrangement' button. Thanks for visiting!

      Delete
  11. thank you it works perfectly for me

    ReplyDelete
  12. Hello Admin I Want To Contribute To Your Blog Let Me Know If You Are Interested :)

    Contact Me Using Contact Form Thanks :)

    ReplyDelete
  13. very simple step..it works

    ReplyDelete
  14. it worked and looks great!
    Thanks for sharing this tips

    ReplyDelete
  15. Really nice post lemme try this code.

    ReplyDelete
  16. its easily working for me thanks for awsome widget

    ReplyDelete
  17. Absolutely fine. Worked 100% for me.
    Domo:
    http://avismusicgal.blogspot.in/

    (Only I have shifted the location to the right of my page, and little bit changes done in day/year colour and size of the fonts.)
    Thanks.....

    ReplyDelete
  18. Anonymous12/13/2012

    Thank you :)

    ReplyDelete
  19. why the year is not working

    ReplyDelete
  20. I feel like an idiot as a new blogger. I can get to Settings>Language and formatting, but where do I find Design for the next step? Thanks!

    ReplyDelete
  21. It's not working for me.

    ReplyDelete
  22. Thank you! I replaced the coding in the two spots you suggested, but when I search for "head" to add in the coding above it, nothing comes up in my search! What should I do? Thanks! (I'm copying it over how you have it above when I search for it, but it wouldn't allow me to post it that way in the text box!

    ReplyDelete
  23. doesnt work for me... by the way.. i use artisteer to make my blog www.prlslog.blogspot.com

    ReplyDelete
  24. I try this on my blog and it is working.. Thank you for sharing this to us.. We are hopping you more tutorials in the future...

    Blog: MoreBlogTools

    ReplyDelete
  25. Anonymous1/15/2013

    Lovely blog! I am loving it!! Will be back later to read some

    more. I am bookmarking your feeds also.
    Feel free to visit my page : http://www.thespainforum.com/f286/

    ReplyDelete
  26. it works easily thank you for sharing this

    ReplyDelete
  27. Trochę zmieniłam Twój kod, ale wszystko działa, wielkie dzięki. Wszystko działa ;o)) Pozdrawiam

    ReplyDelete
  28. Nice Post dude, it like all your useful posts, i like it all.
    just keep it :)

    My Way To Blogging
    Happy Blogging

    ReplyDelete
  29. Really nice post. Everything worked fine, but the calender seemed to small to contain the day and date. any suggestions?

    ReplyDelete
  30. Outclass help, very useful and awesome for me and others.

    ReplyDelete
  31. great!, works fine :)

    ReplyDelete
  32. amazing blog amazing post

    ReplyDelete
  33. Thanks ... work 4 me with a little changing on day and year size

    ReplyDelete
  34. Well, I have done it as described in your post but somehow it is not working. Can you please help me with a demo? It would be of great help! Overall, a very nice post.

    ReplyDelete
  35. Hi there, Thanks for the post! I'm working in a new design for my blog and I have followed the steps above to change the post date. I have made some changes to make it a little more "girlie" but can I just ask how to change the font type? I've tried adding "font: dancing script;" to each selector but with no result :o(. Any ideas?

    ReplyDelete
    Replies
    1. Hi Gaby,

      Add above the </head> tag this code:

      <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Dancing+Script:700"/>

      Also this one just above ]]></b:skin>

      #Date {font-family: 'Dancing Script', serif;}

      I hope this will help :)

      Delete
  36. Thank you for this posting ..it is really working.....

    ReplyDelete
  37. Hello, Admin I have had created a technology blog( Http://www.teqyo.blogspot.in) I want to customize it and make it user friendly and very simple for my readers.I am inspired from tech blog ( www.ubergizmo.com) and i want to design blog as simple ass ubergizmo.. Will you please help me brother???
    I have very less idea about hacking and blogging

    ReplyDelete
  38. works beautifully! Thank you.

    ReplyDelete
  39. Hello,
    I've tried over and over again the steps you have listed above and was sure I did it right every time, yet it still hasn't worked!
    Hopefully you can help me out.

    ReplyDelete
  40. Hi,the calendar working and look lovely. Thanks!
    My blog is: http://flory4all.blogspot.ro/

    ReplyDelete
  41. That's really helped me in creating calendar style. I was looking for this information for my blog. Thanks!

    ReplyDelete
  42. It works but my date header is located on top of the post title instead of parallel with the post title. How do I correct this?

    ReplyDelete
  43. It Works But there is a problem calender is coming here , not above posts

    http://i.imgur.com/ofI1X7N.jpg

    ReplyDelete
  44. first time I have used -108 px then make it 0. in spite of that it is not working. According your said as follows :
    If the calendar doesn't appear correctly, change -108 with 0;

    ReplyDelete
  45. actually im confuse....above head..how??

    ReplyDelete
  46. Hi it worked perfectly for me. thank, but i want to change it back to normal, how do i do that?

    ReplyDelete
  47. Umm, it's just not working.. help? I did everything, and even changed the -108 to 0. ??

    ReplyDelete
  48. It`s working perfectly for me. Thank you so much.

    ReplyDelete

Although every comment is appreciated, due to time limitations I might not be able to respond to everyone. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!