Varios estilos de Blockquotes para tu blog



Blogger nos permite enmarcar ciertas partes que deseamos resaltar en el texto de una entrada, o bien sea para enmarcar códigos cuando se publican tutoriales. A continuación te mostrare varios estilos de blockquotes para que escojas y utilices el que más guste.

Recuerda que puedes cambiar los estilos de los mismo, me refiero a los tipos de bordes, colores, y demás. Es cuestion de que juegues con el código base que mediante este tutorial te dejare.

Recuerda, dudas y preguntas en cuanto a este tutorial, dejarla en los comentarios de este post. Respondere a la mayor brevedad posible. Comencemos:

Nos dirigimos a Tema → Editar HTML, luego has clic dentro del recuadro de código de plantilla y presionamos luego CTRL+F y buscamos .post blockquote o blockquote y borras todo lo que se encuentra entre el { la etiqueta de apertura y la etiqueta de cierre (es decir, los corchetes) }, por ejemplo:

.post blockquote {
borrar todo
el contenido
dentro de los corchetes
}

Recuerda, puede empezar con .post blockquote o blockquote, esto puede variar según la plantilla. En caso de no tener ninguno solo agrega el código que escojas conforme te indico a continuación.

Debes añadir el estilo de blockquote que más te guste justo antes de ]]></b:skin> 
Puedes buscar esa línea de código mediante CTRL+F
Ahora veamos los estilos que mediante este post te presento, escoge el de tu preferencia.

Estilo 1 - Con borde izquierdo y contorneado por líneas



blockquote {
background-color:#F5F5F5; /* Color de fondo */
border-color:#CCC; /* Color del borde */
border-style:dashed dashed dashed solid; /* Borde punteado */
border-width:1px 1px 1px 5px; /* Ancho del borde */
color:#666; /* Color del texto */
padding:10px; /* Espacio entre el texto y el contorno */
}

Tutos Koko Kawaii


Estilo 2 - Comilla en la esquina izquierda con fondo gris sobre el texto




blockquote{
width: 75%; /* Ancho del bloque */
background: #F6F6F6; /* Color del fondo */
position: relative; /* Posición del bloque */
padding: 20px 30px; /* Espacio entre el texto y el contorno */
font-style:italic; /* Texto en estilo cursiva */
border: none; /* Sin bordes */
margin: 0 auto; /* Espacio entre el bloque y elementos externos */
margin-bottom: 15px; /* Espacio entre la parte inferior del bloque y elementos externos */
}
blockquote:before {
background:#2dcb73 url(https://1.bp.blogspot.com/-4xy_Q4dpht8/XKIPIOOjQUI/AAAAAAAASlI/OTlPO3nZvAkbYbfMxhEhtyu8beT_fhSEQCLcBGAs/s1600/Blockquote.png) no-repeat; /* Imagen de la comilla */
content: "\f10e"; /* Icono de la comilla */
position: absolute; /* Posición del elemento */
left: -32px; /* Espacio desde la izquierda*/
text-align: center; /* Alineación del texto */
line-height: 32px; /* Espacio por encima y debajo del elemento */
color: #FFF; /* Color del texto */
top: 0; /* Espacio desde arriba */
width: 32px; /* Ancho */
height: 32px; /* Altura */
}

Tutos Koko Kawaii


Estilo 3 - Borde naranja izquierdo, fondo y contorno gris



blockquote{
margin: 20px; /* Espacio entre el bloque y elementos externos */
color: #666; /* Color del texto */
border: solid 1px #c3c5c9; /* Borde del bloque */
padding: 20px; /* Espacio entre el texto y el borde del bloque */
font-weight:300; /* Grosor del texto */
background: #F8F8F8; /* Color de fondo */
border-left: 20px solid #ef4423; /* Borde izquierdo */
}

Tutos Koko Kawaii


 Estilo 4 - Entre líneas y comillas



blockquote {
background:url(https://2.bp.blogspot.com/-0xcQMZVhqm4/XKGH1vAxusI/AAAAAAAASi4/GptHNL0ne90lA5HcS95w0Qave2bNyjGHwCLcBGAs/s1600/quote.png)no-repeat; /* Imagen de la comilla */
padding-left:32px; /* Espacio izquierdo entre el texto y el borde del bloque */
padding-top:3px; /* Espacio superior entre el texto y el borde del bloque */
margin-left:25px; /* Espacio izquierdo entre bloque y elementos externos */
color:#777; /* Color del texto */
font-style:italic; /* Estilo de letra cursiva */
font-size:14px; /* Tamaño del texto */
line-height:22px; /* Espacio por encima y debajo del texto */
border-top: 1px dotted #b5b5b5; /* Borde superior */
border-bottom: 1px dotted #b5b5b5; /* Borde inferior */
margin-top:10px; margin-bottom:10px; /* Espacio superior entre el bloque y elementos externos */
}

Tutos Koko Kawaii
Koko Kawaii



Confía En Cristo • Tu Jardín De Fe
Vanessa Martinez © 2012-2019

No hay comentarios.:

Bendicenos con un comentario


๑ ALGUNOS PUNTOS A TENER EN CUENTA ANTES DE COMENTAR๑
♣ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~♣

❥ Un corazón agradecido siempre sabe decir gracias..
❥ Y la forma más fácil de decirlo es a través de tus comentarios..
❥ Al hacerlo se cordial, respetuoso y de bendición a los demás..
❥ Deja la URL de tu blog para que podamos visitarte..
❥ Sin embargo, los enlaces inapropiados serán bloqueados
❥ Para poder agregar un enlace activo en los comentarios VER COMO AQUÍ
❥ Para insertar una imagen solo utiliza [img]URL de la imagen[/img]
❥ Para insertar un vídeo solo utiliza [video]URL del video[/video]
❥ Para cambiar color de texto utiliza [color="red"]Aquí tu texto[/color]
❥ Para crear marquesina utiliza [ma]Aquí tu texto[/ma]
❥ Este blog cuenta con varios autores y un administrador
❥ Publicaciones de nuestra autoría llevarán nuestro nombre al final
❥ Con la fuerza de un oso y la ternura de un gato así es #miositopada
❥ NO COPIA, es creativo.. y si toma algo siempre da los créditos :)
❥ POR TANTO, DILE NO AL SPAM, BECAUSE HERE, SPAM BLOCKED
❥ Los comentarios en este blog pasan por un sistema de moderación
❥ Por tanto, NO se aprobarán los comentarios:
• con textos árabes
• con propagandas (spam)
• con mensajes sin sentido al tema publicado
• con promoción a la violencia o discriminación
• con enlaces a páginas inapropiadas o con violencia
• con ofensas a personas, razas, animales, publicaciones o marcas
❤ ¿Algún problema con eso? ... Somos Team RD ... #algunproblema
❤ El respeto ajeno es la paz.. Pero confrontar lo malo y el pecado es una necesidad :)
❤ Simplemente, si te gusta lo que hacemos, entonces revela tu corazón sin temor
❤ Comparte + Síguenos + Comenta = A dar por gracia lo que recibes
❤ Observa + Procesa + Inspírate + Crea = OPIC•NOW | #opicnow
❤ © NO COPY ® BE•ORIGINAL

ʕ•ᴥ•ʔ COMUNICADO IMPORTANTE ʕ•ᴥ•ʔ
Las publicaciones de terceros compartida en este blog serán acreditadas como corresponde, a no ser, que estén sin créditos donde la conseguimos y desconozca los mismos. Por favor, avísanos con respeto mediante un comentario si algo en este blog necesita créditos ♥
•°Vanessa Martinez © 2012-2019°•

✿ Y RECUERDA, TUS COMENTARIOS ALIMENTAN MI BLOG Y SON CARICIAS DE DIOS A MI ALMA ✿
Cuando comentas con amor y respeto ♥ Nos estamos leyendo mis linduras, mis corazones de fe♥

Gracias por tu visita
¡Hola Corazón de Fe... Anímate a Comentar!
Pues me gustaría saber tu opinión sobre este tema. Dejanos saber si el mismo ha sido de utilidad o de bendición para ti, asi como tambien, que otros temas te gustaria que tratemos.
SOLO RECUERDA: No se permiten mensajes ofensivos o que falten al respeto, tampoco spam.. Puedes compartir la URL de tu blog siempre y cuando opines sobre la entrada que estas comentando y que tu enlace no sea spam ni inadecuado. Dichos comentarios serán marcado como spam y eliminados. Si un niño de 10 años no puede leer o ver lo que compartes entonces no es bienvenido aquí.
¡Si me sigues.. te sigo devuelta!
Excepto aquellos blogs con contenido inadecuado.

♥ A la mayor brevedad respondemos los comentarios

Copyright © 2012-2018 CONFÍA EN CRISTO || Theme Base ๑ GGEORGELYS || Deco-Style and Effects ๑ KOKO KAWAII