How To Brand The Blogger Posts Convey A Calendar For The Engagement In

It's quite mutual to come across calendar agency dates adjacent to simply about WordPress posts but for the Blogger platform it isn't ever slow adding it. But who said you lot can't utilization it? You involve to expect no farther than this blog. In this tutorial, we'll larn how to utilization a calendar agency for your Blogger posts date!

DEMO

How to utilization calendar agency dates inwards Blogger

Step 1. Go to "Settings" > "Language as well as Formatting" - "Date Header Format" as well as change the engagement format every bit you lot tin dismiss come across inwards this instance below (first add together day, calendar month as well as lastly year)
 

Step 2. Go to Template > click the "Edit HTML" button

Step 3. Click anywhere within the code surface area as well as press CTRL + F to opened upward the blogger' search box

Step 4. Type or glue the next trouble within the search box as well as hitting Enter to notice it:

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

Step 5. In instance you lot notice it twice, supplant it twice amongst this code:

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

Step 6. Now type this tag within the search box as well as hitting Enter to notice it:

</head>

Step 7. Just inwards a higher house the </head> tag, glue this code:

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
component division changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
twenty-four hr menstruation = "<strong class='date_day'>"+da[0]+"</strong>";
calendar month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
twelvemonth = "<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 agency date
----------------------------------------------- */
#Date {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrRnEMfBGE_dtYJDH6QDPRCjstxDARG6qRaD5crG2zyAvxosYjLOrAp6fzjnRlY_AtFJKn0eZMJXwxw-ewwTlzIhwpeqO6tn79eVREx90YIUgNIvNUgRRj3ysG0VLbkUZXc-E4_FZ0dD1D/s1600/calendar07.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px -40px -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 the Template, hither nosotros tin dismiss brand simply about changes:

- To modify the calendar style, supplant the url inwards bluish amongst yours;
- If the calendar doesn't appear every bit it should, modify -108 amongst 0;
- With light-green are marked the areas where you lot tin dismiss modify the color of the dates

Step 8. Now Preview your Template as well as if everything looks ok, hitting the Save Template button.

That was all... Enjoy!