How To Add a Calendar inside Blogger Posts

Have ever wonder to display a series of dates in blogger post? Do you ever tried to add calender into blogger post more attractive? Hope you don’t, because for adding any specific dates we always present the dates as October 23,2014 or December 1, 2014. For the initial we are following this method to present the dates. But here is a new way to present attractive calender inside blogger post.

This works on JavaScript which is brought you by Probloggertricks. You can customize this calender as per you wish. This tool will show specific date and along with all dates as customized calendar. So for using this you don’t need spend any bucks or time. Its so simple to add this tool on your blog. Do you wanna to know How to Insert Attractive Calender inside Blogger Post? Then follow the remaining section of this post,

Add Attractive Calendar in Blogger Post

Step 1: Go to Blogger >> Template >> Edit HTML.

Step 2: Then find <b:skin> tag in your blog template and paste the following code just above/before it.

<!– ################# Stylesheet for calendar##################### –>
<link href=’https://c2504d423f630716dd44709fad1630f8db1c1d91.googledrive.com/host/0B8w-DyA2IWavTGJrVE02SGZ4RWM/calendar.css’ rel=’stylesheet’ type=’text/css’/>

Step 3: Now find </head> tag and paste the below code just above/before it,

<script src=’https://c2504d423f630716dd44709fad1630f8db1c1d91.googledrive.com/host/0B8w-DyA2IWavTGJrVE02SGZ4RWM/calendar.js’ type=’text/javascript’/>

Step 4: After adding these style sheet and JavaScript in your template Save your template and go to Post editor section. It can be navigated to Blogger >> New Post >> HTML Section.

Step 5:There paste these coding,

<div id=”my_calendar” style=”clear: both; float: left; margin-left: 150px; width: 230px;”></div>
<script>
var myCalendar = new Calendar() ;
myCalendar.myName = “myCalendar” ;
myCalendar.parentElement = “my_calendar” ;
myCalendar.loadCurrentDate(2014,9,1) ;
myCalendar.changeStyle(“blue”) ;
myCalendar.allowMonthChange(“yes”) ;
myCalendar.addDateToHighlight(2014,9,25) ;
myCalendar.addDateToHighlight(2014,9,30) ;
myCalendar.addDateToHighlight(2014,10,2) ;
myCalendar.addDateToHighlight(2014,10,11) ;
myCalendar.display() ;
</script>
<div style=”clear: both;”>

Step 6: Now publish the post and check your blog. That’s it!

Demo:

Hope you like this new tool and it would be informative to all. If you’ve some knowledge in JavaScript then you can make some customization on it to look so awesome. Do you face any problems? Then make us to know via comments! Do likes and shares with your blogger friends and make us grow! Happy Blogging;) [via]