Add Calendar To Your Blogger Post


A Calendar image in blog post is commonly found in wordpress blogs. But this time i'm going to show you the similar widget for blogger post.

To have the calendar shown in your post, First you need to set the time format in your blogger dashboard.

 
*Preview of the calendar

Please follow the below steps :  

  • Log in to Blogger.
  • Click Settings > Language And Formatting (New blogger interface)
  • Set the time orderly to have the date mentioned before the year like in below image :


  • Now click Template > Edit HTML > Proceed
  • Tick Expand Widget Templates.
  • Use the Ctrl+F function to find this line of codes :
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
  • You probably will find the above line of codes twice, If you do, REPLACE both with these codes :
<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>
  • Now find this code : 
 </head>
  Copy-Paste the below codes BEFORE the </head> 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 0 -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>
  • Replace the image url with your own url. 
  • In case the calendar is incorrectly displayed, Change -108px to 0.
  • The below color codes are adjustable to your own desired colors :
color:#ffffff; /* Month's color */
color:#282828; /* Day's color */
color:#282828; /* Year's color */
  • Save your template.

    Also from Amazon :   
        1,000 Creative Writing Prompts : Ideas for Blogs, Scripts, Stories and More
        When you finally have the opportunity to sit down and write, you want absolutely nothing to get in your way. In an ideal world, the ideas would flow from head to pen quickly and easily. You would have thousands of ideas at your fingertips. This new idea-generating book makes that dream a reality.

        Becoming A Blogger: How to Start a Blog This Afternoon and Make Money From Home For Years to Come (Make Money Online)
        Some bloggers make small, part-time incomes that supplement their full-time job. Others are making blogging their sole pursuit and earning a huge income each month. Blogging can be a big thing or a small thing depending upon how much time and energy you invest into your new venture.

        Other Great Stuffs : 

        Celebrity Blogging
        Discover The Secrets To Setting Up Your Own Personal Blog For MASSIVE Brand Building... And Build A Name For Yourself That People Will Know, Like And Trust!

        If You Have A Few Hours Per Week, Then We Can Show You How To Earn Significant Income With Your Own Blog! Step by Step. Click to find out !
        Know how to find a great market niche and write a successful blog? Great, you don’t need the steps within each of these components. Know how to design the web page and overcome technical difficulties? No? No problem, Here is a deeper level of instruction for that!

        Struggling to make money online? It's about to get quicker and easier than ever before...Click here !
        How JUST One Of The Blogs I Create During By The Forth Month Has Already Netted Me $2,537.29

        1500 MB of disk space, 100 GB of data transfer, PHP and MySQL support with no restrictions, cPanel control panel, Website Builder, Absolutely no advertising ! Join now : CLICK HERE !

        Read books on your computer or other mobile devices with FREE Kindle Reading Apps.



        ?max-results=10">');

        ?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");