The Wattpad Avengers - Blog de Reseñas y Ayuda a Escritores: Consejo Bloggero: Como Añadir un Blockquote Bonito a tu Blog

Consejo Bloggero: Como Añadir un Blockquote Bonito a tu Blog

¡Hola a todos! Sé que no tiene nada que ver con literatura y blablabla... directamente. Pero, ¿a quién no se le ha pasado por la cabeza iniciar un blog literario donde dejes tus reseñas, opiniones etc.? 
Además, una admin me dijo que lo hiciera, alegandoq ue soy una "experta en blogs" jaja.

Bueno, pues con este truco, el blockquote (cita de texto) te quedara precioso.

Entonces, para ponerlo, tendríais que ir a:


1. Plantilla
2. Editar HTML

Y ahora es cuando hay que buscar los códigos... Para que nos sea mucho más sencillo, pulsamos Ctrl + F y en la ventanita que se te abrirá en la esquina derecha superior, escribimos ]]></b:skin>.

Justo encima de ese código debéis pegar lo siguiente:

blockquote:hover{
border-left:0px solid #C090FF;
border-right:20px solid #FF7098;
color:#555;
}
.header .widget {
 text-align:center;}
.header img {margin:0 auto;
}
blockquote {
color: #000;
background:url(URL DE IMAGEN);
padding:8px;
border:1px dashed #959595;
border-radius:10px;
}
blockquote:hover{
-webkit-transition-duration:0.5s;
color:#000;
padding:8px;
border-radius:10px;
text-shadow: 1px 1px 1px #808080;
}

Y ahora, a editar el código.
Dudo que todos tengais el blog rosita o acaso lo queráis, así que vamos a editar un poco para que quede al gusto de todos ^^

Rojo: 20px es el ancho que le queréis dar a la barra complementaria que sale cuando pones el cursor encima. Cuanto más grande el número, mas ancha será la barra.

Azul: Ese código de números realmente significa el color. Hay páginas web que se encargan de darte los códigos, sólo tienes que buscar "Tabla de colores" en google y ver el color que te gusta más, copiar el código y ponerlo.
En el primer caso, es el color de la barra complementaria, y en el segundo, el color del borde.

Violeta: Aquí es muy sencillo. Este es el fondo del blockquote, el cual yo le puse una imagen muy clara. Vosotros podéis ponerle la imagen que queráis, simplemente poniendo la URL de una imagen donde os indiqué.

Verde: "Dashed" significa del inglés "discontinuo". Es el borde que rodea el blockquote. Se puede cambiar por "solid" (una linea sólida), dashed (el ejemplo que véis) o dotted (muy parecida a dashed, pero en vez de guioncitos son puntos). También están varias opciones más, pero estas tres son las más básicas y las que mejor quedan (según mi criterio).

Naranja: Ese número se refiere a los bordes redondeados. Si no quieres que los bordes del blockquote sean redondeados, ponedlo a 0px, pero si queréis que lo sea, os recomiendo que juguéis con los números hasta que encontréis la medida que os guste. Cuanto mas alto el número, más redondeado.

Lo siguiente sería guardar los cambios.

Y bueno, esos serían básicamente todas las ediciones que se pueden hacer. Espero que os haya gustado el código y si decides utilizarlo no olvides dar créditos a EreaChan o directamente a The Wattpad Avengers. Y si tenéis alguna duda, no dudéis en preguntar. Espero que me haya explicado bien.

¡Muchas gracias por su atención!

11 comentarios :

  1. Respuestas
    1. De nada! Me alegra que te gustara jej

      Eliminar
    2. AYUDA!!! No me sale la imagen de background

      Eliminar
    3. ¿Cómo pusiste el código? Es decir, en la zona del background, ¿quitaste los paréntesis también, porque no se deben quitar.
      De todas formas, si no es eso, pasame el código que tu has puesto e intentaré ver qué pasa :)

      Eliminar
    4. No, es que mirando el código ustedes no han puesto la url del background que usaron para el ejemplo. Habría que buscar una propia o tomar prestada la que tienen :D

      Eliminar
    5. Gracias por el tutorial, a mí me hace mucha falta también, jeje.

      Eliminar
    6. ¡Muchas gracias! :D

      Y pensaba que lo de "URL DE IMAGEN" estaba claro jaja. AL parecer no >-<

      Eliminar
  2. Entiendo todo lo que explicaste, lo que me causa complicaciones es que no puedo copiar y pegar el código que dices, porque tu blog no me deja, y se me hace difícil copiar todo =(

    ResponderEliminar
  3. Muchas gracias, trataré de ponerlo en práctica (soy un poco negada para esto jejeje)

    ResponderEliminar