Blogger coloca por defecto la fecha de los post en una sola línea, asi que en esta oportunidad vamos a cambiar la apariencia de la fecha en un estilo diferente, el cual podrás personalizarla a tu gusto.1. Ir a Configuración. Después a Formato. De ahí, en donde dice: Formato de cabecera de fecha, escogemos la siguiente opción:
Clic en la imagen para agrandarla
* No te olvides que tienes que Guardar valores.2. Ir a plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios. Después agregas el siguiente código entre <head> y </head>. Preferible que lo pegues al final (antes de </head>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.
<script src='http://andrewhonors.googlepages.com/fecha.js' type='text/javascript'/>
<div class='blog-posts'>
....
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
....
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
4. Una vez ubicado, reemplazas <data:post.dateHeader/> por lo siguiente:
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
5. Seguimos en la Plantilla. El siguiente código lo deje para el último, porque se refiere al estilo de la fecha, el cual se podrá realizar cambios, utilizando tu criterio.
El código lo tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.
El código lo tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.
#fecha {
display: block;
margin: 0px 1px;
float: right;
padding: 5px;
color: #464646;
background: #cccccc;
border: #cccccc 1px solid;
text-transform: capitalize;
}
.fecha_dia {
display: block;
font-size: 16px;
font-weight:bold;
}
.fecha_mes {
display: block;
font-size: 10px;
}
.fecha_anio {
display: block;
font-size: 10px;
}
display: block;
margin: 0px 1px;
float: right;
padding: 5px;
color: #464646;
background: #cccccc;
border: #cccccc 1px solid;
text-transform: capitalize;
}
.fecha_dia {
display: block;
font-size: 16px;
font-weight:bold;
}
.fecha_mes {
display: block;
font-size: 10px;
}
.fecha_anio {
display: block;
font-size: 10px;
}
Explicación:
#fecha {
En margin, ver aquí.
float, puedes cambiarlo de posición, sea left o right.
padding, puedes aumentar o disminuir el formato de la fecha.
color y background, puedes modificar los colores del texto como el fondo.
border, cambiar el color y en 1px por otro valor, sea 2 ó 3 (aumenta mas el borde).
.fecha_dia, .fecha_mes y .fecha_anio {
En font-size, puedes cambiar el tamaño de la letra.
#fecha {
En margin, ver aquí.
float, puedes cambiarlo de posición, sea left o right.
padding, puedes aumentar o disminuir el formato de la fecha.
color y background, puedes modificar los colores del texto como el fondo.
border, cambiar el color y en 1px por otro valor, sea 2 ó 3 (aumenta mas el borde).
.fecha_dia, .fecha_mes y .fecha_anio {
En font-size, puedes cambiar el tamaño de la letra.
Vía: Recursos Blog & Web
Entradas
0 comentarios:
Publicar un comentario