Dos Trucos Sencillos Para Tu Blog

Hola, hola primero espero se encuentren muy bien. La entrada de hoy va a tratar sobre dos trucos muy sencillos para un blog.

dos-sencillos-trucos-para-tu-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 será el efecto de opacidad y en cualquier imagen de su blog. Su efecto será como la siguiente imagen:

gif-efecto-opacidad


EL CÓDIGO

img:hover { 
opacity:0.6;
}

AÑADIR EL CÓDIGO EN TU CSS
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: 

agregar-css
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:

img:hover { 

por 

.post-body img:hover {

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  Cuprum, 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:

seleccionar-fuente

2. Después de oprimir la barra el resultado en imagen sera como la siguiente:

codigos

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:

gif-marcar-latin


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>.

Quedaría así:

<head>
<link href='https://fonts.googleapis.com/css?family=Limelight' rel='stylesheet'>

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:

<head>
<link href='https://fonts.googleapis.com/css?family=Limelight' rel='stylesheet'/>

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:

editar-html

3- El siguiente paso es agregar el siguiente código en el HTML de su entrada:

<br />
<div style="text-align: center;">
<span style="font-family: 'Limelight', cursive; font-size: 20px;">CAMBIO DE FUENTE EN TÍTULO</span></div>
</div>
<br />

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:

<div style="text-align: center;">
<span style="font-family: &quot;limelight&quot; , cursive; font-size: 20px;">CAMBIO DE FUENTE EN TÍTULO</span></div>

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?...  

2 comentarios:

  1. Hola !

    Dos estupendos trucos, me encanta el primero, yo soy muy del efecto de opacidad !

    Un besazo y feliz finde !

    ResponderEliminar
    Respuestas
    1. Hola!
      También soy del efecto opacidad y muchas gracias por tu comentario.
      ¡Un beso y feliz fin de semana! :)

      Eliminar