Blogger: añadir botón de facebook

Pasos para insertar el botón “Me gusta” de facebook debajo del título de tus entradas de tu blog blogger.

Entras al panel de control de tu blog en : Plantilla > Editar HTML

Ahí entraras en el código fuente de tu plantilla. (Por precaución antes de editar tu plantilla haz una cópia de seguridad: selecciona todo el código y guardalo en un bloc de notas por ejemplo)

Ahora busca la siguiente línea (pincha dentro de la caja del código y pulsa las teclas CTRL + F para buscar):

Pues justo “encima” de esa línea insertas el siguiente código html:

Y para guardar los cambios pulsa sobre el botón “Guardar Plantilla“.

Y el resultado:

WordPress: añadir una determinada clase CSS al thumbnail

La función php the_post_thumbnail de WordPress se encarga de mostrar la imagen destacada de un post/entrada.

Por defecto para mostrar la imagen destacada hacemos esto:

Esto nos genera el html de la imagen con una clase similar a:

Si queremos añadir una clase específica a la imagen podemos hacerlo así:

Y el resultado sería:

CSS: animación circular

A continuación un ejemplo de animación para conseguir en CSS3 un efecto de bola o circulo girando de forma circular indefinidamente:

Resultado:

CSS3: seleccionar los últimos “n” elementos

Algo muy sencillo que me ha preguntado más de un compañero. Si necesitas seleccionar los últimos “n” elementos puedes usar los selectores nth-last-child() y nth-last-of-type() de CSS3.

Un ejemplo muy simple para que veais el funcionamiento. Vamos a seleccionar los últimos 3 elementos de un listado con los reyes del Reino de León, y le vamos aplicar un color rojo de texto rojo y negrita:

  1. García I
  2. Ordoño II
  3. Fruela II
  4. Alfonso Froilaz
  5. Alfonso IV
  6. Ramiro II
  7. Ordoño III
  8. Sancho I
  9. Ordoño IV
  10. Sancho I
  11. Ramiro III
  12. Bermudo II
  13. Alfonso V
  14. Bermudo III
  15. Fernando I
  16. Alfonso VI
  17. Sancho II
  18. Alfonso VI
  19. Urraca I
  20. Alfonso VII
  21. Fernando II
  22. Alfonso IX

jQuery: averiguar cuando finaliza la reprodución de un video html5

Si tenéis un video en html5 y necesitáis conocer el momento exacto en que este acaba de reproducirse en la página web… una forma sencilla de hacerlo es jQuery usando la propiedad “ended” :

Supongamos que tenemos un video:

Y con jQuery detectamos cuando finaliza de reproducirse:

Conociendo esto podéis por ejemplo abrir un lightbox, desaparecer el vídeo y mostrar algún que otro mensaje al usuario, etc… al finalizar la reproducción del video.