Using Calendar Icons

This is a tutorial about how to use a calendar icon with your blog. So you can display the date in your calendar right next to your blog. Here's a preview of what I mean:


First of all I'll make the main div which will encompass two smaller div's. The mian div basically contains your calendar icon as a background. Adjust the width and height properties to match your calendar icon. The 'float' property makes the div stay next to the left of your blog's text. .calendar {
background:url(CALENDER-URL-HERE);
height:48px; width:45px;
float:left;
margin-right:5px;} Now you can add the two div's that style the calendars text. One controls the style of yor calendars month and the other is for the calendars date. Adjust the colours and sizes if you want to. .month{
color:#ffffff;
font:10px arial;
text-transform:uppercase;
text-align:center;
padding-top:5px;}

.date{
color:#42424;
font:20px arial;
text-align:center;
padding-top:3px;}
 The coding below is a preview of how to implement the calendar into your webpage. Replace the example of 23rd August with the actual date. <div class="calendar"><br>
<div class="month">Aug</div><br>
<div class="date">23</div><br>
</div><br>
<p>This is a blog blah blah blah. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris non felis. Curabitur dignissim, diam nec imperdiet porta, eros orci feugiat sem, nec condimentum erat lacus a mi. In dictum semper lorem. Nunc bibendum dignissim urna. Duis nec ipsum. Donec vel massa. Mauris sed odio at massa mollis tristique. Sed ut nulla. Cras tincidunt. Donec luctus congue eros. Sed turpis.</p>