Hola, hola primero espero se encuentren muy bien. La entrada de hoy va a tratar sobre dos trucos muy sencillos para un blog.
Esta semana comienzo a retomar las entregas semanales y esta tratará sobre dos trucos muy sencillos y son aptos para cualquier plantilla de blogger.
DOS TRUCOS SENCILLOS PARA TU BLOG
El primer truco es un efecto de opacidad para todas las imágenes en general de la plantilla si tienen en la cabecera de su blog una imagen al pasar el cursor sobre la imagen sera el efecto de opacidad y en cualquier imagen de su blog. Su efecto será como la siguiente imagen:
Para agregar el código es muy sencillo solo se van a "Plantilla" seleccionarán "Personalizar" y escogerán "Avanzado" y oprimen la pestaña "Añadir CSS" y pegan el código. Su área será como la siguiente imagen:
Para guardar sus cambios oprimen "Aplicar al blog" y sus cambios estarán guardados. Para quienes no entiendan estos pasos de agregar el css en blogger en esta entrada encontrarán las dos formas de agregar su código css en blogger.
Este código originalmente lo ofrecía miss lavanda en su blog y solo se aplicaba este efecto en las imágenes de las entradas. Para hacerlo solo cambiarían la primer linea del código y sería:
Ustedes aplican el efecto si es en general para todas las imágenes o si solo para las imágenes de sus entradas o posts.
El segundo truco es cambiar la fuente de un título de una entrada o lo que ustedes quieran cambiar el estilo de su fuente y será como el siguiente título:
CAMBIO DE FUENTE EN TÍTULO
Esta fuente es Limelight, y los códigos los encontraremos en Google Fonts de cualquier fuente solo es seleccionar la fuente en la página. Además agregaré un enlace extra para que exploren un poco sobre esta página de google fonts y los pasos son los siguientes:
1- En este primer paso en mi ejemplo he seleccionado la fuente Limelight y para agregar solo oprimen el circulo "+" y aparecerá en la parte inferior de su pantalla una pequeña caja como se muestra en la imagen:
2. Después de oprimir la barra el resultado en imagen sera como la siguiente:
Los códigos importantes son los que están marcados con las flechas. Pero antes deberán revisar que en la pestaña "Customize" este marcado "latin" como se muestra en el siguiente gif:
En la pestaña de "EMBED" vamos a copiar el primer código y nos vamos a blogger buscan "Plantilla" después a "Editar Html" hay que añadir el código, lo pegan justo debajo de <head>.
Si notan hay un pequeño cambio en el código de aquí arriba a mi código final de aquí abajo. Para que funcione el código y blogger no marque error al guardar hay que agregar la barra casi al final " / " y el resultado sera el siguiente código:
Para localizar la etiqueta de apertura que sería <head>, primero dejan parpadear su puntero y oprimir el botón de su computadora Ctrl y después al mismo tiempo oprimen el botón de la letra F, aparecerá el buscador para escribir el código y con el botón enter aparecerá seleccionado y podrán oprimir vista previa de la plantilla para ver si los cambios están bien hechos o si es error podrán revertir los cambios:
3- El siguiente paso es agregar el siguiente código en el HTML de su entrada:
Lo que esta marcado dentro del código de color azul es donde ustedes van agregar el segundo código CSS de la fuente que ustedes hayan elegido en mi caso es la fuente Limelight y en font size ustedes podrán cambiar el número 20 por el número que ustedes prefieran y en CAMBIO DE FUENTE EN TÍTULO ustedes borran el texto y agregan su texto en título.
Hay otro cambio que al cambiar de pestaña blogger los cambia un poco por ejemplo si todos cambios los editan en la pestaña HTML de su entrada y cambian a la pestaña REDACTAR y quieren volver a editar un poco sus fuentes encontraran un pequeño cambio en el código y sera como este:
Solo son pequeños cambios que hace blogger en este código CSS y aquí solo lo marco como punto de referencia para que ustedes editen el código y obtengan mejores resultados.
El primer truco es muy sencillo de aplicar y este segundo truco también es sencillo pero tiene su grado de dificultad pero con la práctica sera sencillo agregar el tipo de letra que ustedes prefieran. Además aquí agregaré un extra en ayuda y es el siguiente PDF:
Hoy me enrollé un poco en el tutorial y como siempre espero que sea de ayuda para agregar poco de opacidad a sus imágenes o agregar una fuente diferente en un título de su entrada. Y si el resultado fue un acierto no se olviden en recomendar en sus redes sociales favoritas el blog o el tutorial. Disfruten de la semana y los espero de este lado del blog la próxima semana que hay más entregas en el blog. Hasta la próxima... Cuéntame... ¿Te resultaron útiles los trucos?...