Añade Imágenes en tu Sidebar

Hola, espero que se encuentren muy bien. La entrega de hoy va a hacer algo muy sencillo para añadir imágenes como un estilo menú en su sidebar.

imagenes-en-tu-sidebar


Este tipo menú de imágenes yo lo he agregado en mi barra lateral o sidebar. Tiene una excelente presentación y para muestra un ejemplo:


http://goo.gl/JM5P9L
http://goo.gl/JM5P9L

CÓDIGO CON ESTILO MENÚ

Este sencillo con estilo menú lo podrán agregar en su blog y es el siguiente código:

<center>
<div class="separator" style="clear: both; text-align: center;">
<a href="url de tu página" rel="nofollow" target="_blank"><img alt="url de tu página" border="0" src="url de tu imagen" /></a></div>
</center>

EXPLICACIÓN DEL CÓDIGO
url de tu página : Aquí solo pegan la url de su página.
url de tu página : Vuelven agregar la misma url.
url de tu imagen : Aquí va la url de su imagen.

La etiqueta center es la que centra nuestras imágenes en la sidebar o barra lateral o se puede cambiar por right o left

Para agregar otra imagen con enlace solo tienen que repetir el mismo código, todo dentro de la etiqueta de apertura  <center>  y la etiqueta de cierre  </center>  quedaría así:

<center>
<div class="separator" style="clear: both; text-align: center;">
<a href="url de tu página" rel="nofollow" target="_blank"><img alt="url de tu página" border="0" src="url de tu imagen" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="url de tu página" rel="nofollow" target="_blank"><img alt="url de tu página" border="0" src="url de tu imagen" /></a></div>
</center>

Todo este proceso lo podrán repetir la veces que ustedes quieran añadir una imagen. Solo lo que cambia es la url de enlace y la url de la imagen.

ANCHO
Para calcular el ancho de su sidebar solo tienen que ir a Plantilla, después a Personalizar y escogen Ajustar ancho, y aparecerá el ancho de su barra lateral o sidebar:

ancho-barra


En mi caso la barra lateral de ancho es 300px y las imágenes de ancho son de 224px. Un pequeño truco aquí para sacar la medida de ancho de su imagen, solo deben utilizar su herramienta captura de pantalla para crear una imagen base para la medida de su imagen y lo podrán crear desde un gadget que tengan en su sidebar o barra lateral. Aquí agregó el enlace para las Herramientas capturas de pantalla.

URL DE TU IMAGEN
Para conocer la url de su imagen solo tienen que subir su imagen desde su computadora a una entrada o página y se van al HTML de su página o entrada y copiar la url de su imagen. Todo esto se puede hacer desde una página o entrada que no se vaya publicar 

url-imagen


Para añadir este código solo se van a Diseño, después agregar gadget en su barra lateral o sidebar  y pegan el código, guardan sus cambios.

Espero que este tutorial sea de ayuda para mostrar mejor su barra lateral y con una mejor presentacion visual en enlaces para mostrar todo lo que ustedes quieran mostrar. En entregas del blog sería todo por esta semana, los espero en la próxima o próximas dos entregas del blog. Disfruten la semana y como siempre los espero de este lado del blog.  :)
Follow my blog with Bloglovin

No hay comentarios.:

Publicar un comentario

Instagram