Mil Trucos Blogger

Añadele estilo a los textos citados de tu blog

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Los 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.


 He aqui algunos estilos de citados hechos con CSS.

 Para agregar el anterior estilo de citado pega antes de ]]></b:skin> lo siguiente:

.post blockquote {
max-height: 400px;
width:450px;
margin-top:10px;
margin-bottom:10px;
margin-left:35px;
border-left:5px solid #dadada;
border-top:1px solid #dadada;
border-bottom:1px solid #dadada;
border-right:1px solid #dadada;
overflow:auto;
background:#fff url(https://lh5.googleusercontent.com/-f5pQL971Jg4/TYaSXKTKggI/AAAAAAAAAek/aReaOraSA2I/s1600/%2528PNG+Imagen%252C+10x10+pixels%2529.png) repeat;
padding:10px 10px 10px 15px;
}

 

 Para agregar el anterior estilo de citado pega antes de ]]></b:skin> lo siguiente:

 .post blockquote {
max-height: 400px;
width:450px;
margin-top:10px;
margin-bottom:10px;
margin-left:35px;
border-left:5px solid #dadada;
border-top:1px solid #dadada;
border-bottom:1px solid #dadada;
border-right:1px solid #dadada;
overflow:auto;
background:#fff urlrepeat;
padding:10px 10px 10px 15px;
}

Estos son solo unos ejemplos de las multiples formas de estilos que se pueden añadir al texto citado,si quieres añadir tu propio estilo busca la siguiente URL en el primer codigo y reemplazala por la URL de tu imagen.

https://lh5.googleusercontent.com/-f5pQL971Jg4/TYaSXKTKggI/AAAAAAAAAek/aReaOraSA2I/s1600/%2528PNG+Imagen%252C+10×10+pixels%2529.png

Espero que os guste el tuturial y les sea de utilidad.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

19 Comentarios

  1. Diciembre 26, 2011    

    Perfecto esto es lo que yo te decia la otra vez ¿verdad? 😀

  2. Diciembre 26, 2011    

    Administrador@ si eso era lo que me pedias y por eso hice el tutorial,espero que se de tu agrado.

    Saludos :]

  3. Diciembre 26, 2011    

    ¡Es perfecto Juviano! Me vino de maravilla! Gracias por tu aporte, y antes de hacer algo mal una ves que agrego el codigo a mi plantilla para que lugo aparezca en las entradas ¿que deberia hacer? Gracias de antemano :]

  4. Diciembre 26, 2011    

    No espera ya esta jaja! Gracias Bro gracias por todo! 🙂

  5. Diciembre 26, 2011    

    Administrador@ de nada que bueno que te haya servido,veo que tienes un blog de ayuda blogger tambien,suerte con tu proyecto. 😎

  6. Diciembre 26, 2011    

    Ahh, si lo empeze hace dos dias ya casi lo termino, si la verdad en tu blog aprendi muchisimo, eso me hace sentir que ya puedo enseñar a los demas, un saludo enorme! 🙂 Gracias!

  7. Diciembre 26, 2011    

    Hola! No acabo de entenderlo bien. ¿Se supone que solo tengo que pegar antes de ]]> en la edición html de mi plantilla el código que das (una vez), y que entonces, cuando realice una entrada con un texto qeu tenga comillas, me lo destacará de una manera diferente al resto del texto de la entrada??

  8. Diciembre 27, 2011    

    Administrador@ pues te deseo nuevamente mucha suerte.

    No sin MyMakeUp exactamente tu lo haz dicho perfecto. :winky:

  9. Diciembre 27, 2011    

    Hola Juvinao, necesito tu opinión sobre mi nueva plantilla, puedes ojearla en:
    http://superbloggeroswebs.blogspot.com

  10. Diciembre 27, 2011    

    Juan Gonzalez esta buena la plantilla pero creo que necesita mas orden visual osea acomodar mejor una que otra cosa,esa es mi opinion.

    Saludos 😀

  11. Diciembre 30, 2011    

    Me ha sido de mucha utilidad esta entrada Juvinao, mira que llevo tiempo con blogger…pues no sabía esto.

    Antes siempre mencionaba los comentarios con Fieldset y legend, que error ejejej

    Gracias por compartir informacion 😀

  12. Diciembre 30, 2011    

    Dryken me alegra mucho que te haya servido esta entrada,Saludos amigo 😀

  13. Enero 24, 2012    

    Wow! Qué buen tip! :))
    Gracias por compartirlo, tenía mucho tiempo buscando algo así.
    Salu2 :))

    • Enero 24, 2012    

      Que bueno que te haya gustado,gracias por comentar

  14. Diciembre 24, 2012    

    ¡TE AMO!
    Había estado buscando este tutorial por tanto tiempo. Soy tu fan la verdad.

  15. Afm Afm
    Enero 14, 2013    

    Este comentario ha sido eliminado por el autor.

  16. Afm Afm
    Enero 14, 2013    

    Ya lo he solucionado jeje esque en mi caso no era .post sino sin el .post para que funcione.

    Un saludo!

    • Enero 15, 2013    

      Afm eres muy bueno con esto de los codigos, saludos amigo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo