Personaliza el blockquote

Sábado, 11 de agosto de 2012.Publicado en Secciones » Tutoriales.
Hola creativos, ya saben que me gusta mucho el diseño web así como el diseño gráfico y es por eso que vengo con muchos tutoriales para ayudarles a personalizar -Personalizar = A su gusto- su blog. Ahora les quiero enseñar como personalizar el blockquote, ¿No sabes que es eso?, es lo siguiente:

Una cita o un comentario entre comillas, yo les enseñaré como personalizarlos, les daré varios ejemplos y ustedes escojeran el que más les guste para pegarlo en el HTML de su plantilla.

Primero explicaré como insertarlo en su blog, solo sígan los pasos:

  • Abren la plantilla de su blog y le dan en editar HTML
  • Luego usando CTRL+F buscan "blockquote{" o "blockquote {" y remplazan todos sus atributos con el que les guste.
  • Lo personalizan a su gusto y listo.

Estilos de blockquote


01. Blockquote con puntas normales sin bordes

02. Blockquote con puntas normales con borde sólido

03. Blockquote con puntas normales con bordes punteado

04. Blockquote con puntas redondeadas sin bordes

05. Blockquote con puntas redondeadas con borde sólido

06. Blockquote con puntas redondeadas con borde punteado

07. Blockquote con imagen de fondo y borde sólido

08. Blockquote con imagen de fondo, borde sólido y redondeado

Códigos de cada estilo de blockquote

Blockquote 01:
blockquote{
padding 10;
background: #f0ffff;
border: none;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px

Blockquote 02:
blockquote{
padding 10;
background: #f0ffff;
border: 1px solid #B0E0E6;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px

Blockquote 03:
blockquote{
padding 10;
background: #f0ffff;
border: 1px dashed #B0E0E6;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px

Blockquote 04:
blockquote{
padding 10;
background: #f0ffff;
border: none;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px

Blockquote 05:
blockquote{
padding 10;
background: #f0ffff;
border: 1px solid #B0E0E6;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px

Blockquote 06:
blockquote{
padding 10;
background: #f0ffff;
border: 1px dashed #B0E0E6;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px

Blockquote 07:
blockquote{
padding 10;
background: url(http://static.myopera.com/community/graphics/speeddials/Opera-Background-Blue-Swirls.jpg);
border: 1px solid #B0E0E6;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px

Blockquote 08:
blockquote{
padding 10;
background: url(http://static.myopera.com/community/graphics/speeddials/Opera-Background-Blue-Swirls.jpg);
border: 1px solid #B0E0E6;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px

Nota importante: Ustedes pueden tomar los diseños que aquí les traigo aunque se los dejo bastante sencillos para que unicamente vayan cambiando valores, si quieren otros colores aquí les dejo un enlace a una página web con varios colores para el CSS. Tambien pueden cambiar los valores del radio, cambiar el tamaño o color de borde, etc.

Cómo poner comillas antes y después del blockquote

Deben pegar este código antes de la etiqueta <"/b:skin"> (Sin comillas)

blockquote:before {
content: "\201C";
font-family: Georgia;
padding-right: 3px;
font-size:40px;
font-weight: bold;
vertical-align:middle;
}
blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
padding-left: 2px;
font-weight: bold;
vertical-align:middle;
}
Creo que esto puede ser todo por el momento, si tienen dudas dejenme un comentario y si necesitan ayuda con cualquier cosa respecto al diseño de su blog díganmelo y con gusto les ayudo.
Actualizado el día miércoles, 5 de febrero de 2014.

COMENTARIOS BLOGGER

  1. Probaré con el 3, y si me gusta lo dejo 3:, Te afiliaré*P* Y me afilias, sí!? c;

    Besos!!

    ResponderEliminar
  2. ;O, estuve intentando y no sé como, es decir, es que se ven los cambios? :$$ Soy un poco torpe para estas cosas!:$

    ResponderEliminar
  3. Pau con gusto te afilio :) jeje revise tu código HTML y es que no hay ningún blockquote{, solo escoje el que te gusto y pegalos antes de la etiqueta <"/b:skin"> (Sin comillas) y ya te aparecera así cada vez que uses la etiqueta <"blockquote"> (Sin comillas) sino avisame y veo como te ayudo :) Saludos!

    ResponderEliminar
  4. Eres un máquina, pero yo ya desistí, ni siquiera fui capaz de poner los dibujitos y eso que me mandaste todo por correo jeje!
    Ya veo que te han ido agregado varias personillas, me alegro que sirva de algo ser tu madrina!
    Un besazo!

    ResponderEliminar
  5. Hola!, me encontre con tu blog merodiando y me gusto mucho, ya que yo tambien siento una atracción hacia los codigos webs bueno aunque es una relacion entre amor y odio xd, encuentro tu blog muy interesante, tienes variadas temáticas, te sigo saludos!

    ResponderEliminar
  6. Jejejeje Gracias madrina Mari jejeje si necesitas ayuda en lo que sea explicame bien y con gusto C= jeje Si eh! Muchas gracias!^^ Un beso y abrazote!=)

    Ola Astrolabio C= jeje Me da gusto que te guste mi blog y así es jeje no tengo un solo tema en especial :) Gracias y también te sígo :)

    ResponderEliminar
  7. hola!!! Oye luis no puedo poner el codigo porque no pe aparece blockquote en mi plantilla, que puedo hacer???

    ResponderEliminar
  8. Arturo si estas seguro de que no aparece copia todo el código CSS, por ejemplo, si quieres el 5, en tu plantilla (antes de "/skin" pega:

    blockquote{
    padding 10;
    background: #f0ffff;
    border: 1px solid #B0E0E6;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    }

    Prueba de esa manera :), estaré pendiente. Saludos!

    ResponderEliminar
  9. Hey!! luis no puedo ponerlo, porque ni /skin me aparece, no se si tu pudieras ayudarme, te pondria como editor de mi blog y me ayudarias?? gracias por todo de antemano

    ResponderEliminar
  10. Perdon por la demora Arturo, quizás fue el cambio en la apariencia del editor html de blogger, con gusto te ayudaría :) Saludos

    ResponderEliminar

No te pierdas ninguna publicación... suscríbete y recíbelas por correo electrónico »

Creative Commons License
Todas las fotografías y diseños de Luis Alejandro Corona se encuentran bajo una Licencia Creative Commons 4.0. Esto significa que si quieres usar mis imágenes para cualquier página web puedes hacerlo, es simple, solo tienes que mencionar al autor (que soy yo) y poner un enlace a este blog o a alguna de mis redes sociales. Para cualquier otro uso ponte en contacto conmigo. Las imágenes de terceros que hay en el blog están bajo la licencia de sus legítimos propietarios.
© 2017 Luis Alejandro Corona Ramírez. Todos los derechos reservados - All Rights Reserver. + Info ( Volver arriba ↑ )