Colocar comillas a los textos de las entradas
20.1.16
¡Hola! Bonito día, ya estoy por acá con otro tutorial para poner más bonitos y vistosos los textos de nuestros post. Ahora les voy a enseñar cómo personalizar el texto que va dentro de una Cita (colocarlo entre comillas) en blogger, este post me lo sugirió mi compañera bloguera +Sandra Ruiz y así que manos a la obra. El lunes publique un tutorial de cómo cambiar de color al texto en nuestros post y cambiar el tipo de letra por si se lo perdieron y quieren ir a verlo.
- Antes de iniciar como siempre *guardar una copia de la plantilla por si algo sale mal y sin problema la volvemos a instalar.
Iniciamos con el tutorial:
1. vamos a → plantilla → Editar HTML
2. buscamos ]]></b:skin> y justo antes pegamos el siguiente código:
3. Clic en guardar plantillablockquote {
background:#66CDAA; /* Color de fondo */
padding:10px;
}
blockquote:before {
content: "\201C"; /* inicio comilla */
font-family: Georgia;
font-size:40px; /* tamaño */
font-weight: bold; line-height:0px;
color:#ffffff; /* Color */
vertical-align:middle;
}
blockquote:after { /* final */
content: "\201D";
font-family: Georgia;
font-size:40px; /* tamaño */
font-weight: bold;
line-height:0px;
color:#ffffff; /* Color */
vertical-align:middle;
padding-top:10px;
}4. Vamos al editor de entrada y escribimos de forma normal, cuando queramos insertar el bloque entre comillas , vamos a la vista HTML y pegamos este código:
<blockquote> Escribe tu texto aquí </blockquote>Y así es como se mira:
Este es un ejemplo de texto entre comillas, este es un ejemplo del tutotial, este es un ejemplo de texto entre comillas, este es un ejemplo del tutorial.
Ahora podemos jugar con el css y crear varios estilos
Entonces ahora que tenemos el código podemos ir jugando con las variables , el tamaño, color, color de fondo, tratando de hacer una combinación de colores para que el bloque no se mire desentonado dentro del post.
22 comentarios
Qué lindo efecto, gracias por compartir :)!
ResponderBorrarDe nada, gracias a ti por comentar ♥
BorrarMe faltaba lo de las comillas :) Sabía como cambiar el tipo de letra, el fondo, tamaño y demás, pero como poner "las comillas" se me escapaba XD Gracias por el post ^^
ResponderBorrarY es que hay muchas formas de personalizar el texto de los post :) espero te sea útil.
BorrarAl fin me pongo con este detalle en uno de mis post, y buscandote veo que me has nombrado, mil gracias. No me he dado cuenta hasta ahora porque ese perfil no lo uso... uso en de miss agenda. Pero aún asi gracias por el detalle.
ResponderBorrarHoy no he conseguido poner las comillas, porque no me sale en mi plantilla ]]>, no se si lo he borrado o que ha sucedido. pero aun asi, muchas gracias!
Hola, bueno ahora ya sé cual usas jeje, pues puedes pegar el código igual arriba de no creo que te de problema y si te da pues pega ]]> en tu plantilla :)
Borrar¿es posible cambiar el color de las comillas en cada entrada del blog?
ResponderBorrarHola, no, no es posible porque el código que se coloca en la plantilla se aplicar a todas las entradas, no se puede editar una por aparte.
Borrar¡Qué guapa eres! Justamente iba buscando este tutorial, gracias por compartirlo!!
ResponderBorrarHe seguido todos los pasos pero sigue sin salirme las comillas. No sé qué me falta.
ResponderBorrarAh vale ya está! Era que en la entrada no salían las comills pero sí al pulicar
ResponderBorrar¡hola! Qué bien diste con el dato :D en el post indico que puedes ver como van quedando las comillas en vista previa :)
BorrarSoy un desastre!! Jajajaj esperaba a que se viera desde la entrada :)
BorrarUna pregunta Wendy, perdona que no sea sobre este tutorial, el aspecto nuevo del gadget de seguidores me da error cuando quiero seguir a alguien, ¿qué me aconsejas?
Un abrazo
¡Hola de nuevo! fíjate que lo único que puedo aconsejarte es que por ahora si te da error en gadget entonces intenta seguir a blogs por medio de sus newsletter o feedburner que de seguro por alguna parte tienen el formulario para que te apuntes, quizá al ser nuevo el aspecto esta dando varios problemas lo único que queda es esperar unos días para que los de blogger arreglen los errores.
BorrarSí, acabo de informar desde el foro de ayuda a ver si lo solucionan pronto!!
BorrarMuchísimas gracias por tu ayuda :)
Un abrazo
Hola
ResponderBorrarTe acabo de descubrir y esto de las comillas gigantes como yo las llamo me encanta. Lo he puesto en práctica en mi blog, ahora que está en reformas hago cambios de este tipo.
Eso sí, no me funcionaba antes de ]]> . Lo que he hecho en pegarlo debajo de /* Posts y listo!!!
Muchas gracias por el post. Besotes molones.
Gracias por el tutorial, queda muy bonito! Espero más tutoriales, me encantan
ResponderBorrarHola! Muchas gracias por el tutorial, me sirvió mucho para mi blog :) Me quedo por acá, ¡saludos!
ResponderBorrarNo es la primera vez que visito tu blog y me encanta. Me surge la duda de cómo hacer si quieres personalizar aún más el bloque de texto citado poniendo por ejemplo una imagen superpuesta (en mi caso la de un washitape), pues con el código que vi en otro sitio no me funciona. Eso sí, he logrado personalizar yo sola la primera letra, poniéndola como letra capital je je.
ResponderBorrarUn saludo.
P.D.: me llama la atención que a pesar de lo profesional que es tu blog no cuente con un buscador. Facilitaría mucho la tarea al visitante.
Hola, hola :D Ufff, ahora no me da la cabeza para ver cosas de códigos, he cambiado de oficio jejeje, ahora tengo una tienda online ..... Ya te hice caso, he puesto un buscador (eso sí todo feo pero hace su función correctamente)
BorrarMuchísimas gracias por el tutorial <3 Ya usé otro que subiste para por ahora arreglar algo que no me gustaba de mis entradas y seguramente revise aquí seguido cuando le haga la reforma completa, jeje. Me estaré quedando por aquí. Saludos! ^^
ResponderBorrarAmo este blog, me ayuda muchísimo.
ResponderBorrarGracias por tus comentarios