{Blockquote} ♥ Añadiendo estilo a los textos citados



Holy mis amores, que tal si platicamos un poquillo sobre los Blockquote! ..Les parece bien? ..Bueno pues comencemos!!!

Los blockquote no son mas que textos citados en Blogger, son aquellos que van entre las etiquetas <blockquote></blockquote> y que se ven de un modo diferente al resto del texto.

Y hoy quiero compartirles un estilo de blockquote que muy posiblemente les va a gustar. Personalmente a mi me gusta mucho, por su simpleza y estilo.

Aquí les dejo un ejemplo del mismo, espero le guste:





La primera imagen es como te quedara, la segunda imagen es como se visualiza al poner el cursor por encima. El color gris que esta alrededor es solo que al tomar la captura salio así, pero no te quedara así al usarlo en tu blog, lo que si tendrá es el color purple en los bordes, con la imagen de fondo en tonos purple.

Si te ha gusto este blockquote, te invito a seguir las siguientes instrucciones...

Para agregar este blockquote  ve a "Diseño | Edición HTML" y allí busca la siguiente línea: 

]]></b:skin>

Para buscar la etiqueta anterior solo tienes que presionar en tu teclado: { F3 ó Ctrl + F }
Una vez la encuentres, copia el siguiente renglón de código y pegalo justo encima de ]]></b:skin>

.post blockquote {
max-height: 400px;
width:450px;
margin-top:10px;
margin-bottom:10px;
margin-left:35px;
border-left:5px solid #f75970;
border-top:1px dashed #f75970;
border-bottom:1px dashed #f75970;
border-right:1px dashed #f75970;
border-radius: 15px 15px 15px 15px;
overflow:auto;
background:#fff url(http://3.bp.blogspot.com/-eOEn-fzPsWs/Up5PPzJvPgI/AAAAAAAABVY/cU0mZctCcs4/s1600/bgpolkadothearts.gif) repeat;
padding:10px 10px 10px 15px;
}
.post blockquote:hover {
border-left:5px solid #e0bcd2;
border-top:1px dashed #e0bcd2;
border-bottom:1px dashed #e0bcd2;
border-right:1px dashed #e0bcd2;
border-radius: 15px 15px 15px 15px;
overflow:auto;
background:#fff url(http://3.bp.blogspot.com/-xUQOZgyQjuo/Up5PPVpfgGI/AAAAAAAABVQ/5-vy4woRgHg/s1600/bgcrosspurp.gif) repeat;
padding:10px 10px 10px 15px;
}



Todo lo que esta en este color resaltado  es lo que ustedes pueden modificar a su gusto. Arriba en el código, donde dice 400 allí esta indicando el máximo de altura que tendrá tu blockquote. Si lo quisieras mas grande solo tienes cambiar el numero por un valor mas alto.Y listo! 

Ya tendras un hermoso blockquote en tu blog! 
Espero te hayas gustado, y de ser así te invito a comentarnos y compartirnos la url de tu blog para que podamos ver como te quedo. Cualquier duda que tengas no temas en preguntar, estamos para ayudarte y a la mayor brevedad posible te responderemos!
Dios te bendiga y gracias por estar aquí!

Kiss, MarG  


Related Posts Plugin for WordPress, Blogger...

♥ Se el primero el en dejar su huella en este lugar!

❥ Un corazón agradecido siempre sabe decir gracias
❥ Y la forma mas fácil de decirlo es atraves de tus comentarios..
❥ Al hacerlo, se cordial y respetuoso..
❥ Se de bendición a los demás...
❥ Deja siempre la URL de tu blog para que podamos visitarte..
❥ Copia el código de texto para que agregues emoticones a tu comentario
❥ Para insertar imagen solo utiliza [img]URL de la imagen[/img]
❥ Para cambiar color de texto utiliza [color="red"]Aquí tu texto[/color]
❥ Para agregar un vídeo solo utiliza esto [video]URL del video[/video]
❥ Para crear marquesina se utiliza [ma]Aquí tu texto[/ma]
❥ Y recuerda: Dile NO al Spam...
❥ Bendiciones!

✿ TUS COMENTARIOS ALIMENTAN MI BLOG Y SON CARICIAS DE DIOS A MI ALMA ✿

≧◔◡◔≦ (っ◔◡◔)っ ♥ ❤ ❥ ✿ ☂ ღ ツ ☼ ✿◕ ‿ ◕✿ ❀◕ ‿ ◕❀ ❁◕ ‿ ◕❁ (◡‿◡✿) (っ◕‿◕)っ (►.◄) ╍●‿●╍ (•_•) (◐.̃◐) ..^.^.. ʕ•ᴥ•ʔ εїз Ƹ̴Ӂ̴Ʒ .^◡^. (≧◡≦) ✿❀❁ ° ♥ ❤ ❥ ❣ ღ ♂ ♀ ✔♚ ♛ ✝ ✉ ۵ ϟ

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer


=^.^= APRENDE A CREAR GRAFICAS CRISTIANAS CON NUESTROS TUTORIALES o☂O PARA COMENZAR BUSCA LA PALABRA "ETIQUETAS" EN EL MENU O EN EL TAGS =^.^=
El material compartido en este Blog :b5: es Propiedad Exclusiva de su Respectivo Creador conforme cada material.
Las gráficas que creamos y aquí compartimos son libres de uso, mas NO pueden cambiar, ni borrar, ni alterar nuestra firma ni el diseño de la misma.
Nuestras gráficas son creadas para uso personal, NO comercial.
:b8:Por favor respeta el Derecho de Autor :b8:
Nuestras Gráficas están Protegidas
Si eres dueño de algúna imagen o material utilizado en este blog, y estas en desacuerdo en que sea utilizado por este medio, favor hacérmelo saber vía e-mail para dar los créditos correspondientes o eliminarlo según tu parecer.
Contactame :e6: en : :a5: pinceladasdeprincesa@gmail.com

☂ Este blog tiene días

☂ Siguenos en Twitter ☂