Agregar banners de 125 x 125 en la sidebar

2 de enero de 2010 139 comentarios ,
banners 125x125
Colocar el espacio para la publicidad de banners de 125 x 125px es uno de los recursos más solicitados debido a la gran aceptación de este tamaño de banners.

Para agregar este espacio de banners en tu blog necesitas tener una sidebar con una ancho mínimo de 280px.
El procedimiento es de lo más sencillo; sólo entra en Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
/* Banners 125 x 125
----------------------------------------------- */
.ads {
margin-top:5px;
margin-left:5px;
}
.ads img {
padding: 4px;
margin-bottom: 5px;
}

Ahora en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pega este código:
<div class="ads">
<a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
<a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
<a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
<a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
</div>

Sólo cambia la URL del enlace y la URL de la imagen donde se indica.
Si sientes que los banners están muy a la izquierda modifica donde dice margin-left:5px;
También puedes modificar la separación entre cada banner donde dice padding: 4px; sólo toma en cuenta que si le pones más separación también deberás tener un ancho de sidebar mayor a 180px.
Por supuesto que quenes quieran agregar más propiedades pueden hacerlo incluyendo un borde, un color de fondo, etc.


139 comentarios en:

" Agregar banners de 125 x 125 en la sidebar "

  1. Eso, eso estube pensando en preguntarte,jajajaj te me adelantaste.
    Muy bueno, saludos!

    ResponderEliminar
  2. Estupendo, ya que estaba pensando añadir en mi blog, este tipo de barnner.

    Gracias.

    ResponderEliminar
  3. PepeX, casi casi te leí el pensamiento XD

    Eduardo Sanguino, es una buena manera de dar a conocer otros sitios, ya sea sitios amigos o para publicidad.

    ResponderEliminar
  4. Ecelente bro.... a favoritos. Lo agregaré cuando el nuevo blog que estoy haciendo se haga mas conocido. Sin duda los anunciantes se sacarán los pelos por publicitar allí. XD

    Un abrazo!!!

    ResponderEliminar
  5. Hola muy feliz 210 para todos...!!! Te felicito Potro por tu gran web de ayuda de ayuda blogger...!!! Para mi es la mejor, muy sencilla y fácil de entender todo, gracias a ella termine de re modelar todo mi blog. Solo quisiera que me ayudaras en una sola cosita, el ir arriba e ir abajo, por que en google chrome se ve bien pero en explorer y firebox no se ve el ir arriba yo pienso que es por esta parte del código bottom:714px; right:-4px; , en cambio tu web si funciona en los 3 navegadores. Me podrías ayudar??? Mi blog es: http://bloglincolngrandt2009.blogspot.com/. Muchas gracias.

    ResponderEliminar
  6. brother, estoy seguro que sí, a ver si cuando te vuelvas rico te sigues acordando de nosotros los pobres ;)

    ⒼⒶⒷⓄ, Cambia el bottom:714px; por top:0; con eso saldrá en la parte de arriba el de 'Subir'

    ResponderEliminar
  7. Si Bro, cumpliré con mi palabra de Comprar AdSense y agregar la cláusula que diga que cada clic que hagan en tus anuncios los pague 100 dólares! XD

    ResponderEliminar
  8. Eso es música para mis ojos!
    Entonces sí podremos viajar a Perú y gastar muchos soles!
    Un abrazo!

    ResponderEliminar
  9. Jajajajajajaja... ahhh.. olvidé decirte que habrá otra cláusula de que diga que ella será tu "secretaria" ejecutiva de Ciudad Blogger. XD

    Ya me lo imagino!!! harás sólo un post al año!!! XD XD


    Un abrazo!!!

    ResponderEliminar
  10. Un post al año... JAJAJAJAJAJAJAJJAJAJAJJAJAJJAAJAJJAJAJA

    ResponderEliminar
  11. Muchas gracias amigo por la ayudita, sos un capo, disculpa las molestias.
    Muchas gracias.!
    Abrazo.!

    ResponderEliminar
  12. No es ninguna molestia, me da gusto que hayas tenido los resultados esperados.
    Saludos.

    ResponderEliminar
  13. gracias ya me has salvado de mas de una muchas gracias men

    ResponderEliminar
  14. Qué bueno que te ha servido.
    Saludos.

    ResponderEliminar
  15. HOLA POTRO UN SALUDO...Y GRACIAS POR LA AYUDA Y LA RESPUESTA QUE ME PUEDAS BRINDAR.....TE QUERIA PREGUNTAR SI EN LA CABECERA DE MI BLOG EN EL BANNER PUEDO HACER QUE TENGA MOVIMIENTO.....O LO QUE SE LLAMA ROTADOR DE IMAGENES...LO QUE PASA ES QUE QUIERO DARLE MÁS VIDA AL BANNER QUE ENCABEZA MI PÁGINA....TE DEJO LA DIRECCION PARA QUE MEDES TU OPINION http://www.angularestereo972fm.blogspot.com/

    ResponderEliminar
  16. Un rotador y un banner animado son cosas distintas.
    Si quieres que el banner tenga animación como movimiento en las letras y esas cosas entonces necesitas hacer el banner en formato .GIF para ello requieres de un programa de diseño.
    Si quieres un rotador de banners entonces puedes ver cómo hacerlo aquí. Ese tipo de banner hará que el banner vaya cambiando, primero muestra uno, luego otro, etc.

    Saludos.

    ResponderEliminar
  17. HOLA POTRO MUCHAS GRACIAS POR EL MENSAJE...DE INMEDIATO ME PUSE A BUSCAR LO QUE ME RECOMENDO....YA LO SE HACER PERO CUANDO VOY A PONERLO EN MI BLOG EN LA CABECERA....O BIEN EN OTRAS PARTES DEL BLOG NO FUNCIONA QUEDA SIN ANIMACIÓN......QUE PUEDO HACER EN ESTE CASO.....GRACIAS POR LA AYUDA QUE ME PUEDAS DAR.....

    ResponderEliminar
  18. Necesitaría saber cuál es la imagen a la que le has dado animación para poder darme una idea de dónde está el error.

    Saludos.

    ResponderEliminar
  19. ah bien potro le di animación a dos banner que serian los de la cabecera del blog....internamente aquí los pongo y bueno rotan.....pero los pego ahi y nada.....o me diras si es que no se puede hacer eso por ahi....o bueno lo contrario si se puede porfa me guias....muchas gracias por siempre responder a las preguntas que hacemos por aca......

    ResponderEliminar
  20. potro igual si quiero poner una animación tambien en cualquier otra parte del blog que debo hacer gracias....

    ResponderEliminar
  21. ¿Cuál es la URL de la imagen animada?

    ResponderEliminar
  22. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  23. Hola, El Potro, referente a los banners, no sé como resolver un problema con las imágenes. Las tengo alojadas en google sities y no consigo que se vean en explorer y mocilla; en cambio sí se ven en Crome. ¿Podrías ayudarme?

    Un saludo y muchas gracias

    ResponderEliminar
  24. Hola XoseAntón,

    Fíjate en el área del código donde va la imagen, tú estás poniendo esto:

    src='url(http://sites.google.com/site/xoseantonimpulsos/impulsos/ads.jpg)'

    Y debe ser sin lo de url y los paréntesis, es decir, debe ser así:

    src='http://sites.google.com/site/xoseantonimpulsos/impulsos/ads.jpg'

    Saludos.

    ResponderEliminar
  25. Tal cual, El Potro. ¡Funciona!, ese era el problema. Creo que mientras los banner que tengo en el blog sean gratuitos, mereces tener uno. Casi todo, o todo, porque de aquí partí hacia otros lados, lo he aprendido aquí, en Ciudad Bloguer; por lo que es de justicia añadir un enlace en mi blog. ¿Me dices tú cuál es la imagen o banner que utilizas?

    Gracias, muchas gracias y un entrañable saludo

    ResponderEliminar
  26. Qué bueno que ya te ha funcionado :)
    Muchas gracias por el enlace, aquí hay algunos banners.

    Saludos.

    ResponderEliminar
  27. Listo, ya lo coloqué.

    Un saludo y gracias por tu valiosa ayuda

    ResponderEliminar
  28. Oye tengo un problema, Como Cambio el tamaño de la sidebar a 280px ?

    ResponderEliminar
  29. Si la quieres modificar en la de insiden00 va a ser un poco complicado pues se tiene que reducir el área de las entradas para poder aumentar la sidebar, y el problema está en que tu plantilla tiene muchas imágenes de fondo, por lo tanto si se reduce o amplia algo también tienen que editarse las imágenes con las nuevas medidas y subirlas a un servidor... algo (o muy) trabajoso.

    ResponderEliminar
  30. porto que sucede si solo coloco los banner en seleccionar gadget nada mas. por q es necesario colocar ese codigo en la plantilla ?

    ResponderEliminar
  31. No es necesario a menos que tu plantilla no te permita mostrarlos de dos en dos (como la mayoría), si no es tu caso entonces no hace falta poner los códigos, sólo las imágenes sin hacer nada más.

    Saludos.

    ResponderEliminar
  32. HOLA!!

    MI PREGUNTA ES

    ¿COMO SE YO CUAL ES LA URL DE LA IMAGEN QUE QUIERO COLOCAR SI LA IMAGEN ESTA EN MI PC?

    ESPERO M EPUEDAS AYUDAR

    SALUDOS!!

    ResponderEliminar
  33. Hola El beto,

    Necesitas subir tu imagen a Internet para poder obtener la URL.
    Aquí hay un videotutorial sobre cómo subir archivos a Internet.

    Saludos.

    ResponderEliminar
  34. Gracias por tu ayuda!!

    Tengo otro problema

    mi pagina cuando temina de cargar, las imagenes no quedan
    acomodadas como yo las puse y la pagina se extiende demasiado.

    Hechale un vistaso

    www.lachikatraviesa.blogspot.com

    Espero me puedas decir a que se debe eso!!

    saludos

    ResponderEliminar
  35. No sé cómo las hayas ordenado :s

    ResponderEliminar
  36. cuando creé la entrada

    las ordene

    imagen 1 imagen 2 imagen 3

    imagen 4 imagen 5 imagen 6

    imagen 7 imagen 8 imagen 9


    pero cuando le di ver blogg

    al terminar de cargarse la paginia se desacomodan de

    esta forma:


    1
    2
    3
    4
    5
    6
    7
    8
    9

    y los enlaces que tiene cada imagen no se pueden abrir

    osea dando click sobre las imagenes, tiene que aparecer

    la manita cuando paso el cursor sobre cada imagen,

    pero no lo hace.

    Bueno voy a seguir buscandole

    A ver si encuentro la falla

    Saludos!!

    ResponderEliminar
  37. Pues yo veo las imágenes en el orden que habías elegido
    1 2 3
    4 5 6

    Incluso cada imagen tiene un enlace.

    ResponderEliminar
  38. Entonces no se que pasa

    por que yo las veo en otro orden

    gracias de todos modos

    un saludo

    xao

    ResponderEliminar
  39. Hola otra vez!!

    Espero estes bien.

    Tengo otra pregunta, lo que pasa que me gustaria
    poner un ranking o voto a mis fotos, pero no lo kiero para cada post, sino para fotos que tenga en la entrada con un voton de "votar"

    Mas o menos como un top 10

    foto 1
    votar
    ----------

    foto 2
    votar
    ----------

    foto 3
    votar
    ----------

    y asi hasta la foto 10

    Espero me allas entendido :D

    Y espero tmb me puedas ayudar con ello

    Un abrazo y un saludo

    ResponderEliminar
  40. No conozco ningún servicio que pueda hacerlo, al menos no para Blogger.

    ResponderEliminar
  41. Amigo soy nuevo en esto..hice todo lo que dices pero no me salen las imagenes en el blog ni nada

    mi blog es

    http://tuhuequito.blogspot.com/

    ResponderEliminar
  42. Como dice al inicio, se necesita que la sidebar mida por lo menos 280px de ancho, y la tuya tiene apenas 265px.

    ResponderEliminar
  43. ah ok gracias, y por casualidad no sabras si a esta plantilla puedo aumentarle la sidebar ?

    ResponderEliminar
  44. Pues lo que sucede es que esa plantilla está hecha a base de imágenes y ahí se complican las cosas.

    Lo que puedes intentar es ajustar los valores del código de los banners para que queden con menos distancia entre sí. Es decir, en lugar de esto:

    .ads {
    margin-top:5px;
    margin-left:5px;
    }
    .ads img {
    padding: 4px;
    margin-bottom: 5px;
    }

    Poner esto:

    .ads {
    margin-top:4px;
    margin-left:4px;
    }
    .ads img {
    padding:3px;
    margin-bottom:4px;
    }

    ResponderEliminar
  45. No amigo nada.. creo q es mejor cambiar la plantilla

    amigo y otra cosa disculpa la molestia no tiene nada q ver con el tema pero es que sobre esto no se mucho y aprovecho la oportunidad para preguntarte sobre como hago para poner paginas asi como "contacto" yo las puse y no se ven bien

    como puedo hacer ?

    ResponderEliminar
  46. Lo que pasa es que el 'Leer más' que pusiste es un código viejo que no está actualizado, por eso no se muestra completa la página estática.
    Deshaz ese truco y agrega este.

    ResponderEliminar
  47. amigo disculpa la ignorancia y el fastidio pero que es lo que tengo que quitar ?? es decir cual es el codigo viejo para borrarlo ?

    gracias de antemano

    ResponderEliminar
  48. Ignoro de dónde lo hayas sacado, tendrías que ir al post donde lo sacaste y ver qué códigos pusiste para saber cuáles eliminar.

    ResponderEliminar
  49. Hola potro, queria preguntarte si sabrias como poner en el hueco del gadget de mi cabecera, varios iconos (favicon) con enlaces independientes para cada uno de ellos. No es lo de la pagina del millon de dolares, seria solo bajo el titulo de mi blog, agregar favicon de amigos y seguidores de mi blogs para que pudieran enlazarlos a ellos desde ahi.
    Mil gracias de antemano

    ResponderEliminar
  50. Creo que te refieres a la faviconera:
    http://oloblogger.blogspot.com/2009/02/faviconera-adaptable-con-rollover.html

    ResponderEliminar
  51. hola en la parte de arriba de mi blog me aparece esto
    /* Banners 125 x 125 ----------------------------------------------- */ .ads { margin-top:5px; margin-left:5px; } .ads img { padding: 4px; margin-bottom: 5px; }

    como le hago para que no se vea en el blog

    ResponderEliminar
  52. Entra en a Edición HTML de tu plantilla y busca casi al inicio ese texto que te aparece y elimínalo.

    Se encuentra un poco arriba de donde aparece el nombre de la plantilla.

    ResponderEliminar
  53. Hola, Potro! La verdad que sos un maestro, y estoy mejorando el Blog de mi agrupación en base a tus consejos, que desde ya agradezco.

    Te hago una pregunta, agregué las webs amigas como banners en la sidebar, cada uno un enlace independiente que lleva a la página correspondiente. El tema es que me abre la web nueva en el misma ventana y "saca" al navegante de mi página. ¿Hay alguna manera de que abran en ventana aparte?

    El Blog es este: http://jeeperosdelabahia.blogspot.com

    Gracias otra vez!!

    Obe

    ResponderEliminar
  54. Claro, agrega el atributo target='_blank' después de la URL del enlace. En esta entrada puedes ver un ejemplo de cómo hacerlo.

    ResponderEliminar
  55. Espectacular, quedó fenómeno.
    Gracias, amigo!

    ResponderEliminar
  56. Aaarrrggg!!! No me deja acceder a vista previa, Potro :(
    El dichoso mensaje es el mismo de otras tantas veces,intentando implementar otras tantas cosas....

    "Mensaje de error de XML: The processing instruction must begin with the name of the target."

    Por el ancho de la sidebar no creo que sea problema. Tiene una medida de 390 px. Esta medida variará, porque quiero hacer otras cosas, por lo que estoy mareando a tu blog, a ver si lo encuentro, jajajaj...;)
    Hasta pronto!

    ResponderEliminar
  57. Potro,ya se solucionó. No me preguntes cómo....no tengo idea.
    Empiezo a pensar si la plataforma Blogger, anda algo loca.
    He colocado tu banner,aunque quedará hasta que tenga el blog a mi manera, sin poder verse; el blog, aún no es público.Con tu ayuda, sé que eso llegará.
    Gracias por tu ayuda antes, ahora.....y lo que vendrá, jajajaj

    ResponderEliminar
  58. siento molestarte otra ves brother ami no me funciona revisa porfavor.

    y muchas gracias esta es mi web
    http://www.distritourbano.net/

    te puse el enlase amigo ;)

    ResponderEliminar
  59. Lo que pasa es que aunque el ancho de tu sidebar si es suficiente, tu plantilla tiene estilos que indican que el ancho del gadget debe ser pequeño.
    Busca esta parte de tu plantilla y elimina lo que está en negrita:

    .sidebar .widget-content {
    background:url(http://img214.imageshack.us/img214/6851/sinttulo1copiaaaaaa.jpg);
    width:187px;
    height:auto;
    }

    Saludos y gracias por el enlace :)

    ResponderEliminar
  60. como siempre tu sabes todo =D pasame un 125 x 125 tuyo =D

    ResponderEliminar
  61. oiii una pregunta hay alguna forma de poner una imagen y abajo de la imagen una lista de enlases y al lado otra imagen y una lista de enlases es que mi template no quiere divir la sidebar en 2 cuando la divido me sale una mitad de sidebar arriva y otra abajo :S

    ResponderEliminar
  62. Aquí hay algunos banners.
    Quizá lo que deseas puedas hacerlo con una tabla.

    ResponderEliminar
  63. Vuelvo a nutrir mi blog con tu sabiduria, Potro, con excelente resultado, sencillo y rápido.

    Y de nuevo mil gracias :D

    ResponderEliminar
  64. Hola Potro,

    He estado leyendo este post y tengo una pregunta que hacerte. En que plantilla de edición pego esto que comentas:
    /* Banners 125 x 125
    ----------------------------------------------- */
    .ads {
    margin-top:5px;
    margin-left:5px;
    }
    .ads img {
    padding: 4px;
    margin-bottom: 5px;
    }

    Es que ya lo hice en sidebar.php y me arrojo un error, lo cambié de lugar y siguió igual, sin embar, lo borre y copie el código html y salío, pero no tengo manera de editarlo para separarlo.

    Gracias, espero tu comentario.-

    ResponderEliminar
  65. Por cierto mi página es www.inmueblesmall.com

    ResponderEliminar
  66. Hola Inmuebles,

    Los tutoriales aquí publicados son para los blogs de la plataforma Blogger.
    Aunque no he probado ninguno de ellos en sitios Web o alguna otra plataforma de blogs muchos de ellos también funcionan fuera de Blogger.

    En el caso de eso que mencionas supongo que debes ponerlo en los estilos .CSS de tu página.

    Saludos.

    ResponderEliminar
  67. Potro, a mi no me funciona ;(
    Me salen las 4 imagenes una debajo de la otra, yo quiero que salgan una al lado de la otra y otras dos abajo, como las que tu tienes.
    www.rana-rosa.blogspot.com
    Gracias como siempre!

    ResponderEliminar
  68. Hola Natali,

    Lo que pasa es que tus imágenes están muy grandes y deben ser de 125px.
    Copia de nuevo el segundo código, ya lo he modificado para que tus imágenes se ajusten automáticamente a esa medida.

    Saludos!

    ResponderEliminar
  69. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  70. Ya que estoy te hago otra consulta aca, es sobre otro tema, puse un gadget como cabecera y tengo un menu desplegable el problema es que al abrir el menu, este queda atras del gadget, queria saber si no hay forma de enviarlo al fondo.. muchas gracias

    ResponderEliminar
  71. Posiblemente sólo hay que agregar un z-index al menú. ¿Cuál es el blog donde tienes ese problema?

    ResponderEliminar
  72. serviciotecnicolyl.com.ar

    la primer pregunta era como aumentar el tamaño de los banners pero lo solucione. arriba tengo un menu que saque de una de tus publicaciones, el tema es que la cabecera es un gadget, no es la cabecera original de blogger digamos. Gracias

    ResponderEliminar
  73. Ese gadget es un archivo flash así que tienes que aplicarle transparencia para que no se encime ni al menú ni a cualquier otro elemento en el futuro:
    http://ciudadblogger.com/2011/03/cuando-los-videos-se-sobreponen.html

    ResponderEliminar
  74. funciono!! muchisimas gracias!!
    segui asi, exelente tu trabajo, es una gran ayuda para los que recien comenzamos en esto. Saludos

    ResponderEliminar
  75. Me gustaría incluir los códigos que me proporcionan las empresas de publicidad en estos banners, ¿donde los sitúo?
    Gracias y enhorabuena por tu gran trabajo.
    Saludos

    ResponderEliminar
  76. Saludos, ¿cuáles empresas de publicidad?

    ResponderEliminar
  77. Podria ser cualquiera como ADPV, SMOWTION,Impresiones Web.....el caso es que nos dan un codigo que debemos colocar en un gadget HTML.
    Saludos

    ResponderEliminar
  78. Esa publicidad la colocas como ellos te dicen y como ya sabes, es decir, dentro de un gadget HTML/Javascript. Pero no la puedes organizar en pequeños grupos de 125px pues no sólo funcionan con u script, sino que tienen todos una medida diferente.

    ResponderEliminar
  79. El problema es el siguiente:
    Con Adlemons tengo 4 códigos para 4 anuncios 125x125, la idea es colocarlos dentro de un gadget, para que se vean 2 arriba y 2 abajo.
    Puedes ver en mi blog (en la zona derecha inferior)que están los 4 en vertical(los 4 códigos los metí en un único gadget).
    Muchísimas gracias por tu ayuda.
    Saludos

    ResponderEliminar
  80. Lo consegui!!!!!
    Con el post que publicaste de tablas va fenomenal, de todas formas si sabes de otro método házmelo saber.
    Muchas gracias, eres un monstruo.
    Saludos

    ResponderEliminar
  81. Otra pregunta,¿como puedo disminuir el espacio que queda entre el titulo del blog y el carrusel de imágenes?
    ¿y entre el carrusel y la publicidad?
    Graciasssssss

    ResponderEliminar
  82. Excelente, con las tablas es la mejor forma de alinear gadgets, bueno, la menos complicada.
    Para modificar los espacios añade unos márgenes al carrusel, eso lo puedes hacer poniendo arriba de #carrousel ul{ esto:

    #carrousel {
    margin-top: -30px;
    margin-bottom: -50px;
    }

    El primero es el margen superior y el segundo el inferior.

    ResponderEliminar
  83. ¡¡¡¡Genial!!! Ha funcionado de maravilla, el margin-bottom tuve que dejarlo en -25 ya que el carrousel no se movía.
    Gracias por todo

    ResponderEliminar
  84. Amigo potro, he empezado a insertar algo de publicidad en mi blog, mi pregunta es cómo hacer que cuando se pinche en ella se abra una nueva ventada, pero solamente para la publi. Pero sin que se abran ventanas en los demás enlaces de la web. Un abrazo

    ResponderEliminar
  85. Hola Carlos,

    Agrega el atributo target="_blank" a los enlaces que desees que se abran de esa modalidad:
    http://ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html

    Un abrazo.

    ResponderEliminar
  86. Hola El Potro... resulta que puesto este codigo para banners y nome ha salido como esperaba... queda una debajo de otra haciendo una fila.. y quisiera verlos en forma de cuadrado.. de a dos... la sidebar tiene 320.. he puesto unas imagenes de ejemplo pra que las veas... la url es: http://partiturashimnarioadventista.blogspot.com/.. tambien he modificado los valores de

    margin-top:5px;
    margin-left:5px;
    y

    padding: 4px;
    margin-bottom: 5px;
    por ahora no he podido... agradezco inmensamente tu ayuda

    ResponderEliminar
    Respuestas
    1. Hola GCS, cambia esto:
      margin-left:4px;

      Por esto:
      margin-left: -7px;

      Eliminar
    2. Muchas Gracias EL Potro!! excelente! ya quedo perfecto!!

      Eliminar
  87. Hola potro, me gustaría colocar unos banner en mi blog de asesoramientoconsorcios entre la imagen que tengo de "Preparate para lo que se viene" y el slider de abajo. Ahí en el medio, me gustaría colocar unos banner de 125x125 pero en fila horizontal, uno al lado del otro, un total de 4 aproximadamente, separados y para que se compre ese espacio de publicidad, entonces, cómo debería ponerlo, dónde los ubico en mi plantilla, cómo sería...me ayudás??? gracias.

    ResponderEliminar
    Respuestas
    1. Hola María de las Mercedes, no he comprendido dónde quieres ponerlos porque no vi la imagen que dices, pero aun así, en cualquier área de la sidebar puedes poner un gadget HTML/Javascript y ahí poner los códigos de las imágenes que deseas.
      Saludos.

      Eliminar
    2. Mi idea es poner en el blog de asesoramientoconsorcios.blogspot.com 4 banner para publicidad entre una imagen y el slider que tengo en la página de inicio, arriba. En esta imagen te lo detallo mejor: http://dl.dropbox.com/u/53944893/Donde%20van%20los%20banner.png el slider está puesto en un html/javascript mientras que la imagen está cargada en la plantilla, entonces, cómo puedo poner los 4 banner, uno al lado del otro, y ese espacio tiene un ancho de 570...esa era mi pregunta, dónde me conviene ponerlo, en la plantilla o en un html/javascript y cómo sería....gracias.

      Eliminar
    3. Mi idea es poner en el blog de asesoramientoconsorcios.blogspot.com 4 banner para publicidad entre una imagen y el slider que tengo en la página de inicio, arriba. En esta imagen te lo detallo mejor: http://dl.dropbox.com/u/53944893/Donde%20van%20los%20banner.png el slider está puesto en un html/javascript mientras que la imagen está cargada en la plantilla, entonces, cómo puedo poner los 4 banner, uno al lado del otro, y ese espacio tiene un ancho de 570...esa era mi pregunta, dónde me conviene ponerlo, en la plantilla o en un html/javascript y cómo sería....gracias.

      Eliminar
    4. Sería más conveniente si los pones dentro del mismo gadget donde tienes el slider, los pones hasta abajo y así no agregas otro gadget más.
      Para que queden horizontales sólo agrega un banner después del otro, sin dar saltos de línea, o bien, puedes usar una tabla si lo prefieres:
      http://ciudadblogger.com/2009/05/insertar-tablas-en-blogger.html

      Eliminar
    5. Cómo es eso de no dar saltos de línea??? si los pongo como están acá entonces me aparecerán uno abajo del otro?? No quiero usar una tabla, muy complicado, no sabría cómo mezclar ambas cosas...jajajaja

      Eliminar
    6. Saltos de línea = dar ENTER.
      Si los pones igual que acá te aparecerán igual que acá, no como quieres.
      La tabla parece complicado, igual a mí siempre me dio esa impresión, pero ya con el uso no lo es tanto ;)

      Eliminar
  88. Hola potro quisiera poner estos cuatro espacios para banner, pero en uno de ellos colocar mi banner 125x125 de "Enlazame" que tienes en esta entrada http://ciudadblogger.com/2010/06/gadget-para-que-nos-enlacen.html ... la pregunta se puede o tendria que poner otro gadget! Mi blog: http://lacuartad.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola mkal, sí se puede pero ya no quedarían los 4 banners ordenados ya que uno tiene el botón abajo para hacer click, mientras que los demás se haría click en la imagen, así que lo mejor es que si usarás ese gadget lo pongas por separado.

      Eliminar
  89. Hola de nuevo la pesada! jajaja probé con una url y la dirección de la imagen subida a dropbox y no me funcionó, ¿qué puede ser?

    ResponderEliminar
    Respuestas
    1. Habría que ver cuál URL pusiste y en cuál blog.

      Eliminar
  90. www.campustenerife.org y la URL la subí a dropbox y cuando le di a la opción copiar enlace es el que puse en el blog y no se ve nada..

    ResponderEliminar
    Respuestas
    1. No veo que ningún banner tenga una URL de Dropbox, de hecho tres de ellos no tienen ninguna URL, sólo el primero tiene una URL de ImageShack el cual está incorrecto. Si todas las subirás ahí entonces necesitas el "Direct Link", y si las subes a Dropbox tienes que meterlas dentro de la carpeta "Public".

      Eliminar
  91. Hola potro...muchas gracias por tan excelente información. Pude colocar los banners en mi blog pero me gustaria saber como hacer para agregarle color al contorno. Tal como en el ejemplo que pusiste al inicio del post donde aparecen los 4 cuadros de banners todos encerrados en un cuadro gris, ya que puse los banners pero me quedaron sin contorno. Y tambien te agradeceria un monton que me dijeras como delinear dicho cuadro gris, por ejemplo con una linea negra.
    Este es mi blog por cierto: http://vitmoney.blogspot.com/
    Muchas gracias por toda la ayuda que nos brindas

    ResponderEliminar
  92. Hola Admón, en el ejemplo la imagen es la que tiene el borde, por eso se ve así.
    Si quieres ponerles borde agrega debajo de .ads { y de .ads img { esto:
    border:2px solid #000;

    Saludos.

    ResponderEliminar
  93. Perfecto!!! era justo lo que buscaba. Le puse los bordes a las imagenes y quedo genial. Gracias potro...sos mas grande que bill gates

    ResponderEliminar
  94. Potro, buenas tardes, estoy intentando de poner los banners pero me salen los 4 uno debajo del otro, en vez de salir en linea y sin ninguna imagen dentro del banner ni enlace. La anchura de la sidebar? es de 280 px y de todas formas le he cambiado el tamaño del margen derecho,izquierdo y el padding. Me podrías ayudar?. Lo tengo hecho en un blog de pruebas que la dirección es: http://virgiesber.blogspot.com.es/
    Muchísimas gracias de antemano

    ResponderEliminar
  95. Potro, te rogaría me ayudases con este tema. He intentado de poner los bannelos rs de 125 px pero me salen en la sidebar un banner debajo de otro (los cuatro uno9 debajo de otro).La sidebar tiene 290px, así que no entiendo porqué salen todos uno debajo del otro (los 4).

    ResponderEliminar
    Respuestas
    1. Hola Virginia. Hay un error en la colocación del primer código, al ponerlo has eliminado una llave de cierre } del código de arriba:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Si ya solucionando eso se sigue viendo mal entonces haz más amplia la sidebar ya que según las medidas que aparecen en el navegador tiene menos de los 280px necesarios.
      Saludos.

      Eliminar
  96. Eres fenomenal, ya he podido poner los banner como estaban diseñados, tus explicaciones nos lo hacen mucho más facil, lo que pasa es que he tenido que ponerlos a 115px porque sino las entradas me disminuian de tamaño y se salian las fotos. Los enlaces de los banner enlazan sin problemas pero las fotos no sé porqué motivo no salen en el banner. Creo que los enlaces son correctos. Te copio como he puesto los enlaces de las fotos que tiene que salir en los banners:

    https://plus.google.com/photos/108089496358420572205/albums/5770347196684128129/5770348042199898786"
    https://plus.google.com/photos/108089496358420572205/albums/5770347196684128129/5770348127855786482"
    https://plus.google.com/photos/108089496358420572205/albums/5770347196684128129/5770347664537068994"
    https://plus.google.com/photos/108089496358420572205/albums/5707993511102198833/5757299008938376130"
    Es que soy un poco torpe con los diseños de los blog, si me pudieses comentar porqué no salen las fotos te lo agradecería un montón, abrazos !!

    ResponderEliminar
    Respuestas
    1. Hola Virginia, te paso un enlace donde se explica cómo subir las imágenes y obtener su URL, así no tendrás problemas ;)
      http://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html

      Eliminar
  97. Hola, Potro!!! Espero ke estés muy bien =D. Intenté poner estos banners en mi blog pero no me salen como tu ejemplo =(, me salen en vertical cada uno =S. Parece ke mi sidebar tiene más de 280 px pero me los pone en fila india ¬¬, se puede modificar o nou??? Gracias de antemano!!! Besito =)

    ResponderEliminar
    Respuestas
    1. Hola Merlina, parece que ya lo has resuelto, entré a tu blog y los veo bien colocados.

      Eliminar
  98. Sí, muchísimas gracias! Pude resolverlo después de 3 horas de arrancarme la cabellera =P. Gracias por tu ayuda!!! Besito =)

    ResponderEliminar
  99. ¡Buenas Noches Potro!

    Te iba a hacer una consulta referente a los direccionamientos al dar clic en la imagen, pero lo resolví. jejeje.

    Así que aprovecho para hacerte una petición... Se supone que el slider que tengo en mi blog se mueva, osea, cambie entre las 4 entradas que se supone coloque... pero no se mueve. Solo muestra siempre la primera... ¿sabes por qué? Si necesito un código o algo. ¡Gracias de antemano!

    Blog: TVboricuaUSA.com

    ResponderEliminar
    Respuestas
    1. Buen día :)
      Puede ser porque tienes 3 versiones de jQuery, deja sólo una y mira si todo se arregla.

      Eliminar
    2. Potro, gracias por la respuesta. Eliminé las dos versiones anteriores de jQuery... y deje solo una. Con todo y eso no funciona.

      Si lo cambio por la versión actual que aparece en la página... me deja de funcionar los botones sociales con efecto deslizante que publicaste hace poco.

      ¿No sabes a que otro ´error´ se pueda deber el porque no funciona el slider?

      Eliminar
    3. El script de jQuery debe ir antes que lo demás, preferentemente después de <head>
      Si no los plugins no pueden leer la librería.
      Por cierto, los corazones del cursor también usan jQuery.

      Eliminar
    4. Potro, lo he intentado todooooo. Pero si muevo el script de jQuery más arriba (antes que todo) me dejan de funcionar lo de los iconos de redes sociales con efecto de desvanecimiento. Con todo y eso traté de ponerlo un poco más arriba... y ahí bien.

      Pero no logró hacer que el slider se mueva... ¡Y me tiene mal! HELP ME HELP ME... Códigos o algo POR FAVORRRR.

      Eliminar
    5. Entonces puede ser que alguno de esos scripts no sea compatible con el slider, en esos casos habrá que quitar el último script que añadiste :/

      Eliminar
  100. Hola Potro, a ver si me puedes ayudar, quiero reducir el espacio de los banner en la sidebar. Es decir, los tengo colocado en vertical uno debajo de otro, pero entre banner y banner quiero que queden mas juntos.

    Un saludo y muchisimas gracias.

    Javier

    ResponderEliminar
    Respuestas
    1. Hola, prueba con estos estilos:

      #Image 4 .widget, #Image 2 .widget, #Image 1 .widget {margin:0 !important;}

      Eliminar
    2. Hola Potro, no me acordaba en que entrada hice la consulta ya perdonaras, aunque tengo un problema que es que no se donde tengo que ponerlo o que tengo que sustituir. Si no te importa me puedes orientar un poquito más. Te estoy muy agradecido.Te mando otro pantallazo. https://www.dropbox.com/s/nfm2mjwaqy6tfoi/Platilla.bmp

      Un saludo de nuevo
      Javier

      Eliminar
    3. Los estilos van siempre antes de ]]></b:skin>
      Saludos.

      Eliminar
  101. Saludos Potro,

    He intentado todo lo que mencionas, y hasta ahora no me ha funcionado. Sigue saliendo en mi blog, el banner de 4 de forma vertical. He seguido todas las sugerencias que se mencionan en los comentarios, pero nada me funciona. Es bien raro, porque todo lo que tu muestras, siempre funciona. En realidad lo que estoy buscando no es para publicidad, mas bien es para colocar las fotos de los colaboradores del blog, con enlaces a sus respectivos blogs, para que se muestren parecico a los banners. Alguna sugerencia?

    ResponderEliminar
  102. Saludos Potro,

    He seguido todas tus indicaciones y las que has puesto en los comentarios, y nada me ha funcionado. Es raro, porque siempre funciona todo lo que muestras. Estoy buscando algo parecido a esto para colocar las fotos de los colaboradores del blog junto con el enlace de sus propios blogs, no es para publicidad. si tienes alguna sugerencia para esto, t lo agradecere.

    De todas formas te agradezco, porque la inmensa mayoria de las arreglos de mi blog los he realizado con tus conocimientos!!

    ResponderEliminar
  103. Hola, como hago para que me aparesca una barra de publicidad entre post y post y no un cuadrado como sale en mi blog. Alguna ayuda? Saludos.

    ResponderEliminar
    Respuestas
    1. Hola INDIE DRUGS, mira esta entrada y sigue los mismos pasos, sólo que en lugar de poner el código de la imagen del separdor pondrías el código de tu anuncio.
      http://ciudadblogger.com/2010/02/poner-separadores-entre-las-entradas.html

      Eliminar
  104. hola potro! tengo un gif que lo quiero poner en un cajon de gadget.. pero no se como hacerlo. intenté con el gadget de imagen, pero no aparece :/ me enseñas porfa???

    ResponderEliminar
    Respuestas
    1. Hola, sube la imagen a Picasaweb, luego con la URL de la imagen puedes ponerla en el gadget. Algo como esto:
      http://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html

      Eliminar
  105. Respuestas
    1. Sí, sólo súbelos previamente a Picasaweb.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger