Changing the Blogger date posts behave Wordpress Style

By default Blogger template doesn't have "date post" styled-like looks in wordpress theme. In order our blogger template has this style javascript is needed to show this performance.

The following tutorial is about how to style blogger date post  looks like on worpress styling based on blog and web version that I adopted from zona cerebral.  For this purpose, image is needed as background that tons are available for free to dwnload at Xyberneticos.com.

What you need to apply this are including these stages;

1. Change the date format. Get your panel to Blogger formatting options blog as a header and the date select the penultimate option, so it appears as follows: June 14, 2007.
   
2. Amendment to the code. Start edit mode HTML Template options and check the box marked "Expand templates widgets." Now look for the label </ head> (where just styles CSS) and just above it paste the following code block:


<script>
function remplaza_fecha(d){
var da = d.split(’ ’);
mes = "<div class=’fecha_mes’>"+da[1].slice(0,3)+"</div>";
dia = "<div class=’fecha_dia’>"+da[0]+"</div>";
anio = "<div class=’fecha_anio’>"+da[2]+"</div>";
document.write(mes+dia+anio);
}
</script>

You can change the order of appearance of the day, month or year in the last line of this script for which best suits your needs, for example putting (day + month + year).

3. Search your template label <data:post.dateHeader/>. It's more or less in half of your template or a little below. If you can not find it, you can do so through the form of words browser putting "dateheader." Replace them by this Code:
   
   <div id='fecha'> <script> remplaza_fecha ( '<data:post.dateHeader/>');</ script> </ DIV>
   
   You only need to replace this label without touching the rest of the line for you is as follows:
   
   <h2 class='date-header'>
<div id='fecha'> <script> remplaza_fecha ( '<data:post.dateHeader/>');</ script> </ DIV> </ h2>

   
4. Add the CSS styles. Go back to the top of the template where are the rest of CSS styles (above the label "/ head") and includes the following:
   
   #fecha {
   display: block;
   float:left;
   margin: 0 13px 0 0;
   padding: 0 12px 8px 10px;
   color: #333;
   background: transparent url(URL DE TU IMAGEN) no-repeat;
   border: 0;
   text-transform: uppercase;
   }
   
   .fecha_mes {
   display: block;
   font-size: 10px;
   font-weight:bold;
   }
   
   .fecha_anio {
   display: none; /* Si deseas que aparezca el año, cambia el valor "none" por "block" */
   font-size: 10px;
   }
   
   .fecha_dia {
   margin: 8px 0 0 1px;
   display: block;
   font-size: 16px;
   font-weight:bold;
   }
   


If you've chosen a different image to that found on this blog, you'll have to play with the values of "margin" and "padding" (margin and padding) or with all other variables (colour, font-size…) to adapt design of the date corresponding to the picture. If you have questions or a new idea, nor do not expect a second to leave your comments and share your suggestions with other users