Uno de los trucos que más me han pedido últimamente es el de poner Banners 125 x 125 en Blogger. Para el que no sabe, se trata de crear un cuadrado en el que podemos incluir banners de 125 x 125 pixeles (tal como tengo yo en la sidebar) y que se utilizan para hacer intercambios o bien para vender publicidad.
Poner banners 125 x 125 en Blogger no es difícil, y aquí veremos como hacer para tenerlos en nuestro blog.
La estructura básica de este cuadrado es la siguiente:
Este código otorgado creará el cuadrado para incluir 4 banners 125 x 125. Ahora debemos aprender qué es lo que necesitamos modificar para colocar el banner que nosotros queremos y que direccione al sitio deseado. Para ello vamos a analizar el código.
href='#'
Indica hacia donde se dirige (a que sitio) cuando hacemos click. Por ello, debemos reemplazar # por la url del sitio de destino.
target='_blank'
Indica que al hacer click sobre el banner 125 x 125 la url se abra en una nueva ventana del navegador.
title=' '
Muy importante desde el punto de vista del SEO. Allí deberíamos introducir una palabra clave. Por ejemplo en el caso de este blog yo introduciría 'Ayuda para Blogs'.
height='125' y width='125'
Indican la altura y el ancho que llevará la imagen colocada, indicada en piexeles. Como vemos en este caso dejamos 125 en ambos porque queremos poner banners 125 x 125.
src='http://i29.tinypic.com/2zgyk37.jpg'
Indica la url de la imagen que se mostrará, es decir la url del banner.
Habiendo visto el código y analizando cada uno de los elementos que lo componen ya pueden modificar el código a gusto para añadirlo en sus blogs.
Una vez que tenemos el código listo solo resta añadirlo en un elemento HTML de la sidebar de nuestro blog y ya tenemos los banners 125 x 125 en blogger.
Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! - (¿Que es RSS?)
Poner banners 125 x 125 en Blogger no es difícil, y aquí veremos como hacer para tenerlos en nuestro blog.La estructura básica de este cuadrado es la siguiente:
<div class="banner125"><h3>Patrocinadores</h3><a href='#' target='_blank' title=''><img border='0' height='125' src='http://i29.tinypic.com/2zgyk37.jpg' width='125'/></a><a href='http://videosbeta.net/' target='_blank' title='Los mejores videos de YouTube'><img border='0' height='125' src='http://img268.imageshack.us/img268/4972/barnervb.png' width='125'/></a><a href='http://quewallpapers.com' target='_blank' title='Wallpapers HD'><img border='0' height='125' src='http://i25.tinypic.com/2m34c2o.png' width='125'/></a><a href='http://www.humorizate.com.ar/' target='_blank' title='Humor Online'><img border='0' height='125' src='http://i450.photobucket.com/albums/qq230/vicarlone/bannernuevo.gif' width='125'/></a></div>Este código otorgado creará el cuadrado para incluir 4 banners 125 x 125. Ahora debemos aprender qué es lo que necesitamos modificar para colocar el banner que nosotros queremos y que direccione al sitio deseado. Para ello vamos a analizar el código.
href='#'
Indica hacia donde se dirige (a que sitio) cuando hacemos click. Por ello, debemos reemplazar # por la url del sitio de destino.
target='_blank'
Indica que al hacer click sobre el banner 125 x 125 la url se abra en una nueva ventana del navegador.
title=' '
Muy importante desde el punto de vista del SEO. Allí deberíamos introducir una palabra clave. Por ejemplo en el caso de este blog yo introduciría 'Ayuda para Blogs'.
height='125' y width='125'
Indican la altura y el ancho que llevará la imagen colocada, indicada en piexeles. Como vemos en este caso dejamos 125 en ambos porque queremos poner banners 125 x 125.
src='http://i29.tinypic.com/2zgyk37.jpg'
Indica la url de la imagen que se mostrará, es decir la url del banner.
Habiendo visto el código y analizando cada uno de los elementos que lo componen ya pueden modificar el código a gusto para añadirlo en sus blogs.
Una vez que tenemos el código listo solo resta añadirlo en un elemento HTML de la sidebar de nuestro blog y ya tenemos los banners 125 x 125 en blogger.
Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! - (¿Que es RSS?)
8 comentarios:
Excelente, lo probaré mas adelante.
Desde ke tengo mi blog siempre kise colocar Banners.., pero aunke tenga la info me cuesta..!! la verdad no entiendi bien como colocar el codiago. Podrian explicarse un poquitito maas.. xD para ke mentes un pokito tapadas como la mia podriamos entender, y no digo ke sea malo solo ke ah mi se me hace una tarea militar
@Crazy Punk
Que es exactamente lo que no sabes hacer?
Hola, gracias por el tutorial, funciona de maravilla.
Quisiera poder darle más separación entre cada banner, es posible manipular esos datos? Y también agregarle algun borde de 1px de ancho a cada banner?
Cómo podría lograr eso? Gracias.
Otra cosa, me acabo de dar cuenta que con explorer me salen los banners en fila, no en dos columnas de dos, me salen uno ras otro. A que cress que se deba? Gracias.
@Santiago
Claro que es posible. Busca en Google acerca de como dar borde y espacios en CSS que seguro encontrarás mucho material.
Saludos!
@Santiago
Explorer no se lleva bien con la web, y menos si es una version un poco antigua...
OK! me ha costado pero lo he manejado. Lo intente con el alojamiento de picasa pero no ofrece las posibilidades de photobucket;también tuve que limitar a 100x100 los banners. un saludo y gracias otra vez.
asier009
Publicar un comentario en la entrada
Lea las reglas:
Todos los comentarios serán leídos y moderados previamente.
Serán publicados aquellos comentarios que respeten las siguientes reglas:
- Su comentario debe estar relacionado al contenido del post.
- No se aceptan comentarios tipo SPAM.
- No incluya links No necesarios en el contenido de su comentario.
- Si quieres dejar la url de tu blog, hazlo utilizando la opción OpenID.
- La caja de comentarios no es el lugar para pedir intercambio de links (para ello ve a la página de contacto).
- Ofensan personales, amenazas o insultos NO serán permitidos.
OBS: Los comentarios de los lectores no reflejan las opiniones del blog.