Tuesday, 25 December 2012


Hi friendzz today im going to share How to create calendar dates in Blogger like wordpress.

For adding the calendar style to our blog date header, we should firstly setup the displaying for the date. Log in into your Blogger Dashboard, go to Settings > Formatting - look for the Date Header Format option and change the date so that it is the first day, then the month and finally the year, for example: 28 July 2012 - see the screenshots below

calendar style, calendar icons, blogger tips
If you're using the newer interface: go to Settings > Language and Formatting - Date Header Format and change the date format as you can see in my example below:


Now go to Design > Edit HTML > thick the "Expand Widget Templates" checkbox and search (CTRL + F) the following line:

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

If you find it twice, replace it twice with the code below:

<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>

Now add the following code just ABOVE </head> (CTRL + F to find it)

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSsENMAouniegw0mNR7bD748lL_ZMA5RWSPDv4tDUgoJEQ3qqWBtphiea4kQNloT9UoYhFsE1U0HJLHXiGlAf2U5g7X07MzY9JNDAdFTXWKxKcHqjBdxUP6ZOA4qQ9j8mDWNGLw8vcuVt/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>

Before saving your Template:

  • To change the calendar style, replace the url in blue with yours;
  • If the calendar doesn't appear correctly, change -108 with 0;
  • With green are marked the areas where you can change the color of the dates
Now Preview your Template and if everything is ok, click on the Save button.'

Now You All Done..

0 comments:

Post a Comment

Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. You Can add HTML CODE in comments.
2. You can always Test the tutorial.
3. No cheesy/spam Comments tolerated Spam comments will be deleted immediately upon our review.

Regards,
Saeed Aquib Ahmed :)

Member
Blogger Widgets

Grab This Gadget »

Powered by Tricks Donor
Subscribe
emailSubscribe to our mailing list to get the updates to your email inbox...
Delivered by FeedBurner | powered by Tricks Donor
  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube