Pretty Dates for Contempo on Blogger...
After the dust settled following the release of the New Blogger Templates, I took the opportunity to consider making some improvements to my site. I had seen some pretty dates on other sites and I thought that I might want to look into this for my own site. With Blogger, you have some control over the general format of the dates on your site, but, in the end the dates are just plain, boring text.I wanted something a bit nicer for the front page of the site, so, after poking around in the inner workings of my site and reviewing a number of pretty date schemes and advice from other sites, I came away with two thoughts. One, there wasn't really a convenient way to reformat the existing date text using only CSS. And, two, after reviewing a number of suggestions from other sites on how to make pretty dates, a common theme among the advice for making dates look pretty, is that the dates need to be broken up into their component parts (i.e.: Day, Month and Year) and the the date parts themselves need to be in some sort of wrapper or container. With this in mind, I came up with a simple structure for the date:
Jun
30
2017
So, the first task was, with the aforementioned date structure in hand, I needed to style the day, month and year. The first part of the CSS code (item_date *) (see below) ensures that each of the date parts are centered and that each dart part fills the entire width of the date wrapper (item_date). The month is supposed to be uppercase, so, there is a text transform for that. In addition, the month is positioned at the top of the date wrapper. I wanted the day to be a larger size than the month, so, I made the size 170%. Also, the day is positioned at about one-third of the height of the date wrapper -- after some trial and error, I came up with .8em. I wanted the year to be a smaller size than the month, so, I set the size at 75%. I positioned the year at the bottom of the date wrapper. Background colors are applied to the month and year.<div class="item_date"> <div class="item_month">Jun</div> <div class="item_day">30</div> <div class="item_year">2017</div> </div>
The next step was to style the date wrapper itself. In order for the individual date parts to appear in the proper places within the date wrapper, the date wrapper needs to have enough room for all of the date parts to fit. In addition, I wanted rounded corners and a border around the date wrapper. The date wrapper and the individual date parts need to be flexible enough to accommodate large or small fonts, so, I used EM units to specify the height and width of the date wrapper. In the CSS for the date wrapper, the day will use whatever background is specified for the date wrapper (in the example below: white).
In order to ensure that the fonts are scaled properly, I set a default font size in the date wrapper. So, if you need the date overlay to be bigger or smaller, you would just change the one font size in the CSS for the date wrapper (item_date). The yellow highlighted line indicates the default font size for the the date wrapper. The day and year date parts will be scaled up or down based on the size specified in the date wrapper. The orange highlighted lines indicate the position of the date stamp relative to the top-left corner of the post snippet. The position I chose to use, seems to work reasonably well for post titles that are one or two lines. Your mileage my vary. To add the following CSS to your site, from the Theme menu, select Customize > Advanced > Add CSS. Then, copy and paste the following CSS code:
.blog-posts article .item_date {
font-size:10pt !important;
color: black;
background-color: white;
border: 1px solid #999;
font-weight: bold;
-o-border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
border-radius:6px;
padding:0;
line-height: 1;
display:block;
position:absolute !important;
top:-10px !important;
left:-10px !important;
z-index:10;
overflow: hidden;
width:3em;
height:4.3em;
}
.blog-posts article .item_date * {
display: block;
width:100%;
text-align:center;
}
.blog-posts article .item_month {
background: orange;
text-transform:uppercase;
font-size: 100%;
position: absolute;
top: 0;
line-height:1.2 !important;
height: 1.2em;
color:#000;
text-shadow:0 1px white;
}
.blog-posts article .item_day {
position:absolute;
top: .8em;
font-size: 170%;
}
.blog-posts article .item_year {
background: orange;
position:absolute;
bottom:0px;
font-size:75%;
line-height: 1.5;
color:black;
text-shadow:0 1px white;
}
If you would like extra credit, you can substitute the background: orange; lines (highlighted above) with a solid color or a gradient. If you would like to create your own gradient, there is CSS Gradient Generator. Two sample gradients follow:Orange-ish:
Light Blue-ish:background: #f38a23; background: -moz-linear-gradient(top, #f38a23 0%, #61c419 50%, #f38a23 100%); background: -webkit-linear-gradient(top, #f38a23 0%,#61c419 50%,#f38a23 100%); background: linear-gradient(to bottom, #f38a23 0%,#61c419 50%,#f38a23 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38a23', endColorstr='#f38a23',GradientType=0 );
The gadget code (see below), parses the existing time object (which contains the publish date of the post in an attribute (datetime)) to create a reformatted date and includes an inline style to display the reformatted date once the script is complete. The gadget code also positions the post snippet to make use of the space formerly occupied by the original date stamp. This gadget is designed to work only on the pages where your post snippets appear -- not on the actual post pages. To install this gadget, from the Layout menu, add a new HTML/JavaScript gadget. Then, open the empty gadget and copy and paste the following code into the gadget:background: #6699cc; background: -moz-linear-gradient(left, #6699cc 0%, #99ccff 50%, #6699cc 100%); background: -webkit-linear-gradient(left, #6699cc 0%,#99ccff 50%,#6699cc 100%); background: linear-gradient(to right, #6699cc 0%,#99ccff 50%,#6699cc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6699cc', endColorstr='#6699cc',GradientType=1 );
<script type="text/javascript">
var d=document;
var articles;
var timeString='';
articles=d.getElementsByTagName('article');
if (articles.length>0){
for (var ac=0;ac<articles.length;ac++){
var articleDivs = articles[ac].getElementsByTagName('div');
var articleTime = articles[ac].getElementsByTagName('time');
if (articleTime.length >0){
var MonthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var articleDate = new Date(Date.parse(articleTime[0].getAttribute('datetime')));
var MonthString = new String("<div class='item_month'>" + MonthNames[articleDate.getMonth()] + "</div>");
var DayString = new String("<div class='item_day'>" + articleDate.getDate().toString() + "</div>");
var YearString = new String("<div class='item_year'>" + articleDate.getFullYear().toString() + "</div>");
timeString = "<div class='item_date' style='display:block'>" + MonthString + DayString + YearString + "</div>";
var isSnippet = 0;
for (var dc=0;dc<articleDivs.length;dc++){
if (articleDivs[dc].className.indexOf('post-snippet')>-1){isSnippet=1;}
}//for dc
if (isSnippet==1){
articleTime[0].style.display='none';
articleTime[0].setAttribute('title','');
for (var dc=0;dc<articleDivs.length;dc++){
if (articleDivs[dc].className.indexOf('container post-body entry-content')>-1){
var timestampString = new String(timeString+articleDivs[dc].innerHTML);
articleDivs[dc].innerHTML=timestampString;
articleDivs[dc].style.position='relative';
articleDivs[dc].style.top='-20px';
articleDivs[dc].style.zIndex='5';
}//if container post-body entry-content
if (articleDivs[dc].className=='post-header-line-1'){
var divSpan = articleDivs[dc].getElementsByTagName("span");
divSpan[0].innerHTML="<br/>";
}//if post-header-line-1
}//for dc
} //is snippet
}//if articleTime
}//for ac
}//has articles
</script>
If the browser does not support JavaScript, the dates should revert to their original format. This gadget was designed to work with the Contempo theme. By the way, the character image is Vocaloid Hatsune Miku. Enjoy.
