¿Cómo utilizar un bloque entrecomillado? (blockquote) -61-
Blockquote.- Define una cita. Es comúnmente usado para definir citas largas como párrafos. <blockquote> </blockquote>En algunos blogs/sitios web encontramos citas o frases con una imagen de unas dobles comillas de apertura, el cual nos puede servir para citar algo que dijo alguna actriz, cantante, entre otras cosas.
1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.
blockquote {
background: url(http://aquí-la-direccion-de-la-imagen) no-repeat 0 3px;
color: #666;
padding-left: 25px;
font-size : 15pt;
font-style: italic;
margin-bottom: 1px;
display:block;
padding-top:5px;
}
Explicación
- En url, se debe poner el enlace a la imagen con las dobles comillas.
- En padding-left, sirve para mover el texto entre le borde izquierdo.
- En font-size, podemos modificar el tamaño de la fuente mostrada.
- En font-style, define que la fuente se muestre en una de tres formas: normal, italic u oblique (inclinada).
- En padding-top, sirve para desplazar el texto hacia abajo.
2. Para que las dobles comillas tengan efecto en una entrada hacemos lo siguiente:
Escribimos alguna cita o frase, luego lo sombreamos y clic en bloque entrecomillado o sino en edición de HTML también lo podemos insertar.
- En url, se debe poner el enlace a la imagen con las dobles comillas.
- En padding-left, sirve para mover el texto entre le borde izquierdo.
- En font-size, podemos modificar el tamaño de la fuente mostrada.
- En font-style, define que la fuente se muestre en una de tres formas: normal, italic u oblique (inclinada).
- En padding-top, sirve para desplazar el texto hacia abajo.
2. Para que las dobles comillas tengan efecto en una entrada hacemos lo siguiente:
Escribimos alguna cita o frase, luego lo sombreamos y clic en bloque entrecomillado o sino en edición de HTML también lo podemos insertar.
Clic en la imagen para agrandarla
Nota: Te voy a proporcionar algunas comillas que he subido a Photobucket para que lo utilices en tu blog.
http://i151.photobucket.com/albums/s137/andrewmusic1/quoteblack.gif
http://i151.photobucket.com/albums/s137/andrewmusic1/quotefirebrick.gif
http://i151.photobucket.com/albums/s137/andrewmusic1/quote.gif
Sonido Web
15 Comentarios:
Hola Andrés después de tiempo recurro a tu ayuda.Mira tengo un nuevo colaborador en mi blog y como te habrás dado cuenta al final de cada post coloco la imagen de Goku,ahora lo que quiero es cambiarle esa imagen por una personalizada que corresponda a mi colaborador,me dejo entender¿?..
A este colaborador lo agregue como segundo autor del blog pero cuando lo puse como Administrador creí que podría modificar la imagen pero no es así sino que también afectaría a mi diseño y cuando esta en Invitado no puedo modificar la plantilla.
Bueno espero que me hayas comprendido,si no te dejo un ejemplo donde cada autor tiene su propia imagen.¿Como lo hago?
www.llusantronic.blogspot.com
Saludos!
Hola, mira a mi me gustaria saber como poder poner una imagen en mi perfil, gracias.
http://lavozdejonyybea.blogspot.com
Hola!mi pregunta es como puedo cambiar el ancho de la pagina de mi blog. Porque se ve todo muy estrecho en el medio de la pagina y queda un hueco muy grande vacío a los lados.Y quería que el vlog ocupase toda la pagina sin ese huecos a los lados.
Puedes verlo en http://delomasinteresante.blogspot.com/.
Muchas gracias!
como siempre atenta a tus nuevos post, veo que también éste lleva el número equivocado, deberías ser el 61, creo,
saludos
Cosasinteresantes: Bueno no te recomiendo que lo agrandes mas el ancho, mejor ponle un fondo o sea una imagen, pero para cambiar el ancho tendrias que buscar lo siguiente:
#outer-wrapper { enn width le cambias el valor.
Igual tendrias que hacerlo en #main, y en #sidebar. Tienes que jugar con los valores, depende de ti como lo quieres.
Gracias por la visita.
Mrevenga: Otra vez me equivoque, jejeje, correjido.
Saludos.
me sirvio de mucho tu ayuda!
gracias!
xau
Hola Andrés al parecer mi problema no tiene solución pero confió en que se halle la respuesta.
Un abrazo.
Saludos!
GRACIAS, Andrés. Me ha funcionado bien y me resulta más útil que el anterior, porque no aparece siempre. Ahora estoy cambiando el 'class' por el 'id' en mis entradas anteriores... :D
Un saludo!
hola, :) buena tu página! felicidades!... y pues, quería que me ayudes en poner un blockquote en mi blog, el estilo es el siguiente: http://gnmeyly.googlepages.com/blockquote.jpg
quiero que salga con ese borde de líneas entrecortadas,ponerle un fondo así... también el tamaño de letra pequeño...
si puedes, me ayudarías?... esperare tu respuesta! aquí!... gracias! chau chau.
Evan, Kakaroto, Raquel: Gracias por la visita y se esta para ayudar.
Anonimo: Con respecto al imagen que me mandas, sobre aquello no he publicado, pero si se puede. Te ayudaria si es que me mandas tu correo para agrgarte y si nos encontramos te ayudo.
Seria bueno que dejes tu dirección de blog para visitarlo.
Gracias por la visita.
¡Hola maestro! Llego a tu página siglos después de que hayas publicado esta entrada... pero es justo lo que andaba buscando. Sin embargo, soy novata y aunque hago mis pinitos con tesón, no entiendo una palabra de html. Todo lo más SOY OBEDIENTE y me fijo. jeje.
Pero el diseño me llama sobremanera la atención. Por eso... te cuento.
En vez de poner el texto simplemente sangrado cuando doy a blockquote me gustaría que saliera otra cosa (concretamente una imagen de un trocito de cuaderno que se prolonga a medida que crece el texto contenido en el blockquote). Es parecido a lo de "tus" comillas y lo he visto en otro blog aplicando tu mismo o parecidísmo código: (http://maniobrasdeuntorpon.blogspot.com) A mí me gustaría aplicar este efecto, PERO NO SIEMPRE!! Es decir: ¿crees que hay alguna forma de hacer que pueda elegir entre un tipo de blockquote (el que viene por defecto) y otro (llamándolo, por ejemplo blockquote2). Algo parecido apliqué con éxito a las imágenes que se suben a un post poniendo en la plantilla .post img (y sus características) y debajo .post img2 (y las suyas; en mi caso SIN borde). Luego, después de subir cada imagen en un nuevo post, puedo elegir (en html) que tengan las características del img2 poniendo, antes de cerrar el a onblur... class="img2" (y así, en este caso la imagen no tendrá borde).
No sé si me estoy liando con la explicación. Resumiendo: me gustaría poder elegir que en unos casos el texto sangrado entre blockquote fuera tal cual viene por defecto en la plantilla blogger y otra pudiera aplicale "mi" variación, que es como explica tu código:
blockquote {
background: url(URL DE MI IMAGEN.gif); no-repeat 0 3px;
color: #000000;
padding-left:40px;
font-size : 11pt;
font-style: italic;
margin-bottom: 6px;
display:block;
padding-top:5px;
}
Sin embargo, ya digo, si la aplico tal cual dices (añadiendo este fragmento de código antes de b/skin, todas las veces que ponga un texto entre blockquote tendría este formato (vamos, que no podría elegir entre el de por defecto y éste).
Por favor, te agradecería que me dieras una pista si se te ocurre algo...
Estaré atenta por aquí, pero por siacaso te dejo mis correos:
ispilatze@gmail.com e ispilatze@hotmail.com
Ispilatze: En un comienzo defino lo que es blockquote, el cual es un codigo html y lo que tu pides no creo que se pueda porque sino te has dado cuenta existe una opción para este código.
Tu idea es interesante dejame ver si puedo hacer algo con esto pero no te a seguro si se podría.
Gracias por al visita
Estimado Andrés muy util lo de las comillas. No sabía para que servían.
Saludos,
Santiago
Equipo NoLoSe
www.nolosearquitectura.es
nolosearquitectura@gmail.com
Me sirvió mucho esta entrada. Gracias!
>P
Publicar un comentario