Free Mini Calendar Icons & Blogger Tutorial

For our first "freebie," we have 10 free mini calendar icons (transparent PNG format) in a multitude of shades, along with step by step instructions on how to create a "Calendar Style" post date in Blogger blogs. We must thank @virtuosoblogger for originially showing us how, you can read his tutorial about it at his blog. Here we use the same technique and script only slightly modified.

Download Zipped Icons

Step 1 Select Date Header Format
The first thing we are going to do is select the appropriate Date Header. From the Blogger Dashboard, select the tab labeled, "Settings," and from there the subcategory "Formatting." For the "Date Header Format" choose the option that reads "DD Month YYYY," with no commas. Figure 1.1 shows us are selecting, "28 October 2010" as our "Date Header." Once the correct Date Header format is selected, scroll to the bottom of the page and select "Save Settings."

Figure 1.1

Step 2 Editing HTML
Now we are going to do a little editing within the code. So from the Dashboard again, select the tab labeled, "Design," and from there the subcategory "Edit HTML." It's a good idea at this point to click the "Download Full Template," link in case you would like to go back or make any mistakes.

Check the "Expand Widget Templates" box. When editing the code, it is recommended that the contents of the HTML be copied from the Dashboard and then pasted into a separate text editor such as notepad, where a "Find" feature could be utilized.

Step 3 Adding The Script
The first modification to the code will be to add the small bit of JavaScript shown in the box below. Copy and paste that script in your template code, just after </head>

  <script>
function replace_date(d)
{
var da = d.split(' ');
month = "<div class='month'>"+da[1].slice(0,3)+"</div>";
day = "<div class='day'>"+da[0]+"</div>";
year = "<div class='year'>"+da[2]+"</div>";
document.write(month+day+year);
}
</script>


Step 4 Replacing Date Header
Use your text editor's "Find" feature to search for the existing date header code in your template. To do this search for this in your code:

<data:post.dateHeader/>


And replace it with our relevant date header script below:

<div id='date'>
<script> replace_date('<data:post.dateHeader/>');
</script>
</div>

Step 5 Choose Calendar Image
Once you have selected the image you would like to use for your post date calendar, upload it to your image host and copy it's URL

Step 6 Adding the CSS
Paste your image URL in the following CSS where it says YOUR IMAGE URL. Then copy and paste the entire CSS code that follows into your template HTML before ]]></b:skin>


#date{  background-image:url(YOUR IMAGE URL);
        background-repeat:no-repeat;
        height:50px;
        width:50px;
        margin:0 10px 0 -60px;
        text-transform:uppercase;
        text-align:center;
        letter-spacing:2px;
        line-height:1em;
        float: left;
        overflow:visible;}
.day{   line-height:2em;
        font: normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
        padding-top:3px;
        color:#606060;}
.month{ line-height:1em;
        font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
        padding-top:3px;
        color:#ffffff;}
.year{  display:none;}


All the areas of CSS shown in "pink" can be changed to suit your needs, and even more areas can be changed if you really feel like getting crafty with it.

Step 7 Preview & Save
Once you have completed all the previous steps, copy the contents from your text editor and return to the Dashboard HTML editor. Select all the text there and paste your your modified code from the text editor. Preview your template and "fingers crossed" everything looks right, and then save. Figure 2 shows how ours looked.

Figure 2

Because each template is different, sometimes the margin and padding of certain elements will need to be adjusted accordingly. We hope you like these free mini calendar icons and tutorial. Also, there is one drawback, when using this script, posts sharing the same date will display a blank date. To solve this, make sure to use the "Post Options" dialogue box when posting multiple entries per day, and select a different date for each.

Continue Reading »