lunes, 29 de agosto de 2016

Tutorial: Cómo personalizar el tipo de fuente

¡Hola hola!

He aquí mi primer (y posiblemente último) tutorial. No me considero una persona que se explique precisamente bien, pero este tutorial me pareció tan cómodo, rápido y sencillo que también he querido aportar mi granito de arena ^^ ¡Así que vamos al lío!

Muchos ya sabréis que la plantilla de Blogger nos ofrece varios tipos de fuente para personalizar nuestras entradas, títulos, etc. Pero, ¿y si ninguna nos convence o queremos encontrar otra que más se amolde a nuestro gusto? No problemo! Ahora os explico cómo.

MUY IMPORTANTE: antes que nada, realizaremos una copia de seguridad de nuestra plantilla. Así, si la pifiamos, basta con restaurarla. Para ello, vamos a Blogger / Diseño / Crear/Restablecer copia de seguridad. Ahora ya podemos, o bien descargar nuestra plantilla, o bien restaurarla.

  • Bien, continuemos. Lo primero es entrar en Google Fonts: aquí tenéis para dar y tomar. Creo que alberga más de 600 fuentes, así que mi consejo es que seleccionéis totalmente al azar. Si encontráis una fuente que os gusta muchísimo, no busquéis demasiado (a no ser que al instalarla no os guste el resultado final).
  • Seleccionar las fuentes que os gusten: esto se hace pinchando en el símbolo + dentro del círculo. Podéis añadir cuantas queráis de una sola tacada. Esto es jauja, ¡al ataque!

  • Una vez hecho esto, abajo nos aparecerá un recuadro gris bajo el título de nº Family Selected: esto es el número de fuentes que hemos seleccionado. 

Pinchamos en él y se desplegará lo siguiente:


Arriba tenemos todas las fuentes seleccionadas (ambas imágenes). Aunque viene marcado por defecto, antes que nada nos aseguramos pinchando en Customize de que tenemos marcada la opción Latin (imagen derecha).

Volvemos a la pestaña Embed, en la que nos aparecerán dos recuadros; son los encargados de dar forma a nuestra fuente y me referiré a ellos como código 1 y código 2:


  • El siguiente paso, ya en Blogger, es ir a Plantilla / Editar HTML: pinchamos dentro y pulsamos Ctrl+F. En el recuadro que nos aparece buscamos </head>

  • Pegamos nuestro código 1 inmediatamente antes de </head>: IMPORTANTE: para que el código funcione, al final de éste, sin sobrepasar />, debemos añadir type='text/css'/, tal como muestra la imagen:

Comprobad en Vista previa de la plantilla que vuestro blog se ve con normalidad; si no es así o si la plantilla está "rota", comprobad que habéis escrito bien el código.

  • Ahora vamos a utilizar el código 2. OJO, no se utiliza todo el código que aparece en el recuadro, sino solamente una línea, es decir, que como hemos seleccionado varias fuentes a la vez, cada línea corresponde a un tipo de fuente distinto. Si utilizáis el código al completo no ocurrirá nada.
    Aclarado esto, volvamos a la plantilla de Blogger. En el buscador localizamos ]]></b:skin>; dependiendo del título que queramos modificar, elegiremos otro  u otro. En esta caso, voy a usar como ejemplo el título de los gadgets, por lo añadiré .sidebar h2 {}. Ahora sí, ¿veis esos corchetes {}? Dentro de ellos pegaremos la línea del código 2 et voilá! Comprobamos que todo está correcto en la Vista previa de la plantilla. Si es así, pinchamos en Guardar plantilla.


Si por el contrario lo que queréis cambiar es el título de las entradas, sustituid .sidebar h2 por .post h3. Si ademáis queréis cambiar el tamaño de la fuente, añadimos font-size: nºpx; después del anterior punto y coma como podéis ver en la imagen (sustituyendo el nº por el número que queráis).

Si por lo que sea queréis añadir más adelante otra fuente distinta o sustituir una ya existente, no tenéis que volver a repetir todos estos pasos; simplemente basta con que en el código 1 añadáis entre los corchetes || el nombre de la fuente, y si tiene espacios, sustituir éstos por +. Por ejemplo: |Dancing+Sprint|
Y, en el código 2, cambiar el nombre de la fuente tal que así: 'Dancing Script'.


Y nada más, esto es todo. No sé yo si he complicado el tutorial demasiado, lo he hecho lo mejor que he podido. Espero haberme explicado bien ^^' Si tenéis cualquier duda o problema, poneos en contacto conmigo e intentaré ayudaros en la medida de lo posible, que tampoco soy ninguna experta en esto, pero bueh :D

*Nota: podéis agrandar las imágenes pinchando sobre ellas.

domingo, 28 de agosto de 2016

¡Bienvenidos al nuevo diseño!

¡OH!

Por fin. ¡Por fin me decidí remodelar a el diseño del blog! Sólo me ha llevado casi dos años... desde aquella entrada en la que dije que, progresivamente, iría modificando cositas... ya nadie se acuerda, ¿verdad? xD Normal. Ni yo me acordaría.
Era pensar en tener que meterme de nuevo en el fascinante (nótese la ironía. Aunque, a decir verdad, estos días le he cogido bastante cariño... Cosas de la vida) mundo del HTML y el CSS e invadirme una pereza mágica y repentina...

En fin, que por ocurrencias del destino (y mis venazos :P), hará 5 ó 6 días decidí echarle mano de una vez al código; y dicha idea se vio catapultada hasta la estratosfera en cuanto conseguí cambiar sólo parte del fondo (yo me entiendo) de color. Y más aún cuando conseguí que fuera translúcida sólo esa parte. Ahí fue cuando ya, total, de perdidos al río, me puse con el diseño al completo.

Y, como podéis ver, han sido muchas las cosas que han cambiado. Otras también han cambiado, pero mucho más sutilmente, y dudo que se aprecien, pero ahí están. Ha supuesto un gran esfuerzo, pero es una total y completa gozada ver que tu trabajo ha dado sus frutos y que, encima, estás +1000% satisfecha con él *-* ^^

He aquí la "obligada" comparación, el antes y el después:

                                          ANTES                                                  DESPUÉS                                
       

Como veis, el diseño es ahora mucho más limpio y claro (o eso me parece a mí, vaya). Como podéis ver también, la imagen del antes no es actualizada, sino de cuando hice ese diseño por primera vez. Me pilló desprevenida esta vez, y no caí en el hecho de hacer una captura hasta que ya había modificado algunas cosas del código. Comprendedme, no estaba dispuesta a deshacerlo todo sólo para hacer la captura de turno, sorry not sorry.

En fin, hechas las presentaciones, ya puedo dar por finalizada la presentación en sociedad del nuevo diseño. ¡Sed bienvenidos a él! :D

Antes de irme, me gustaría destacar algunas de las cosillas que he toqueteado, pero, de todas formas, os invito a daros un voltio por el blog e ir descubriéndolas vosotros mismos ^^ Así que, si vuestro caso es el último, dejad de leer ;) Si os he pillado vagos, seguid leyendo, entonces:

  • Fondo: aclarado.
  • Menú: el menú en esencia sigue siendo el mismo, pero ha sufrido un cambio de colores y un ajuste de tamaño. Ahora todas las pestañas desplegables son redondeadas y el sombreado se ajusta perfectamente a su tamaño.
  • Fuentes: he cambiado las fuentes de los títulos de las entradas, los comentarios, la paginación y los datos de publicación de las entradas.
  • Títulos: he centrado todos los encabezados y, dependiendo del caso, les he añadido distintos bordes o fondo.
  • Imágenes redondeadas: creo que absolutamente todas las imágenes, salvo las del gadget de GR han pasado a tener los bordes redondeados. Soy antipicos, qué le voy a hacer.
  • Efecto translúcido: salvo las imágenes de las entradas, si pasáis el cursor sobre ellas, veréis que se aclaran ligeramente.
  • Reseñas aleatorias: además del efecto mencionado arriba, he añadido otro efecto exclusivamente para esta parte del blog, un efecto en el que la imagen señalada con el cursor se eleva ligeramente, destacando sobre las demás. ¡Me encanta!
  • Separador de entradas: añadido.
  • Cuerpo de las entradas: muy remodelado y con el borde inferior abierto.
  • Música eliminada: no sé si alguien se habría fijado, pero había una canción en el blog. Sí, de esas que al entrar te asaltan de repente y no sabes de donde viene (sólo que en mi caso no se reproducía automáticamente, sino que había que darle al play. Así no era molesto, sino por elección propia. Buena idea, ¿eh?). El caso es que acabó resultando un coñazo porque ralentizaba la carga del blog y parpadeaba una vez antes de estabilizarse. Bye bye, nunca más.
  • Caja y formulario de comentarios: esto ha sufrido una total y completa remodelación. También veréis bordes redondeados, nuevos colores, fondos y el contorno del avatar un tanto peculiar. Además, si pasáis el cursor sobre los botones de "Responder", veréis que cambian de color.

Y creo que esto es todo, aunque es posible que me haya dejado detalles, ya os digo que me ha supuesto un trabajazo; sobre todo porque, a veces, al modificar partes del código se me modificaban otras, o yo sólo quería modificar una pequeña parte y no todo, y eso ya no es tan fácil de encontrar en tutoriales... así que me ha tocado saber sacarme las castañas del fuego.
La verdad es que ésa es la principal razón por la que estoy tan orgullosa de este diseño. No sabéis la cantidad de sudor y sangre que me ha supuesto modificar esos pequeños detalles, y tantos otros (quizá minucias, pero para mí no quedaban bien) a base de intuición y averiguar la lógica de los códigos; no sé ni cómo he sido capaz, ahora que echo la vista atrás O.o Los astros se han debido de alinear; o he tenido mucha suerte; o no era tan difícil después de todo (?).

Bueno, ya para concluir, me gustaría saber qué opináis del nuevo diseño. Obviamente a mí me tiene enchochada y es lo que importa, pero cuando has puesto tanto empeño en algo, también te gusta conocer la opinión del resto del mundo, ¡sobre todo si es positiva! Menudo chute de energía ^^ Y para qué mentir, también es para alardear un poquito xD

Así que, ¿qué os parce? ¡Contadme! :D