Listado (índice) de tutoriales con códigos HTML/CSS


Foto cortesía de José Manuel Aguilar
IMPORTANTE: Antes que nada, ¿dónde ubicar los códigos? Hay 2 vías...

...Plantilla > Editar HTML (en adelante "plantilla")

...o Diseño > Añadir un gadget (elemento de página) > Html/Javascript (en adelante "gadget java") según proceda.
Los códigos a copiar van en color azul y dentro de una "cita". Los tags o etiquetas a buscar en la plantilla van en rojo. Para una búsqueda rápida pulsar a la vez Ctrl+F.

Los códigos pueden probarse en el Probador de Códigos antes de publicarlos.


SOBRE EL AUTOR DEL BLOG

  • [www] Añadir cuadro del autor al final de las entradas
  • [www] Destacar comentarios del autor con icono personalizado

FLECHITAS

  • [www] Diferentes flechitas para subir en el blog
  • [www] Flechitas para ir arriba-abajo

BOTONES

  • [www] Botoncitos sociales flotantes en el lateral derecho
  • [www] Botón Pin it! en las entradas
  • [www] Botones redes sociales con contador en el post-footer 

BLOCK/PULL-QUOTES

  • [www] Blockquotes ~ parte 1 
  • [www] Pullquote

SCROLL

  • [www] Scroll vertical en una entrada 
  • [www] Scroll vertical en un gadget (sidebar) 

ENTRADAS

  • [www] Entradas populares con colores 
  • [www] Entradas recientes
  • [www] Entradas al azar  
  • [www] Enmarcar el post-footer (pie de entradas) 
  • [www] Imagen de fondo en el post-footer 
  • [www] "Leer más" personalizado con una imagen
  • [www] Escribir en 2 o 3 columnas 
  • [www] Separador de entradas 

FOOTER

  • [www] Poner un pie de página (footer-wrapper) a lo ancho del blog

SIDEBAR

  • [www] Mostrar/ocultar sidebar

COMENTARIOS

  • [www] Comentarios anidados tipo bocadillo 
  • [www] Últimos comentarios
  • [www] Últimos comentarios (versión mejorada)
  • [www] Formulario de comentarios: diseño completo 

    IMÁGENES

    • [www] Efecto giro 
    • [www] Bordes redondeados

        ENLACES

        • [www] Personalizar los links del blog
        • [www] Poner link del email en una imagen (mailto)
        • [www] Enlace en una imagen 

        ETIQUETAS

        • [www] Eliminar mensaje "mostrando entradas con la etiqueta X" 
        • [www] Editar etiquetas del blog

        GADGETS

        • [www] Gadgets encima de las entradas

        FECHAS

        • [www] Enmarcar la fecha 
        • [www] Fecha debajo de los títulos de las entradas 

        TÍTULOS

        • [www] Centrar los títulos de los gadgets en la sidebar 
        • [www] Centrar los títulos de las entradas
        • [www] Enmarcar títulos de los gadgets de la sidebar 
        • [www] Ocultar el título y la descripción del blog 
        • [www] Poner imagen de fondo a los títulos de las entradas 
        • [www] Poner una línea inferior a los títulos de las entradas

        MARKETING DIGITAL

        • [www] Optimización SEO con meta tags 

        NAVBAR

        • [www] Navbar oculta y visible al pasar el cursor 
        • [www] Ocultar (no quitar) la navbar 

        MENÚS

        • [www] Menú horizontal tipo listón
        • [www] Menú de páginas en la navbar

        OTROS

        • [www] Panel de administración siempre visible
        • [www] Proteger el blog contra el subrayado de texto
        • [www] Paginación para blogger 
        • [www] Personalizar el mensaje de cookies
        • [www] Top 10 visitantes 
        • [www] Click to tweet - Generar tuits personalizados
        • [www] Papá Noel colgante
        • [www] Crear un mapa del sitio 
        • [www] Ocultar créditos "Con la tecnología de Blogger"