Tutorial: Colocar y centrar imágenes en la columna lateral del blog
Cuando comencé a utilizar Blogger, no tenía idea de lo que era un código HTML ni de que se podía modificar. Obviamente, no soy una experta, pero he visto/leído muchos tutoriales en este último tiempo y he aprendido un par de cositas. Si recién se inician en el mundo de los blogs o si llevan tiempo pero nunca se animaron a hacer muchas modificaciones por miedo a "desarreglar todo", tal vez estos tutoriales les sirvan.
Hoy quiero mostrarles algo bien simple: cómo colocar (y centrar) imágenes en la columna lateral del blog. Estas imágenes pueden utilizarlas a modo decorativo o convertirlas en "botones" si deciden que al hacer click en ellas, los lectores sean redireccionados a otra página.
Paso 1: Creá una cuenta en Photobucket.Paso 2: Subí la imagen que querés utilizar en tu blog.
Paso 3: Hacé click en la imagen que subiste. A la derecha vas a encontrar un recuadro con varias opciones. Hacé click en donde dice HTML (al hacer click, se copia el código)
Paso 4: Andá a Blogger. Hacé click en "Diseño" y luego en "Añadir un gadget"
Paso 5: De todas las opciones, elegí "HTML/JavaScript"
Paso 6: Click con el botón derecho y "Pegar". En el código ese, vas a tener que hacer algunas modificaciones.
El código comienza con <a href= El link que aparece a continuación, entre comillas, es el de la página a la que te direccionará el blog si hacés click en la imagen. Si lo dejás como está, te direccionará a la página de Photobucket. Podés reemplazarlo por el link que vos quieras, o por un # si no querés que te lleve a otra página al hacer click. Acordate de dejar las comillas como están.
Te va a quedar más o menos así:
En este caso, la imagen era del mismo ancho que la barra de gadgets. Si colocaras una imagen más pequeña, quedaría alineada a la izquierda. Para solucionar esto, hay que agregar dos cosas al código HTML que utilizaste.
Al principio del código, agregar: <center>Al final del código, agregar: </center>
Esto te centrará la imagen en el medio de la columna.
¡Espero que les haya sido útil!
La idea es seguir haciendo tutoriales de este tipo y mostrarles pequeños tips que pueden usar para mejorar el diseño de su blog. Si quieren sugerir alguna idea para los próximos tutoriales, dejen un comentario más abajo.
¡Hasta la próxima!
(Las imágenes utilizadas son de esta página)
0 comentarios: