Tutoriales #1: Personaliza blockquotes

5 de julio de 2013


Bueno, de una vez aclaro que no soy experta en esto de los diseños y mucho menos en el HTML de blogger pero, muchas personas me han preguntado acerca de cosas, las cuales si conozco, y después de un tiempo meditando el asunto, decidí  a este tutorial y explicarles lo mejor posible.
El primer tutorial  va a ser sobre las blockquotes y como puedes personalizarlas. Yo uso el navegador Google Chrome, así que todo esta 100% comprobado en este navegador. Si no saben que son blockquotes, y dónde se utilizan, les explico. En la barra de herramientas de blogger, esa que te aparece a la hora de escribir una entrada, hay un botón que te permite poner tú texto en blockquote. Solo tienes que seleccionar el texto deseado, y presionar el botón. Tú texto tendrá una apariencia "entrecomillado". Este aspecto lo puedes personalizar a tú gusto, y eso es lo que vamos a aprender a hacer el día de hoy, en mi caso se ve esto :
 Blockquote

Ahora, nos vamos a ir a la plantilla de tú blog, para eso te vas a ir a "Plantilla", que esta en la pagina principal de blogger, aquí tendremos que detenernos y hacer lo siguiente por seguridad. Muchas veces los cambios no te salen como quieres, y entonces ya no sabes que moviste mal y entras en pánico. Para ahorrarnos todos estos problemas,  vamos a hacer una copia de nuestra plantilla actual. Para eso , ya estas en la pagina de "Plantilla" vas a darle click en "Crear/establecer copia de seguridad" luego te va a salir un recuadro, como el que esta encerrado de azul en la imagen de abajo. Y entonces le das en "Descargar plantilla completa".


Guarda tú archivo y si alguna ocasión quieres que tu diseño regrese a como estaba antes de hacer modificaciones, solo le vas a dar en "Seleccionar archivo" y buscar el documento que acabas de descargar. Luego le pones "subir" y tú blog va tener el mismo aspecto que tenía antes de que le metieras mano. (?)
Aquí viene la parte mas o menos complicada, primero vamos a escoger el diseño que quieres en tu blog, les voy a dejar unos códigos que encontré en la red, no tengo ni la menor idea de que blog es, pero vamos a dejar los créditos que tenían cuando los encontré, no queremos gente plageadora (?) . Estos códigos aprendí a modificarlos según mis gustos, así que los que yo les voy a mostrar fueron los resultaron de mis modificaciones. 
El primer código es el siguiente:
/* Blockquote Sweet By: The Lovers */
.post blockquote {
background:    #FFFFFF;
border: 2px dotted #ff82ab;
color:  #000306;
font-family: century gothic;
font-size: 13px;
text-align: center;
padding: 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
} 

El segundo código es el siguiente: 

 /* Blockquote Sweet By: The Lovers */
.post blockquote {
background: #FFFFFF;
border-left: 3px solid  ##00BFFF;
color:  #000000;
font-family:century gothic;
font-size: 13px;
text-align: center;
padding: 5px;
border-top-left-radius: 25px;



Supongamos que escogen cualquiera de estos dos códigos. Ahora se van a Plantilla> Editar HTML ya que se abrió la pagina vas a dar un click en cualquier parte dentro del cuadro que estas viendo. Si no  das el clik dentro el cuadro de búsqueda te va a salir en la parte superior del navegador y eso no nos va servir. Después haber dado el click dentro del cuadro vas presionar en tú teclado Ctrl+f . Y te va a salir un cuadro de búsqueda.


  En el cuadro de búsqueda, vas poner </b:skin> vas a presionar Enter. Te va salir algo así: 

Después de que hayas presionado la flecha se van a desglosar algunas cosas. Vuelves a presionar Enter en el cuadro búsqueda para te mande a </b:skin> y justo ANTES de </b:skin> vas pegar el código que más de te guste. Va ser algo así:


Y  solo te queda dar en Vista previa  ANTES de guardar, para que veas como a quedada. Recuerda que para que se vea la blockquote en la vista previa, una de tus entradas principales tiene que estar en blockquote. 


Ahora supongamos que no quieres NINGUNO de los códigos anteriores, y quieres hacer el tuyo propio, vamos entender lo básico del código, nos basaremos en el segundo código, el que solo tiene la raya azul, si observan  tiene una parte que se llama  background  y enseguida este código "#FFFFFF"  es un color, en este caso es blanco,  ahí se decide el color del fondo de tú blockquote, para obtener más colores puedes visitar cualquier pagina de colores HTML como esta por ejemplo. Luego sigue: border-left: 3px solid  ##00BFFF; aquí nos esta indicando la posición, lo grueso, el estilo y color del borde.(Que es lo que vemos en color azul en la imagen de arriba) Por ejemplo si quisieras el borde del lado izquierdo entonces tendría que decir border-right: 3px solid  ##00BFFF, el grueso del borde se indica en 3px si lo quisieras más grueso probarías con 4px, 5 px etc. Solid nos va indicar el estilo del borde. Es este caso Solid es la linea recta, para ver los diferentes tipo de estilos que existen checa esta pagina. Por ejemplo si quisieras que linea azul, fuera punteada, como en el código de arriba, en vez de Solid, tendría que decir dotted.

En color nos indica el color de la letra que va estar dentro del blockquote. font-family:century gothic; nos marca el tipo de letra , text-align: center; nos indica la alineación del texto, en este caso el texto aparecería centrado, pero podría ser alineado a la izquierda a la derecha o justificado. Por ultimo border-top-left-radius: 25px  da indicaciones al pequeño borde redondeado de abajo. Top-left nos indica que el borde esta debajo a la derecha. Si lo quisieras arriba a la derecha, tendría que decir border-bottom- left , y el radius: 25px  son la indicaciones para la curva. Radius es la indicación para que este redondeado y 25x es el grado de redondeo de la curva. Si lo quisieras menos curveado intenta con 20x. 

Con esta información puedes fácilmente personalizar  tus blockquotes. Se lee complicado pero no, recuerda, solo necesitas tú código, ir a Editar HTML buscar </b:skin>  y pegar tu código antes . Y listo.

 Este tutorial lo hice porque ya van muchas personas que lo preguntan. Pero la verdad si fue muy cansado hacer la entrada, así que díganme si les sirvió o no por de verdad es mucho trabajo. xD Y si quieren algún otro también díganlo en las entrada. Si tienen alguna duda dejen un comentario.

7 comentarios:

  1. Yo mejor ni lo intento, soy una floja, de solo pensar hacer todo eso me duele la cabeza, además creo que no funciona en las vistas dinámicas, porque ni siquiera la predeterminada se me pone XD

    Gracias por tomarte tu tiempo en realizar esta entrada :D admiro tu paciencia, yo me hubiera dado por vencida a la primera :$

    Saludos, espero te encuentres bien ^^

    ResponderEliminar
  2. Hola :D
    muy buen tutorial, yo hice miles de intentos la primera vez que lo hice xD
    Pero valio la pena jaja
    Besos!!

    ResponderEliminar
  3. Gracias por el tutorial. Yo me he aventurado una que otra vez con HTML y a pesar del sufrimiento inicial si me han salido las cosas. Es bueno tener esta información y así echar mano de ella cuando la necesite. :)

    ResponderEliminar
  4. Sinceramente, MIIIIIL GRACIAS!!!!
    Hace meses que vengo intentando saber cómo hacer esto, y por fin un tutorial con el que entiendo TODO!!!!! Muuuuchas gracias de verdad!!!!! Voy a poner mi mejor esfuerzo para que veas que me sirvió :)

    Un tuto que me re serviría es saber cómo poner las imagenes de los libros que estoy leyendo que se muevan (como tienes tu en las últimas reseñas).

    Realmente me encantaría que siguieras con los tutos porque sabes explicar muuuy bien :) Muchas gracias!!!!!!

    ResponderEliminar
  5. Recuerdo cuando lloré porque no sabía hacer esto (?) jaja, bueno no >< pero sí estaba en un pozo de desesperación bien profundo porque además no encontraba un buen tutorial que me enseñara. Pero ahora tengo todo controlado ò.ó, de todas maneras como mi memoria a veces da mucho que desear no descarto que se me olvidé y después lo vaya a necesitar, ahora sé que tengo que venir derechito aquí para saber cómo se pone.

    Buena sección Grecia :D la imagen que le pusiste con el perrito es bella :')

    ResponderEliminar
  6. Más fácil no lo pudiste decir, muchas gracias me ayudo un montón, fue un gran servicio a la comunidad. Bonita semana.

    ResponderEliminar
  7. Esto es de mucha utilidad! me encanto el primer código, muchas gracias por compartirlo! =)

    saludos!^^

    ResponderEliminar

¡Gracias por comentar!
POR FAVOR, No comentes spoilers.