Tutorial # 33 - How to add Calender Dates Next to Blogger Posts

If you want to have a calendar style dates next to your Blogger posts, 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!

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 then year)

Step 2: Go to Template > click the "Edit HTML" button

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:


Before saving the Template, here we can make some changes:

- To change the calendar style, replace the url in line # 22 with yours;
- If the calendar doesn't appear as it should, change -108 line # 27 with 0;
- Lines # 38, 46, 53 where you can change the color of the dates

Step 8: Now Preview your Template and if everything looks ok, hit the Save Template button.