Personaliza el blockquote
Sábado, 11 de agosto de 2012.Publicado en Secciones » Tutoriales.
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.
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. 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;
}
Actualizado el día miércoles, 5 de febrero de 2014.
Probaré con el 3, y si me gusta lo dejo 3:, Te afiliaré*P* Y me afilias, sí!? c;
ResponderEliminarBesos!!
;O, estuve intentando y no sé como, es decir, es que se ven los cambios? :$$ Soy un poco torpe para estas cosas!:$
ResponderEliminarPau 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!
ResponderEliminarEres un máquina, pero yo ya desistí, ni siquiera fui capaz de poner los dibujitos y eso que me mandaste todo por correo jeje!
ResponderEliminarYa veo que te han ido agregado varias personillas, me alegro que sirva de algo ser tu madrina!
Un besazo!
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!
ResponderEliminarJejejeje 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!=)
ResponderEliminarOla 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 :)
hola!!! Oye luis no puedo poner el codigo porque no pe aparece blockquote en mi plantilla, que puedo hacer???
ResponderEliminarArturo 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:
ResponderEliminarblockquote{
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!
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
ResponderEliminarPerdon por la demora Arturo, quizás fue el cambio en la apariencia del editor html de blogger, con gusto te ayudaría :) Saludos
ResponderEliminarGracias muy util.
ResponderEliminarqefwefwe PRUEBA
ResponderEliminarprueba
ResponderEliminargweagae
ResponderEliminar