Lugar donde realizo mis pruebas en Blogger

Perfil

Sobre mi

Soy David Martín Surroca, natural de Barcelona y maquetador de páginas web.

Con una amplia experiencia en este campo, he trabajado en varias compañías como maquetador, entre ellas Localbilling, para la cual trabajé como Web Designer Junior, adquiriendo posteriormente la categoría de Oficial de 1ª en el departamento de User Experiencie.

Soy una persona muy creativa, por lo que ese factor junto con mis conocimientos de Photoshop, estandares web HTML, CSS e implantación de librerias Javascript tales como Jquery y Mootools, agilidad integrando plantillas y retocando código ya existente, hacen de mi un gran especialista en la experiencia final del usuario al contar con una gran sensibilidad estética y poner un especial cuidado en los detalles.

Con amplios conocimientos sobre la blogosfera y la publicación personal adquiridos desde el 2005 y con experiencia demostrable mediante mis trabajos en la red, tanto propios como colaboraciones en otros blogs.

Hobbies

Amante de las nuevas tecnologías, de la imagen y el sonido, la fotografia y la música forman parte de mis aficiones, en especial el New Wave, EBM y todo lo que engloba a la música Electrónica y la Cultura de Club.

Contacto

Actualmente me ofrezco como maquetador web, así que si estás interesado en mi trabajo, no dudes en contactar conmigo enviándome un correo electrónico a mi Email, dejándome un mensaje privado en mi Facebook o un tweet en mi Twitter.

Suscríbete al blog


Buscar

Google

Traducir


Estadísticas

  1. Actualizado por última vez hoy
  2. artículos publicados en total
  3. comentarios han dejado los lectores
  4. Free counter and web stats Estadísticas completas

Datos del Usuario

  1. Tu sistema operativo es
IP

Atajos

  1. Agregar a Favoritos o Marcadores Ctrl D
  2. Modo Pantalla Completa F11
  3. Salir Modo Pantalla Completa Alt F6
  4. Aumentar el tamaño Ctrl +
  5. Disminuir el tamaño Ctrl -
  6. Volver al tamaño por defecto Ctrl 0
  7. Imprimir Ctrl P
  8. Guardar página completa en tu equipo Ctrl S

Personalizando las fechas en los posts

Como puedes observar, la fecha en las entradas del blog ya no tiene el formato por defecto que viene con la plantilla original, sino una hoja de papel con las esquinas dobladas, pues bien, debo decir que la información para realizar dicha tarea la he extraído de un blog al que he conocido hace unos 3 dias escasos llamado La Bloguería, bajo mi punto de vista es un gran blog, una bitácora con mucho estilo e información muy interesante ;) aconsejo su lectura.

Procedamos a personalizar la fecha de las entradas del blog:

Lo primero que debemos hacer es configurar el formato de la fecha tal y como se indica en la imagen, para ello debemos ir a la pestaña Configuración y una vez en ella a la pestaña Formato.



Y ahora vamos con el código.

En primer lugar, vamos a la edición HTML de la plantilla, guardamos una copia por lo que pueda ocurrir, marca la casilla de expandir artilugios, y busca donde empieza el cuerpo de la página, es decir, el <body> ayudándote con el buscador (CRTL +F). Añade este código <script> justo después:

<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>"; //Le otorgamos una clase al día
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>"; //Le otorgamos una clase al mes
anio = "<div class='fecha_anio'>"+da[2]+"</div>"; //Le otorgamos una clase al año
document.write(dia+mes+anio);
}
</script>

En segundo lugar, buscaremos esta línea:

<data:post.dateHeader/>

(Insisto: pégala en la barra de busqueda que se abre con CTRL + F y te llevará directo a esa parte del código).

Sustitúyela por ésta:

<div id='fecha'><script>remplaza_fecha('<data:post.dateHeader/>');</script></div>

Y por último, añadiremos el CSS justo antes de ]]></b:skin>.

#fecha {
display: block;
margin:0 10px;
float:left; /*posiciona la fecha a la dcha. o a la izda.*/
padding: 5px;
color: blue;
background-image: url(URL IMAGEN); /*puedes cambiar la imagen por color*/
border:red 3px 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;
}

Y eso es todo, ¿ves que fácil?

Recuerda que todos los experimentos que vayas encontrando en el Laboratorio Sin Destino son para blogs de Blogger, en otros blogs es muy probable que peten, aunque si eres un poco científico podrás modificar el código del experimento a tu antojo y adaptarlo a tus necesidades.

Via | La Bloguería te ayuda a personalizar las fechas de las entradas de tu blog

Posts relacionados:

  1. Ocultando las fechas en los posts

  2. Añadiendo un icono a las fechas de los posts

+ info Via Vagabundia | Blogger: la fecha de los posts un post muy completo donde encontrarás toda la info necesaria y una serie de iconos tipo calendario para descargar.

0 comentarios:

Calendario

Loading...

Lista de archivos

Archivos por Etiquetas

Entradas+Recientes

Comentarios

Lo+Comentado

Los Que+Comentan

 
Laboratorio Sin Destino © 2008 Por David Martin Surroca - Plantilla basada en *Templates para Você*