Calendar Style Date Stamp in Each Post in Blogger

Calendar Style Date Stamp is Quite Common in Wordpress Blog. But it is always a Challenge in Blogger Platform.

A few days earlier i was looking for a widget for displaying Date Stamp along with each Post. Finally i Got the Widget, but there was some problems in that widget, first it was not according to my requirement. So to make it looking good for my Blog Template i made some changes and finally give it a Beautiful Look. I am sharing with you the same widget. You can see the Love Demo on My Blog along left side of each Post Heading.

So Let’s start with Installation Instructions;

Prerequisite:

Before installing the Widget you have to Change the Date Header format to the Following Style…

• Login to Blogger
• Go to Setting
• Language and Formatting

Then Change the Date Header Format.

Now Go to Layout and Click on Edit in Blog Posts as shown in Image Below;

and Change the Date setting to as shown,

Save Setting and Navigate to Template.

Click on Edit HTML and Check the Box Expand Template Widgets.

 

Step 1:

Now Find This Line by Pressing CTRL+F in Windows

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

 

and Replace it with the Following Code,

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

 

Note: If You find the Code 2 times in step 1, Replace it Twice.

Step 2:

Now find </head> tag and Paste the Following code above/before 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 {
position:absolute;
background: white;
display: block;
width:60px;
height:60px;
float: left;
margin: 0px 2px 0 -60px;
padding: 0px 0 0px 0px;
border: 0;
text-transform: uppercase;

-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
box-shadow: -2px -1px -7px rgb(102, 102, 102);

}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:4px;
text-align:center;
color:#ccc;
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-2px;
text-align:center;
color:#282828;
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828;
}
</style>
</b:if>

 

Customizations:

You Can make Customizations by Changing these values;

• Change the position of Date Stamp by Changing the margin: 0px 2px 0 -60px; in above code.
• Change Shadow color by Changing the rgb(102, 102, 102);
• Change Month Color by Changing color:#ccc; value.
• Change Date and Year color by Changing the color:#282828; value.
• Change Background Color by Changing background: white; value.

If you like my Post please leave you valuable feedback :)

---

Categories: Blogger Tips, How To, Tweaks, Widgets