03 12 2015

Como cambiar el diseño de la fecha en blogger

cmfm1177 blogger, Plantillas de blogger, Tutoriales Blogger, Uncategorized Apariencia, Blogger, código, crear, diseño, fecha, gadgets, plantillas, programación 13

Como cambiar el diseño de la fecha en blogger

Parece mentira pero un detalle como modificar la fecha en blogger ayuda a mejorar y dar personalidad a nuestro blog además cada vez es mas importante la fecha de los post, a parte de que es necesaria para que tu contenido sea considerado fresco por los lectores, por lo que cada vez es mas normal cuidar su diseño para que esta información tan importante salte a la vista.

Los blogs están hechos de pequeños detalles, si no puedes cambiar la plantilla al completo al menos añadir elementos como cabeceras, cajas de autor o en este caso la fecha pueden ayudar a dar un toque mas sofisticado a tu blog de blogger, a continuación te dejo algunos post de personalización en blogger que pueden interesarte:

Sé que la fecha es una de las cosas que mas personas se cargan toqueteando el blog … es normal si tienes algún tipo de estilo en tu plantilla que puede llegar a ser incompatible con el formato de la fecha, es normal cuándo eliges fechas del formato clásico como miércoles 6 de enero de 2014 por que muchas de las plantillas para mostrar la fecha de manera bonita suelen evitar estos formatos complejos y sólo trabajar con 3 parámetros, en ese caso el día de la semana sería el cuarto parámetro (demasiado largo para algunos diseños) y los «de» dificultan el orden del código, además de alargarlo.

barra de menu blogger — En este tutorial puedes hacer tu barra de menú sin javascript!!

Como siempre decir que cada plantilla es diferente no en todas se encuentra la fecha en el mismo lugar, por favor trabajar con una copia hacer un backup y por favor te recuerdo que puedes cambiar tu blog sin sustos.

Este tutorial es algo mas complicado que los tutoriales normales así que paso a paso y despacio, no te saltes ningún paso para cambiar la fecha de los post en blogspot.

Ya que poco a poco te voy acercando al lado oscuro de la programación te recomiendo echar un ojo a esta web: w3schools en la que se explican los parámetros y los standares de los lenguajes de programación mas comunes.

Cambiar la apariencia de la fecha en blogger:

Lo primero para cambiar el diseño de la fecha de las entradas debemos ir a configuración> idioma y formato en blogger.

Tenemos que elegir un formato de fecha sencillo: 12-jun-2015 o 12 junio 2015 esto es muy fácil porque al elegir otro formato si incluye otro tipo de caracteres que no sean el espacio o guión medio complican la programación y el diseño. En el caso de que quieras que la fecha se muestre en un banderín por ejemplo elige la fecha que lleva guiones porque tiene acortada la longitud del mes y no quedará fuera del dibujo el texto.

Empezamos con el código, la primera parte es explicación sobre lo que vamos a hacer para que puedas entender o por lo menos intuir de que se trata, aunque vayas a hacer un copy and paste creo conveniente que veas el razonamiento por si algún día te hace falta con otros elementos de blogger.

Este javascript que nos va a ayudar a «dibujar» la fecha, se muestra mediante <data:post.dateHeader/> Vamos a valernos de la función Split () para separar la cadena de texto que está formada por el día el mes y el año separados por un carácter, esto nos devuelve un array que es algo similar a una lista ordenada, debemos indicar cuál es dicho carácter, si no existe ninguno tomará por defecto el espacio, puedes indicar el elemento de separación el mas común en fechas es el guión -.

var mifecha = '11 Septiembre 2015';
 var fecha = mifecha.split(' ');
 fecha[0] contendrá '11'
 fecha[1] contendrá 'Septiembre'
 fecha[2] contendrá '2015'

En el caso de que no queramos mostrar el mes en números podemos acortarlo usando otra funcion que es slice() que nos acortará las palabras en este caso imagina lo mal que puede quedar una fecha tan larga en un círculo o en una bandera.
Para usar esta función debemos saber esto: los parámetros que van entre paréntesis son el comienzo a partir de que elemento hará el slice, dónde empieza a contar y dónde corta. fecha.slice(inicio,final); el inicio suele ser 0 el final si no se pone dejará el mes completo, el inicio es obligatorio y el final no.
fecha[1].slice(0,3) dará como resultado Sep
fecha[1].slice(2,8) dará como resultado ptiemb
Vamos a desarrollar esta manera de cambiar el diseño de la fecha de tu blog de blogger pero recuerda que no todas las plantillas son iguales, por ello antes explico un poco la lógica para que puedas discurrir por tu cuenta si vas a tener que realizar alguna modificación.

Vamos a ver como nos queda nuestro javascript en este caso quiero que me separe la fecha por el elemento – y que muestre sólo el mes y el día, en este script damos nombre a las clases que nos van a permitir dar estilos diferentes a cada elemento por separado, fday, fmonth y fyear son las variables con las que blogger denomina esos parámetros y de esta manera podremos acceder a ellos. como puedes ver el array lafecha[ ] se encuentra entre los operadores + para formar una string (cadena).

<script type="text/javascript">
function mifecha(esta){
var lafecha = esta.split('-');
fday = "<div class='midia'>"+lafecha[0]+"</div>";
fmonth = "<div class='mimes'>"+lafecha[1]+"</div>";
fyear = "<div class='mianio'>"+lafecha[2]+"</div>";
document.write(fmonth+fday);
}</script>

A la función mifecha la vamos a convertir en una cadena con tres partes, gracias al css y que hemos creado una clase para cada parte de la cadena (midia, mifecha y mianio) podemos darle a cada parte un estilo diferente.

<style type="text/css";gt;
.verfecha { Nombre de la función
float: left; la fecha va a estar en la parte izquierda
text-align:center; el texto estará justificado al centro
background: transparent, color, o una url(dirección de la imagen);
padding: 2px; distancia de los bordes
font-family:Trebuchet MS,Arial,Helvetica,sans-serif; tipo de letra
}
.midia {...  margin, padding y fuente ...} .mimes {... margin, padding y fuente ...} .mianio {...  margin, padding y fuente ...;} </style;gt;

Esa es la lógica y ahora hay que aplicarlo a nuestra fecha del blog, lo primero tenemos que encontrar en que parte del código tenemos que colocar nuestro código. Como cada plantilla es de su padre y de su madre y normalmente el contrl +F no suele funcionar siempre en las plantillas de blogger te recomiendo buscar blog posts.

El script y el css lo podemos añadir después del cierre de la etiqueta </head> porque tenemos divs en la función de nuestro script en el caso de no llevar estos divs sería muy recomendable, aunque el css lo podemos añadir a «la hoja de estilos» que nos brinda blogger mediante la personalización, pero no sé por qué pero no funciona así que ponerla delante del script y así lo encontramos todo mejor, mas sucio mas raro pero «funciona»

<b:if cond='data:post.dateHeader'>
   <h3 class='date-header'><data:post.dateHeader/></h3>
</b:if>

Lo de verde que sería para mostrar la fecha por ello lleva los headings lo vamos a sustituir por nuestro script para mostrar la fecha en el blog.

<div class='verfecha'>
<script>mifecha('<data:post.dateHeader/>');</script>
</div>

No nos tiene que quedar así la fecha en blogger con este mismo estilo, podemos cambiar los colores de cada parámetro, el borde e incluso redondearlo pero os dejo el código de todo para que lo podáis hacer o pegar directamente.
Como puedes ver con la cantidad de estilos que tienes para controlar la apariencia de la fecha puedes hacer con ella lo que quieras.

<style type="text/css">
 .verfecha {float:left;margin:20px;padding:5px;text-align:center;
 font-family:Trebuchet MS,Arial,Helvetica,sans-serif;
 background-color:#ffffff;border:6px solid #999999;}
 .midia {margin:0px;font-size:14px;color:#444444;}
 .mimes {margin-bottom:-3px;font-size:22px;letter-spacing:-1px;color:#444444;}
 .mianio {margin-top:-2px;font-size:16px;color:#444444;}
 </style>
 <script type="text/javascript">
 function mifecha (esta){
 var lafecha = esta.split('-');
 fday = "<div class='midia'>"+lafecha[0]+"</div>";
 fmonth = "<div class='mimes'>"+lafecha[1]+"</div>";
 fyear = "<div class='mianio'>"+lafecha[2]+"</div>";
 document.write(fday+fmonth+fyear);
 }
 </script>

vamos a añadir banderines para que nuestra fecha en blogger quede mucho mas alegre, hay una variedad de colores para que se muestre el día sobre ellos ¿que bonitos a que si?, puedes descargarlos si quieres.

El código es el siguiente, quién dice poner banderines dice mas cosas…

<style type="text/css">
 .verfecha {float:left;width:60px;height:75px;margin:10px;text-align:center;
 background-image:url(http://yoblogueo.com/wp-content/uploads/2015/11/fechas-bonitas-en-blogger.png);
 font-family:Trebuchet MS,Arial,Helvetica,sans-serif;}
 .mimes {color:#ffffff;display:block;font-size:12px;}
 .midia {color:#69a8af;display:block;font-size:20px;padding-top:3px;}
 </style>
 <script type="text/javascript">
 function mifecha(esta){
 var lafecha = esta.split('-');
 fday = "<div class='midia'>"+lafecha[0]+"</div>";
 fmonth = "<div class='mimes'>"+lafecha[1]+"</div>";
 document.write(fmonth+fday);
 }
 </script>

Este es el aspecto de la fecha en blogger con uno de los banderines, este formato es ideal para círculos o para libretas… echa imaginación!

Como puedes ver es relativamente fácil cambiar el aspecto de la fecha en blogger, en caso de que quieras añadir por ejemplo un fondo con textura puedes, una imagen tipo patrón… simplemente con modificar el tamaño de la imagen en la hoja de estilos para que sea del tamaño que la que pongas es suficiente.

13 Comments

Juan Pineda
09/09/2016 @ 7:44 am

Muy buen post, quería preguntarte si hay forma de que la fecha quede a un lado del titulo, al lado izquierdo.

- Carmen Ferreira
  14/09/2016 @ 5:24 am
  
  hola, Hay un post en el blog dedicado a centrar y poner a la izquierda títulos.
  como añadir un icono en el título con CSS, ahí puedes ver cómo se hace
  
Vicenç Mengual
28/01/2017 @ 7:47 pm

Tengo puesta la fecha tipo calendario en las entradas de mi blog. También tengo la fecha arriba en la cabecera. Todo iba bien… hasta ahora. La cabecera está bien, pero el calendario de las entradas no. EN LUGAR DEL AÑO 2017, ME SALE «DE» (EN MAYUSCULAS), o en otras entradas sale «D&#».
He encontrado la causa, pero no lo puedo solucionar. Me explicaré: parece que Google ha cambiado el formato de fecha para mi lengua, el catalán. El verano pasado decia «28 set 2016». Ahora no hay ningún formato sin el «de» y dice «»28 de gen. 2017» Como que tengo configurada la fecha de cabecera en catalán, tengo en el código HTML de la plantilla códigos como este para los meses que llevan apóstrofe: «»de Març»,»d’Abril»». («d&#39″ = d’)
Por eso me aparece, en lugar del año, 2017, DE o bien D&#» !!!
Bien, he descubierto la causa. Ahora la solución, que soy incapaz de configurar: HARIA FALTA UN SCRIPT EN EL CÓDIGO HTML QUE LE DIJERA QUE NO HAY QUE TOMAR EL «DE» O EL «D'» Y PASAR DIRECTAMENTE AL AÑO. SABRIAS COMO HACERLO Y DONDE HABRIA QUE PONERLO? Ten en cuenta lo del principio: tengo fecha tipo calendario + fecha en cabecera, que modifican la plantilla. Si hace falta, te podria enviar estas modificaciones.
MUCHAS GRACIAS POR TU AYUDA Y COMO MÍNIMO POR TU TIEMPO.

- Carmen Ferreira
  28/01/2017 @ 8:53 pm
  
  Hola buenas, este problema pasa mucho lo más fácil y que seguramente te funcione es cambiar año por un número más dado que se supone que cada palabra la separa por «-» dado que le hemos hecho un split en este caso tu has añadido una palabra más a la fecha, día = 0, mes= 1, artículo = 2 y el año = 3
  //«+da[0]+»«; mes = ««+da[1].slice(0,3)+»«; anio = ««+da[3]+»«; document.write(mes+dia+anio); FechaCalendario = d; } //]]>
  O puede ser así pidiendo que en el año la primera palabra la salte y a la segunda muestre 4 dígitos del año
  //«+da[0]+»«; mes = ««+da[1].slice(0,3)+»«; anio = ««+da[2]slice(0,0,4)+»«; document.write(mes+dia+anio); FechaCalendario = d; } //]]>
  No sé si te servirán pero hacer más scripts para eso al final puede crearte problemas en otros puntos del blog
  Un saludo, buen blog!
  
  - Vicenç Mengual
    30/01/2017 @ 12:28 pm
    
    Otra vez yo. Me he fijado en una cosa: el DE que habria que quitar va ANTES del nombre del mes, no antes del año. Por lo tanto no seria «fecha, día = 0, mes= 1, artículo = 2 y el año = 3», sinó «fecha, día = 0, artículo = 1, mes= 1 y el año = 3».
    Habria que modificar el script como corresponda, entonces.
    
    - Carmen Ferreira
      30/01/2017 @ 4:15 pm
      
      No hace falta que me acoses repitiendo el comentario, he dicho que lo siento mucho pero no lo voy a hacer, me parece de mala educación por tu parte insistir
      
  - Vicenç Mengual
    30/01/2017 @ 2:02 pm
    
    Veo que ha desaparecido mi comentario y lo vuelvo a poner. La preposición DE va antes del mes. El orden seria, a mi entender, este: día = 0, preposición DE= 1, mes = 2 y el año = 3. Así se muestra el formato de fecha: ”28 de gen. 2017”. El mes tiene tres letras y un punto.
    Habria que reestructurar el script atendiendo a esto y no lo sé hacer. Me puedes ayudar? Gracias de antemano.
    
    - Carmen Ferreira
      30/01/2017 @ 4:19 pm
      
      No ha desaparecido, es que los comentarios los modero y los tengo que aprobar cuándo llego a casa después del trabajo, te agradezco de antemano que tomes en cuenta no insistir en algo que no es culpa mía, el post está en castellano y no tengo la culpa de que cambies el idioma, no sé en que trabajas pero no creo que nadie que no te conozca de nada te pida que le regales 45 minutos de su tiempo trabajando gratis.
      Lo siento pero encontrarme así la cola de comentarios me parece acoso, te he ofrecido soluciones sencillas que puedan servir a otras personas que tengan problemas con el formato de la fecha.
      Un saludo
      
Vicenç Mengual
30/01/2017 @ 11:49 am

Hola. Gracias Carmen, por responder tan pronto. Siento decirte que ninguna de las dos soluciones funciona. Ahora, en los dos casos me aparece el calendario VACIO!
Y supongo que todas las variantes de formato de fecha por defecto no se pueden modificar de otra manera…
A ver si me pudieras pasar un script para anular ese «DE». Para probar. Si veo que se complica la cosa, siempre puedo volver atrás.

- Carmen Ferreira
  30/01/2017 @ 4:06 pm
  
  Lo siento no tengo ningún script para pasarte, lo siento.
  Te aclaro algo no presto servicio y no trabajo gratis, hay muchos compañeros míos que te lo pueden hacer por un módico precio.
  Un saludo
  
Vicenç Mengual
30/01/2017 @ 12:27 pm

Otra vez yo. Me he fijado en una cosa: el DE que habria que quitar va ANTES del nombre del mes, no antes del año. Por lo tanto no seria «fecha, día = 0, mes= 1, artículo = 2 y el año = 3», sinó «fecha, día = 0, artículo = 1, mes= 1 y el año = 3».
Habria que modificar el script como corresponda, entonces.

- Carmen Ferreira
  30/01/2017 @ 4:13 pm
  
  Te comento, no hace falta que me lo pongas en mayúsculas, lo siento no presto servicio y no me puedo permitir el lujo de dejar mi trabajo para hacer scripts a medida de manera gratuita a cada persona que pasa por el blog.
  
Vicenç Mengual
30/01/2017 @ 12:57 pm

Queria decir mes= 2

Como cambiar el diseño de la fecha en blogger

Cambiar la apariencia de la fecha en blogger:

Related Posts

13 Comments

Deja una respuesta Cancelar la respuesta