Tutoriales Blogger | Personaliza caja de Comentarios

14 de enero de 2016

Hola Amigos Bloggeros :) esta sección la tenía un poco olvidada pero volvemos con todo. Año nuevo con muchísimas ideas nuevas y buenas, y esta es una de esas ideas (o eso espero) pues vamos a darle un toque especial a nuestros comentarios. Así que, manos a la obra ^^



Vamos a pasar de algo así:

A algo así:




* El Código:

.comment-block { 
      background:#ffffff; /* Color de fondo de los comentarios */ 
      border: 2px dashed #000000; /* Estilo del borde */
      box-shadow: 10px 10px 5px #BDCEEB; /* Sombra de la caja */
      border-radius: 0px;  /* Redondear el borde */
      padding: 5px; /* Espacios alrededor del texto */
   }

* Cambios:
background: Es el color de fondo de lo comentarios, aquí puesto en hexadecimal. Si deseas conocer más colores yo utilizo esta página.

border: Estilo del borde de la caja, o tipo de línea que la rodea, en esta entrada te las menciono.

box-shadow: Es el color de la sombra que bordea la caja.

border-radius: Este valor te permite redondear las esquinas de la caja. con 10 px queda bastante redondeado.

padding: Espacio que hay entre el texto y los bordes de la caja. Con el valor que tiene es suficiente.

* Instalación:

La instalación es bastante fácil ya que no es más que agregar el código con los cambios realizados a la caja de CSS, Para ello vamos a:

Plantilla → Personalizar → Avanzado → Añadir CSS

Y listo, ya tendrás tu caja de comentarios personalizada. He creado algunos diseños de cajas para que veas lo que puedes crear. Si alguno te gusta dejare el código debajo de cada imagen para que sólo tengas que copiar y pegar el código en el apartado CSS.


1)





.comment-block { 
      background:#ffffff; /* Color de fondo de los comentarios */ 
      border: 2px solid #000000; /* Estilo del borde */
      box-shadow: 10px 10px 5px #FD79DC; /* Sombra de la caja */
      border-radius: 10px;  /* Redondear el borde */
      padding: 5px; /* Espacios alrededor del texto */
   }

2)


.comment-block { 
      background:#FFE4F9; /* Color de fondo de los comentarios */ 
      border: 3px double #000000; /* Estilo del borde */
      box-shadow: 10px 10px 5px #ffffff; /* Sombra de la caja */
      border-radius: 0px;  /* Redondear el borde */
      padding: 5px; /* Espacios alrededor del texto */
   }

3)


.comment-block { 
      background:#ffffff; /* Color de fondo de los comentarios */ 
      border: 1px solid #000000; /* Estilo del borde */
      box-shadow: 10px 10px 5px #A5FAF5; /* Sombra de la caja */
      border-radius: 0px;  /* Redondear el borde */
      padding: 5px; /* Espacios alrededor del texto */
   }

4)


.comment-block { 
      background:#ffffff; /* Color de fondo de los comentarios */ 
      border: 2px dotted #000000; /* Estilo del borde */
      box-shadow: 10px 10px 5px #ffffff; /* Sombra de la caja */
      border-radius: 0px;  /* Redondear el borde */
      padding: 5px; /* Espacios alrededor del texto */
   }

¿Qué te parece esta forma de cambiar la caja de comentarios? ¿Cuál te gusta más? Si te gustó por favor no dudes en compartir, me ayudarías mucho. Besitos.

15 comentarios:

  1. HOLAAAAAAAAAAA
    Me gusto mucho!
    Graaaacias! Lo guardare para colocarlo pronto :D

    ResponderEliminar
  2. Hola!
    Gracias por el tutorial, nos presentas ideas preciosas para personalizar nuestra caja de comentarios y darle un toque más chic.
    Besos

    ResponderEliminar
  3. ¡¡Qué tutorial tan útil!! :O Me lo voy a guardar por si algún día me hace falta, que seguro que sí x)

    ¡Besos!

    ResponderEliminar
  4. ¡Que lindo! Esta seccion me encanta porque siempe lo explicas todo super super bien. Muchas gracias

    Un beso♥

    ResponderEliminar
  5. Esta genial!!!
    Muchas gracias por compartir!!
    saludos :3

    ResponderEliminar
  6. ¡Hola!
    Gracias por la entrada, me encantan los tutoriales porque yo soy un poco "cateta" para el html jaja
    Me lo guardo por si algún día quiero cambiar :)

    Nos leemos!
    Un besito.

    ResponderEliminar
  7. ¡Hola! Son preciosos :) A ver si un día me paso y lo hago.

    ¡Gracias!

    1beso

    ResponderEliminar
  8. Muchas gracias por estos truquitos ^^

    ResponderEliminar
  9. Quisiera saber??16/2/16 00:18

    Hola! Me encantaría saber como personalizaste el marco de los gadgets que se parten en el titulo me haría un gran favor. Lo estoy buscando por todas partes y solo tu me puedes ayudar.
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola, pues para eso no tengo un tutorial, o por lo menos no a la mano. Mis gadgets están así porque son parte de la plantilla. La encontré AQUÍ y la instalé en mi blog. hay muchas para escoger. Espero te sirva de algo. Saludos.

      Eliminar
  10. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  11. No me funcionó. :/ seguí todos los pasos...

    ResponderEliminar