Trucos de Diseño para Blogger

Trucos de Diseño para Blogger

Trucos de Diseño para Blogger – El diseño en Blogger es cada día es mas completo. Hay múltiples Gadgets, trucos y formas de que tu Blog tenga el aspecto que deseas. Aquí os dejo algunas interesantes.


Efecto Desvanecimiento al cargar Entradas

Este es un efecto muy curioso, ademas podemos configurar el color que queramos para el desvanecimiento dándole el toque personal a tu blog. Puedes ver un ejemplo Aquí.

Es muy fácil de poner en tu Blog, son un simple código que nos ofrece Ciudad Blogger en CiudadBlogger: Efecto de desvanecimiento al cargar las páginas del blog


Galería de Imágenes en Pagina Estática

Este truco es muy útil en Blogs con fotos, o simplemente si necesitamos una Galería de Imágenes con un resultado estético, ordenado y simple. Puedes ver un ejemplo Aquí.
Galería de imágenes con efectos

Galería de Imágenes con Paginación

Del mismo Blog que la Galería anterior nos llega esta Galería con Paginacion que puedes ver funcionar Aquí.

Galería de Imágenes con Paginación

Solo hay que seguir los pasos que encontraras en Compartidísimo: Una Galería de Imágenes con Paginación


Botón de Pin It en cada Imagen

Este es un truco muy útil para que tus lectores compartan tus Imágenes en Pinterest de forma fácil. Al poner el puntero sobre la imagen aparece el botón para pinear la imagen.

Botón de Pin It

Solo tienes que seguir los pasos que encontraras en Personalización de Blogs: Como instalar un Botón de Pin It en cada Foto.


Enlaces con Efectos Hover

Otro truco muy estético para tu blog de Blogger es poner efectos al poner el puntero sobre tus enlaces. De izquierda a derecha, arriba y abajo, bordes, fondo o 3d, efectos visuales muy estéticos en tus links.

Para ver estos efectos, y añadirlos a tu blog, ve a estos post:


Imagenes con Efectos Hover

Igual que con los enlaces, podemos ponerle efectos a la imágenes al pasar el puntero sobre ellas. Podemos encontrar estos trucos en:


Nube de Etiquetas Personalizada

Este es un truco muy sencillo y con un resultado muy moderno para tu Blog. Convierte la Nube de Etiquetas que viene predeterminada por el Tema de tu blog por estas en forma de etiquetas de colores.

Nube Etiquetas Personalizada

Solo tienes que ir a Personalizar la Nube de Etiquetas con CSS del blogger y seguir las sencillas instrucciones. Si te atreves puedes hasta cambiarle los colores modificando el código.


Paginación para Blogger

Un método muy sencillo para paginar nuestro Blog (es decir, abajo de las entradas nos aparecerá el numero de paginas, como botones para pinchar).

Solo tenemos que ir a esta pagina:  Page Navi Widget Creator.

Page Navi Widget Creator

Apareceremos en una pagina donde podremos personalizar la paginación o dejarla tal cual en Ingles. Damos al Botón “Customize” (Personalizar); luego daremos al botón ” Add Widget To My Blog” (Añadir esta pagina a mi Blog) se abrirá un instalador de Gadgets automático de Blogger solo tenéis que elegir el Blog donde  colocarlo y “Añadir Articulo“.

Paginacion


Personalizar los textos en modo Cita

Los texto en modo cita son los que se crean con este icono del editor de textos: 
Botón Cita
Se usa para citar textos, citas personales, frases celebres, etc…

Este es un ejemplo de texto en cita en este Blog

Si la forma cita de tu plantilla de Blogger no te gusta y quieres personalizarla hay un método sencillo, solo hay que hacer unos pequeños arreglos desde el diseñador de Plantillas. Para ir al diseñador de Plantillas os recuerdo que iremos al escritorio de tu Blog y desde la sección «Plantilla» pincharemos en «Personalizar». Personalizar Tema

Se nos abrirá el Diseñador de plantilla Blogger. Iremos a «Avanzado» y abajo del todo «Añadir CSS».

En la caja de texto grande es donde escribiremos los códigos para personalizar los textos en cita. Primero empezaremos con uno simple:

blockquote {
margin:1em 20px;
background: #dfdfdf;
padding: 8px 8px 8px 8px;
font-style: arial;
border: 2px solid #1b1b1b
}

(para ver en la parte de abajo lo que se modifica pulsa Enter)

Ahora os dejo una serie de opciones que podéis cambiar de ese código para ir probando personalizaciones hasta dejar como os guste:

  • margin:1em 20px;Este es el código del margen, la distancia en la que el texto en cita se adentra hacia la Derecha. Si le cambiar el dígito, la distancia varia.
  • background: #dfdfdf; – El color del fondo del texto en cita.
  • padding: 8px 8px 8px 8px; – Tamaño del relleno hasta el borde. (Arriba, Derecha, Abajo e Izquierda)
  • font-style: arial;  – Fuente del texto.
  • border: 2px solid #1b1b1b – Anchura y Color del borde.

Cambiando y experimentando con este simple código podemos crear distintas personalizaciones en los textos en cita.


Poner Fondos en Entradas o Gadgets

Un Truco muy vistoso es poner un Fondo que solo se verá en la zona que tu quieras.Lo primero será buscar el fondo que queramos usar y hospedarla en algún sitio para tener su URL, por ejemplo, en Blogger mismo.

Ahora solo tendrás que usar un simple código en el Gadget, Entrada, o zona de tu Blog que desees.

<div style="background-image: url(URL Imagen); padding: 5px;">
Contenido que se vera en el Fondo
</div>

En URL Imagen, pegas la dirección URL de la imagen que quieres de fondo. Y listo!


DiscaHogar

Hola. Me llamo Rocío y, con mi familia, vivo en Jerez de la Frontera. Nuestro Hogar es Feliz, pese a convivir con el Autismo de mi peque, y el Dolor Crónico que padezco desde muy joven. Nos gusta Cocinar, los Juegos, las Tecnologías y estar en familia. Gracias por tu Visita!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos

  • Responsable Rocío García García .
  • Finalidad Moderar los comentarios. Responder las consultas.
  • Legitimación Tu consentimiento.
  • Destinatarios WebEmpresa.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en el Aviso Legal.