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

It's quite mutual to encounter calendar mode dates adjacent to or in addition to then WordPress posts only for the Blogger platform it isn't e'er slow adding it. But who said y'all can't utilisation it? You quest to await no farther than this blog. In this tutorial, we'll acquire how to utilisation a calendar mode for your Blogger posts date!

DEMO

How to utilisation calendar mode dates inwards Blogger

Step 1. Go to "Settings" > "Language in addition to Formatting" - "Date Header Format" in addition to change the engagement format equally y'all tin laissez passer the sack encounter inwards this illustration below (first add together day, calendar month in addition to in conclusion year)
 

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

Step 3. Click anywhere within the code surface area in addition to press CTRL + F to opened upwards the blogger' search box

Step 4. Type or glue the next employment within the search box in addition to hitting Enter to uncovering it:

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

Step 5. In instance y'all uncovering it twice, supervene upon it twice alongside 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 in addition to hitting Enter to uncovering it:

</head>

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

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
business office changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
hateful solar daytime = "<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 mode date
----------------------------------------------- */
#Date {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYgJ5nqHkJXn3BdsJXCxYQVrxxXyQV72UJb9sT1JKDylmdNdzzgbEP2mtcDuVvMgP5iA5Rrix98aUI0wMCgJqGueypuOebGwzutyL7r88poHY_-NkJOgHeVyRyOcXggrwYBvoutuBWcRs_/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 laissez passer the sack brand or in addition to then changes:

- To alter the calendar style, supervene upon the url inwards bluish alongside yours;
- If the calendar doesn't appear equally it should, alter -108 alongside 0;
- With greenish are marked the areas where y'all tin laissez passer the sack alter the color of the dates

Step 8. Now Preview your Template in addition to if everything looks ok, hitting the Save Template button.

That was all... Enjoy!

Share this post