Anuncios rotativos con jQuery

10 de agosto de 2010 267 comentarios ,
Hace ya bastante tiempo vimos cómo poner un rotador de banners en el cual es posible agregar sólo imágenes que rotarán una seguida de la otra en forma secuencial.
Con jQuery y el script InnerFade podemos crear anuncios no sólo con imágenes sino también con textos y además podemos elegir si aparecen de forma secuencial o aleatoria. En cualquiera de los casos es posible mostrarlos con un efecto de desvanecimiento entre cada uno de ellos.

En el caso de los anuncios de texto quedan perfecto para resaltar entradas que quizá están un poco olvidadas o que simplemente queremos destacar.



Y en el de las imágenes podemos usarlo también para mostrar entradas destacadas, para publicitar alguna otra cosa más, o simplemente para mostrar las imágenes que te gustan.



En ambos casos la instalción es muy sencilla. Primero hay que descargar este archivo, descomprimirlo y subir el script a un alojamiento.

Luego entra en Diseño | Edición de HTML y antes de </head> pega lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='URL del archivo jquery.innerfade.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(
function(){
$(&#39;#news&#39;).innerfade({
animationtype: &#39;slide&#39;,
speed: 850,
timeout: 3000,
type: &#39;random&#39;,
});

$(&#39;ul#portfolio&#39;).innerfade({
animationtype: &#39;fade&#39;,
speed: 1000,
timeout: 4000,
type: &#39;sequence&#39;,
});
});
</script>

Agrega donde se indica en color verde la URL del archivo que subiste previamente.
Ahora antes de ]]></b:skin> pega esto:
#news-div {
height:50px; /* Altura del contenedor de los anuncios de texto */
background:#FFFEB8; /* Color de fondo de los anuncios de texto */
border:1px solid #ccc;
}
#news li {list-style-type:none;}
#portfolio li {list-style-type:none;}

Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega uno de estos códigos:

Para los anuncios de texto
<div id='news-div'>
<ul id='news'>
<li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
<li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
<li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
<li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
<li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
</ul>
</div>

Agrega donde se indica la URL del enlace que tendrá el anuncio así como el texto correspondiente.

Para los anuncios de imágenes
<ul id='portfolio'>
<li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
<li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
<li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
<li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
<li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
</ul>

De igual modo agrega las URL de los enlaces así como las URL de las imágenes.

Dentro del primer código hay unas opciones que podemos personalizar y son las que están en color azul.
animationtype Es el efecto, con slide aparecerá como diapositiva y con fade con desvanecimiento.
speed es la velocidad en milisegundos.
timeout es el tiempo en milisegundos que se muestra cada anuncio.
type define en qué orden se muestran, random es aleatorio y sequence es consecutivo.


267 comentarios en:

" Anuncios rotativos con jQuery "

  1. Que buen truco, en cuando piense que voy a escribir lo pongo.
    Por cierto, ya llegaste a los mas de 1000 seguidores, ¡Felicidades!

    ResponderEliminar
  2. oye potro por que en los anuncios de texto le doy click y se abre la página en el espacio donde va el anuncio

    ResponderEliminar
  3. Exelente......
    Gracias por compartilo POTRO

    Una pregunta sabes como poner una barra que este abajo del blog pero que siga ai cuando bajas o sube la pagina del blog es parecido a este menu: http://ciudadblogger.com/2009/11/menu-vertical-desplegable.html

    ResponderEliminar
  4. Dankey, siii, a ver si después llegamos a los 2000 :)

    Luis, porque mi ejemplo es un iframe, es por eso que se abre ahí mismo pero cuando tú lo pongas se abrirá normal.

    -º_Rzm_º-, por ahí tengo una entrada pendiente para explicar un menú de esos, apenas tenga tiempo la termino.

    ResponderEliminar
  5. Muy bien, alomejor pondre el texto, Saludos y gracias

    ResponderEliminar
  6. La verdad, te luciste con este post, el script es útil, práctico y fácil de implementar. Muchas gracias por la info, saludos.

    ResponderEliminar
  7. hola potro gracias nuevamente por este recurso.. una pregunta se que existe alguna ventaja pero no se cual, ¿cual es la ventaja de usar este recurso en lugar de una imagen GIF?

    ResponderEliminar
  8. Hola! Vengo del Blog http://eldiariodel6a.blogspot.com/ quisiera saber, si me quieren afiliar ;)

    ResponderEliminar
  9. Hola potro tengo un problema, donde puedo contactarte por correo.

    ResponderEliminar
  10. Hola Potro. Tengo una duda, y no se si se pueda. Lo que quiero hacer es poner en mi página web, wallpapers para que los descarguen las visitas. Quiero saber si se puede hacer, y si es así, quiero saber como.

    Espero tu respuesta. Gracias :)

    ResponderEliminar
  11. Hola Potro:
    Te apuesto que no sirve si en mi plantilla tengo Prototype y Scriptaculous...

    Saludos.
    Jpz.-

    ResponderEliminar
  12. Potro, también quería saber, si se puede poner archivos adjuntos para descargar en blogger :)

    ResponderEliminar
  13. MCarlitooH2, así como andas aburrido seguro lo pondrás, jaja.

    LMGuillermo, qué bueno que te ha gustado!

    nEjO, en la imagen GIF sólo podrías ponerle un enlace, con este método puedes poner un enlace distinto a cada imagen.

    Miriam, por el momento no participo el programas de intercambios :\

    CHiCken, por ahora todas las consultas son en los comentarios.

    Jpz, ganarías la apuesta.

    Adrián Bórquez, pon la imagen dentro de un zip o rar, luego en la entrada pon la URL del archivo para que lo descarguen.

    ResponderEliminar
  14. Eso estuvo bueno Potro, gracias por compartir

    ResponderEliminar
  15. Por nada, qué bueno que te ha gustado.

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

    ResponderEliminar
  17. Se ve que nos copamos con el jQuery, jajaja.
    Muy buen truco!

    ResponderEliminar
  18. Potro,
    perdona que haga aqui esta pregunta pero no se donde hacerlo.
    ¿Cómo puedo separar el logo de rss y el de google dentro de la misma línea para que no esten tan juntos?
    http://elmundobasedow.blogspot.com/
    Un saludo y gracias.

    ResponderEliminar
  19. Julián Cardoso, es por temporadas, después nos hartaremos de él, jaja.

    Blincacequias, después del código de la primera imagen agrega esto: &nbsp; si quieres más espacio agrega más como ese.

    ResponderEliminar
  20. Gracias amigo,
    Como siempre un Crack. El Messi de los Blogsss.

    ResponderEliminar
  21. ok. muchas gracias y muy bueno, pero tengo un problema, no se ve completo, se ve solamente una parte.
    Muchas gracias.

    ResponderEliminar
  22. Prueba poniendo debajo de:
    type: 'sequence',

    Esto:
    containerheight: '200px'

    En donde dice 200px es la altura de tus imágenes.

    ResponderEliminar
  23. Buenas Potro,
    Llevo ya un mes desde que solicite el alta en assense y no tengo respuesta.¿Puede influier el que me haya dado de alta con una cuenta de hotmail?.
    Por otro lado me gustaria saber porque la barra personalizada se me encoge un poco despues de cargarse la página.

    Un saludo

    ResponderEliminar
  24. POTRO GRACIAS POR LA EXPLICACION DEL GIFT JEJEJE QUE INGENUO SOY JEJEJE UNA CONSULTA SI MIS IMAGNES FUERAN DE 256 X 256 DEBO MODIFICAR ALGO?

    ResponderEliminar
  25. Hollé potro ya se como optimizar los títulos de entradas para Google pero se pueden optimizar también las etiquetas en blogger como wordpress

    ResponderEliminar
  26. Blincacequias, ponte en contacto con ellos, quizá ellos te puedan resolver algo. De lo otro no sé de qué barra hablas :s

    nEjO, no, pero si tuvieras problemas mira el comentario #23

    JuanBnna, no sé a qué te refieras con optimizarlas.

    ResponderEliminar
  27. Sabes, Potro, que yo utilizo la función no conflict de jQuery, para que al usarla pueda combinarla con protoype y con scriptaculous; hasta ahí bien, lo único que cada vez que trato de implementar algo nuevo con jquery me es toda una odisea, y 3 de 5 veces me falla lo nuevo que implemento a jquery, pero, con absolutamente NINGÚN plugin que hayas tu suministrado de jQuery me ha ocasionado ni el más ligero problema.

    En cuanto empiece el colegio, te voy a poner en primera plana en la prensa del mismo.

    Ciudad Blogger: El número 1!
    Sello de Calidad de Drawer 4 Everyone! Garantía!

    ResponderEliminar
  28. Potro optimizar los titulos de las entradas, lo dijiste en esta entrada pero ahora quiero saber como optimizarlas etiquetas

    ResponderEliminar
  29. Gracias,
    me referia a la barra del buscador personalizado, que al poco de cargar la pagina se hace más pequeña.
    Gracias.

    ResponderEliminar
  30. Drawer 4 Everyone, no importa cuánto tardes en hacer que funcione siempre y cuando al final lo logres :) ¡Gracias por tu comentario!

    JuanBnna, para las etiquetas no hay nada qué se les pueda hacer en ese sentido.

    Blincacequias, no sé, yo la veo de igual tamaño desde que abre hasta que carga.

    ResponderEliminar
  31. holaa super tu pagina oye me puedes decir donde puedo conseguir un CONTADOR DE VISTIAS PERO QUE NO SE CUENTE CUANDO YO ENTRO.. si me entiendes?
    bueno ojala me contestes
    pasa x mi blog
    www.gaga-pop.blogspot.com

    ResponderEliminar
  32. Ya te he respondido en la otra entrada.

    ResponderEliminar
  33. ¡muy buen truco! ¡Me funcionó a la perfeccion!

    ResponderEliminar
  34. Oye Potro, acerca del archivo .rar, ya lo hice puse la URL pero no se si en verdad esta sea la URL ->(packwallpapers.rar - RAR archive, unpacked size 998,270 bytes), y si no es, dime como debe de ser la URL. Te lo agradecería mucho. :)

    ResponderEliminar
  35. Esta es una pregunta suelta, lo que pasa es que mi blog recibe un promedio de 120 visitas por día, y lo tengo con adsense, lo que pasa es que las personas no están casi dando clics en los anuncios, sino y el promedio de clic es de 2 a 4 clic, quisiera que me dijeras por que pasa esto, y también todavía no aparezco en los buscadores y las visitas que tengo provienen solo de facebook. Que puedo hacer.
    Gracias por tus comentarios tan oportunos y confiables.
    Y si puedes da consejos para mejorar mi blog.

    http://negociosovida.blogspot.com/

    ResponderEliminar
  36. Hola corazhon <3 espero estes muy bien *----*
    justo estaba algo aburrida, recien llego de idioma y me encuentro con este genial truco O:! Sorprendente!!! Yo me las habia ingeniado hace un tiempo con el photoshop y after para lograr el desvanecimiento y luego use los marquee para que quedara algo (bastante novato xDDDD) que hacia rotar los banners (no rotarlos exactamente xD) pero ahora me facilitas la vida!!! y queda muy bonito *o*

    Muchisimas gracias por aportar tus loables conocimientos a gente que los necesita (como yop xP)

    luego me pondre a hacer banners para utilizar el truco 8DDD a ver que queda xD!.

    Por otro lado tenia una pregunta =_= se que molesto ;_; pero entiendeme ;__; he pensado muchas formas de poder hacerlo y no me sale xDDD (fracaso total xD)

    Quiero que al querer entrar a mi blog aparezca una imagen de "Entrar" y asi se habra el blog sin cambiar la direccion Dx! vi una plantilla de blogskin que lo tenia sin embargo no la analice todavia, pero es complicada u__u
    si sabes una manera de hacerlo porfas me gustaria saberlo *---* si es muy complicado pues no importa xD no quiero quitarte mucho tiempo ;w;

    besitos y duerme bien ;DD!! *le regala un oso de peluche xDDD*

    ResponderEliminar
  37. hola potro disculpa que te haga una pregunta, quisiera que las imágenes solo se publicaran pero sin ningún enlace de dirección solo mostrarlas así como en el ejemplo que pusiste
    habría que quitarle algo, por favor me podrías explicar

    ResponderEliminar
  38. BXBAED, qué bueno que te ha salido todo bien ;)

    Adrián Bórquez, sí, la URL debe terminar con el nombre de la extensión del archivo, en este caso .rar

    Negocios o vida, es un promedio muy bajo el de las personas que hacen clicks en los anuncios pero así en para todos, lo único que puedes hacer es probar con distintos colores y/o ubicaciones para probar si tienes mejor suerte.

    Mirai, pues tanto como que muy novata no creo, mira que hacer todo eso en Photoshop requirió mucho ingenio y habilidad. Sobre el intro yo nunca lo he hecho pero he visto esta entrada de Oloblogger que explica cómo hacerlo, seguro lo conseguirás ;) Besos.

    fernando, sólo no pongas la URL del enlace y en su lugar pon esto javascript:void(0)

    ResponderEliminar
  39. potro pero e visto que hay plantillas de wordpress que luego las ponen en blogger y sus etiquetas tambien estan aptimizadas

    ResponderEliminar
  40. Para subir el archivo, pongan "Extraer aqui" al archivo rar, despues, sube el sube el script a dropbox, asi me funcionó a mi

    ResponderEliminar
  41. JuanBnna, Wordpress es aparte, en Blogger sólo tenemos etiquetas y nada más.

    BXBAED, justo así como lo mencionas es :)

    ResponderEliminar
  42. potro buen pos, felicidades!... tengo un problemita, como hago para que el anuncio no me salga flotando?. lo digo porque se coloca encima de los gadgets y tapa los ya colocados, intente encerrándolo en un cuadro pero no funciono. gracias de antemano.

    ResponderEliminar
  43. Prueba poner al final del código que está en el elemento HTML/Javascript, esto:
    <div style='clear: both;'/>

    ResponderEliminar
  44. potro una pregunta:

    he visto que cuando estamos en tu pagina principal no se ve la publicdad de adsense en ninguna de tus entradas y cuando entramos al post se ve la publicidad, que puedo hacer para eso suceda con mi blog, ya que me parece un poco incomodo, por cuestion de estetica.

    gracias potro

    ResponderEliminar
  45. Usando condicionales, mira esta entrada para que veas cúal usar, lo único que tienes que hacer es encerrar el código de Adsense con la condicional que necesitas.

    Saludos.

    ResponderEliminar
  46. gracias potro, sabes lo curiosos que ya tiene mucho tiempo que he visto esta entrada pero crei que eran algo asi como las politicas de blogger, jajajaja y no entraba

    muchas gracias potro, eres un genio con esto de blogger

    ResponderEliminar
  47. Mostrar /ejecutar un elemento sólo en las entradas individuales

    al parecer es esta la opcion, pero la puse en configuracion - plantilla de entrada y me sigue saliendo la publicidad en la pagina principal del blog cuando publico una entrada, no sabes porque?

    gracias potro

    ResponderEliminar
  48. Si lo has puesto correctamente con eso debe aparecer sólo en las entradas individuales.
    Mira esta entrada:
    http://ciudadblogger.com/2010/01/10-lugares-para-poner-adsense-en.html

    ResponderEliminar
  49. Muy bueno Potro. Mira lo nuevo que me salió a mi!!! http://tynipic.cz.cc/images/327Sin_t_tulo.gif :D :D : D
    Lo voy a aplicar si puedo a el MENÚ, pero en edición HTML, no encuentro el menú, el código :S :S me ayudarías Potro???
    Yo lo que quiero ponerle al menú mio, es title="HOME", así.
    Como hago??? Te anticipo que el menú ya es de la plantilla.

    ResponderEliminar
  50. Pues no me dices en cuál blog, pero en cualquiera que sea sólo usa las teclas CTRL + F y busca una palabra que tenga el menú, así podrás localizarlo.

    ResponderEliminar
  51. Potro miles de gracias por el post que me recomendaste de oloblogger *--* ya interare cuando tenga tiempo xD

    Ahora la pregunta T__T este truco (el rotador de anuncios con imagenes) no me sale muy bien DDD:!
    Problemas:
    -en internet explorer no funciona y me achica los banners :S (seguro que en inter no funciona el truco)
    -en firefox funciona como esta previsto sin embargo aparece sobre mi chat box O_O (yo coloque el widget arriba de el)
    -me respeta la medida de los banners pero aparece con un margen molesto como de unos 15px D:!
    la verdad no se porque sucede todo eso =____= ya me agrio el di xDDDDD

    mira potrito *_* yo quiero colocar el rotador arriba del charbox, espero pueda hacerse y quedar bien entre medio de las sidebares y alineado como el body ;__;
    http://miraiparadiseyunjae.blogspot.com

    ojala sea un fallo mio ;W; besitos potro y gracias, desde ya disculpa las molestias xD

    ResponderEliminar
  52. Seguro no es un fallo tuyo, pero sucede que todos los gadgets se comportan distinto según sea la plantilla, ya sabes, hay unas que requieren más detalles que otras, y en otras de plano casi no se puede trabajar :\

    En Internet Explorer 8 (que es la última versión) funciona sin problemas y se muestra correctamente, en las anteriores no sé, y el problema es que ya casi ningún desarrollador está dando soporte para versiones anteriores a la 8.

    Para que no se encime puedes tratar de poner al final del código que está en el elemento HTML/Javascript, esto:
    <div style='clear: both;'/>

    Lo del margen que mencionas tendría que verlo puesto en tu blog para darme una idea de cómo solucionarlo.

    Besos!

    ResponderEliminar
  53. Hola Potro! resulta que estoy haciendo un blog para mi hermana y estaba probando este script!
    En firefox funciona perfectamente! pero no se porque en explorer no y las imagenes se apilan una abajo de otra!
    http://psyfrostcos.blogspot.com/
    No sabes que puede ser? Q.Q

    Muchas gracias y perdon por la molestia!

    PD: Mirai muchos besos! QwQ

    ResponderEliminar
  54. Hola Potro:
    Estoy trasteando con las nuevas plantillas, y gracias a tu trabajo he puesto varias cosas como los botones, la nube de etiquetas, y el menú emergente.
    He tenido que buscar la ubicación en el código, en algún caso pero parece que todo funciona bastante bien.
    El nuevo blog todavía lo tengo en obras, pero quería darte las gracias por tu excelente trabajo.
    Sinceramente enhorabuena

    ResponderEliminar
  55. LunaLove Hero, en la versión 8 de Internet Explorer (o sea la última) funciona muy bien, quizá debas actualizar tu navegador.


    Txolarte, al contrario, gracias a ti por tomarte el tiempo de escribir este comentario :)

    ResponderEliminar
  56. Potro:tengo internet explorer 8!
    Por eso no entiendo porque no se ve bien! Q.Q

    ResponderEliminar
  57. Qué raro, yo igual tengo la 8 y no he tenido problemas para verlo, sólo cuando pongo la característica de "compatibilidad" es que lo muestra mal, como si estuviera en la versión 7

    ResponderEliminar
  58. Ahhhh si? o.O
    Y no sabes que puedo hacer al respecto con eso de la compatibilidad?
    Disculpa que molesto tanto! ñ.ñ

    ResponderEliminar
  59. No es ninguna molestia, pero lamentablemente no sé cómo ayudarte al respecto, he leído varias veces el sitio del autor y no menciona nada sobre algún hack que permita solucionar las incompatibilidades :\

    ResponderEliminar
  60. ahhhhhhhhhhh que mal entonces! Q.Q
    Buscando otra alternativa encontre este pero no se si se puede usar en blogger! se podra??
    http://workshop.rs/projects/jqfancytransitions/

    ResponderEliminar
  61. Ese en sí no es un rotador de banners sino una galería y es más complicada.
    Algo que podrías usar es la otra opción que menciono al inicio de la entrada, o sea, esta:
    http://ciudadblogger.com/2009/04/banner-cambiante.html

    ResponderEliminar
  62. ohhhh sii sii sii este funciona!
    Muchisimas pero MUCHISIMAS GRACIAS! QwQ

    ResponderEliminar
  63. Muchas gracias potro por responder, no pense que lo harias tan rapido... jejejeje... mira probé lo que me dijiste al final del HTML/Javascript, pero no paso nada, sigue igual... lo quiero para mostrar contenido destacado ya que el s3slider tampoco me funciono ya que me sale la imagen movida y no centrada asi le cambie el tamaño. si tienes una idea por favor...

    ResponderEliminar
  64. Mira el link del comentario #63 ese puede servirte y no te causará tantos problemas a menos que sea tu plantilla :\

    ResponderEliminar
  65. Potro, otra vez yo. Tengo un problema, el Script parece no funcionar en IE. Veras, inicialmente lo alojé en Google sites, pero solo me funcionaba en Firefox mas no en ningún otro navegador. Acabo de Alojar el script usando Dropbox y ya me funciona en Firefox, Safary y Google Crhome, pero aún sigue sin funcionarme en IE... alguna idea?

    ResponderEliminar
  66. Hola Harry,

    Para quienes están teniendo problemas con IE les estoy recomendando esta otra opción:
    http://ciudadblogger.com/2009/04/banner-cambiante.html

    Es menos completa pero seguro te funcionará en todos los navegadores.

    ResponderEliminar
  67. Hola el Potro. El problema es que el de banners no me permite modificar el tiempo (3 segundos es muy rápido para lo que quiero). De todas formas encontré la forma para que no se muestre en IE que es donde no funciona.

    Yo estoy usando el rotador pero de textos... el problema reside cuando cambio de página... o hago un refresh del navegador... En el mejor de los casos... se me ve la lista completa (es muchisimo texto) sobreponiendose al blog... aunque se soluciona en un par de segundos despues... pero en el peor de los casos, se queda toda la lista cubriendo buena parte del blog.. y pues se jode.

    Hechale un vistazo por favor: http://www.cuerpoarmonioso.com

    De entrada seguramente se te va a ver bien, pero si vas por ejemplo a Contactenos, verás que se jode. Y si, ya puse al final el div style='clear: both;'

    ResponderEliminar
  68. Bueno, nada, ya lo he arreglado =)

    ResponderEliminar
  69. Vale, qué bueno que ya lo solucionaste ;)

    ResponderEliminar
  70. mil gracias potro, ese si me funciono bien... gracias a tu pagina he aprendido un poco mas sobre esto ya que soy nuevo... pero como dicen, poco a poco.

    ResponderEliminar
  71. Claro, es poco a poco y sobre la marcha ;)

    ResponderEliminar
  72. muy bueno... pero una cosulta como ajustael cuadro amarillo es decir si se puede para que no quede tan grande el cuadro y las letras medio desparejas o de ultima si es que se puede centrar el texto para que quede un poco mas prolijo. Ja re cargoso el tipo no? bueno desde ya mil gracias!

    ResponderEliminar
  73. En una parte del código que has pegado está esta parte:
    #news-div {
    height:50px;

    Ese 50px es el alto del contenedor, puedes ajustarlo a otro tamaño. Igual puedes poner debajo esto:
    width:300px;

    Ese sería el ancho del recuadro. Además si agregas esto:
    text-align: center;
    Quedará centrado el texto.

    Saludos.

    ResponderEliminar
  74. POTRO perdoname que sea tan molesto pero entonces el código quedaría así porque las letras siguen sin centrarse:

    #news-div {
    height:20px; /* Altura del contenedor de los anuncios de texto */
    width:300px;
    background:#FFFEB8; /* Color de fondo de los anuncios de texto */
    border:1px solid #ccc;
    }
    text-align: center;
    #news li {list-style-type:none;}
    #portfolio li {list-style-type:none;}

    Y una ultima consulta porque con las fotos quiero hacer lo mimo pero colocarlas en una pagina diferente para poder usarla como por ejemplo Picasa pero cuando subo la foto me aparece descompaginada es decir en su tamaño real! y queda fuera de los otros margenes.

    ResponderEliminar
  75. No, debe estar dentro de esa área, es decir, antes de este signo {
    Así:

    #news-div {
    height:20px; /* Altura del contenedor de los anuncios de texto */
    width:300px;
    background:#FFFEB8; /* Color de fondo de los anuncios de texto */
    border:1px solid #ccc;
    text-align: center;
    }

    Para las imágenes puedes ajustar el tamaño directo en el código, esto se hace dentro del área del código de la imagen, sólo hay que agregar lo que está en negrita:

    <img style='width:400px; height:150px;' src='URL de la imagen'/>

    Ahí modifica el ancho (width) y alto (height) de la imagen al tamaño que quieres.

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

    ResponderEliminar
  77. potro queria pedirte un favor si es que podrias subir este efecto a un blog de pruebas porfavor :)

    ResponderEliminar
  78. Ya esté el ejemplo en la entrada, si lo pongo ahí no puedo hacer otro en otro blog.

    ResponderEliminar
  79. Wow Bro!! que interesante!!! es como un Slider.... como los que traen muchas plantillas nuevas de Blogger. Me encata!!!

    Pero a diferencia de ellos, este es muy sencillo de instalar.

    Un abrazo!!!

    ResponderEliminar
  80. Es super sencillo y tiene la ventaja que puede usarse tanto en imágenes como en textos.

    Un abrazo.

    ResponderEliminar
  81. Quizá usas Scriptaculous y por eso no funciona.

    ResponderEliminar
  82. Hey, Potro, quisiera saber si es posible hacer algo parecido a este truco de las imágenes para conseguir lo más cercano a la presentación de entradas en el blog de www.zuzanalight.com que es como anuncios rotativos más un efecto transparente y evanescente con la presentación en texto de la entrada... ojalá me puedas ayudar, hermano, un abrazo.

    ResponderEliminar
  83. Ese que tiene ella es este:
    http://ciudadblogger.com/2010/05/s3slider-mostrar-contenido-destacado.html

    ResponderEliminar
  84. Hola Potro, de verdad tus post son muy buenos, y este en particular me interesa mucho, pero no entiendo el segundo paso, el de copiar unas lineas de códigos antes de: ]]>
    simplemente no encuentro ese elemento en toda la linea de código de la página.

    El tercer paso dices que para aplicarlo hay que hacer clic en una serie de opciones... pudieras decirme con cual programa trabajas ?? y si puedo directamente copiar ese código en el la vista código ??
    Te agradesco mucho tu gestión.

    ResponderEliminar
  85. Busca bien, todas las plantillas de Blogger lo tienen, puedes apoyarte usando las teclas CTRL + F para localizarlo.

    El tercer paso son opciones que trae consigo el mismo script que se utiliza para que se muestren los anuncios, no es un programa. Esas mismas opciones se pueden cambiar dentro del primer código que va antes de </head>

    Saludos.

    ResponderEliminar
  86. Hola, quiero hacerte una consulta. Hice todos los pasos, pero los anuncios me quedan juntos, es decir, uno arriba de otro, no son rotativos. ¿Qué estoy haciendo mal?.
    Gracias, espero tu respuesta. Saludos

    ResponderEliminar
  87. Hola Potro, gracias por responder, que aunque no me dices exactamente qué hacer, por lo menos echas luz sobre el problema... y es que yo no estoy trabajando sobre un blog, lo estoy haciendo sobre una página html y php. me imagino que entonces tendrá que ir dentro de otra parte. por lo demás entiendo todo bastante bien, he probado variantes insertando ese código dentro del mismo script pero igual no funciona... Potro, sin pena alguna te digo que no tengo muchos conocimientos como para enterder la filosofía de los scprits por lo que no vaciles, si tienes tiempo, en dar todas las instrucciones que quieras... Macho y se te agradece enormemente la ayuda.

    ResponderEliminar
  88. Sobre páginas web no sé mucho y menos si se trata de PHP, yo sólo he probado todo lo del blog en Blogger.
    Sin embargo, cuando se tratan de estilos como los del segundo código entonces puedes ponerlos antes de </head> de esta forma:

    <style type="text/css">
    ...aquí van los estilos...
    </style>

    Saludos.

    ResponderEliminar
  89. Hola Potro,soy medio aficionado en esto como subo el archivo a un Script de alojamiento, Porfavor te agradeceria que me respondieras. :D

    ResponderEliminar
  90. Pues depende dónde lo subas, si lo haces con Dropbox sigue este tutorial:
    http://ciudadblogger.com/2010/04/como-usar-dropbox.html

    ResponderEliminar
  91. potro y si quiero poner varios en una entrada? es decir por ejemplo imganes de 125 X 125 pero por ejemplo quiero colocar 3 filas y tres columnas?
    no se si me explico aqui una imagen pequeñita de lo que pregunto : http://dl.dropbox.com/u/11548740/Dibujo.JPG

    ya intente pero solo me salen apeliandolas en forma vertical

    ResponderEliminar
  92. Quizá si los pones dentro de una tabla tengas el resultado que quieres.

    ResponderEliminar
  93. disculpa mi ignoracia donde puedo alojar el archivo que hay que descargar? ya lo descargue pero quede frenado ai. me podrias ayudar...

    ResponderEliminar
  94. Pues hay varios sitios donde puedes alojarlos, como Dropbox, Google Sites, Fileden, etc.

    ResponderEliminar
  95. Hola el Potro
    Me interesa mucho el gadget de imagenes cambiantes que tiene esta chica en su blog http://www.picturesquemakeup.blogspot.com/, podré conseguirlo yo o algo similar con esto que propones en este post?
    El archivo .js que tenemos que descargarnos, ¿a qué página de alojamiento podemos subirla?
    Gracias de antemano

    ResponderEliminar
  96. Hola Make-up by Maryland,

    Con el de esta entrada no, ese slider es muy específico. Estos días buscaré uno similar para publicarlo pues ya muchos han pedido un slider de ese estilo.

    Los archivos puedes alojarlos en Google Sites, Dropbox o Fileden.

    Saludos.

    ResponderEliminar
  97. Muchas gracias Potro, esperaré ansiosa tu nueva entrada entonces :D

    ResponderEliminar
  98. Hola que tal. ya intente de todas formas y no me anda, te dejo la simagenes de como puse los codigos, aver si esta bien, es una pagina web, no un blogger , no se si funciona igual.

    aca te dejo las imagenes con el html completo de como lo puse.

    y el archivo esta alojado en Dropbox

    imagen 1:
    http://img33.imageshack.us/img33/5272/scrip1.png

    imagen 2:
    http://img408.imageshack.us/img408/7880/scrip2.jpg

    te puse los link asi los chequeas.

    bueno espero me des una mano, desde ya gracias!!

    ResponderEliminar
  99. En páginas Web no sabría cómo orientarte pues mi experiencia ahí es limitada además que mayormente sólo pruebo los trucos para que funcionen en Blogger.
    Te dejo el sitio del desarrollador para que puedas descargar el archivo que contiene el ejemplo en un sitio Web:
    http://medienfreunde.com/lab/innerfade/

    ResponderEliminar
  100. joya potro, gracias por responder!! ya que esto lo necesito lo antes posible y no lo consigo por ningun lado!- un abrazo y felices fiestas!!

    ResponderEliminar
  101. Hola potro me gustaría hacer un slide de imágenes con enlace a otras webs para poner unos anuncios, este me valdría tengo nueva plantilla bloguer y imagenes en picasa.
    sludosss
    graciassss

    ResponderEliminar
  102. Con este método te vendría muy bien, también puedes probar con s3Slider, o con Orbit.

    ¡Saludos MªJosé!

    ResponderEliminar
  103. donde puedo alojar el archivo que descargamos?

    ResponderEliminar
  104. hola ojala esto funcionara para google sites...
    necesito poner un banner cambiante,ya lei todo lo que dices y lo hice... pero me dice q va a eliminar el contenido html :( si sabes de algo me avisas

    ResponderEliminar
  105. Ahí sí te la debo, nunca he hecho una página en Google Sites que pueda contener scripts y otros elementos como el de un blog o una página Web común.

    ResponderEliminar
  106. Potro aca como se cambia el tamaño del anuncio de imagenes para adaptarlo al tamaño que quiero???

    ResponderEliminar
  107. En esta parte:
    #news-div {

    Debajo está la altura del contenedor, también puedes agregar un ancho definido:
    width: 500px;

    ResponderEliminar
  108. Ola potro quisiera saber por que no me sale las imágenes si no un cuadro de faya en el lugar donde puse en gadget !!nesecito esta utilidad!! mira mi blog aqui http://www.todosobreelmanesgerman.co.cc/

    GRACIAS!!!

    ResponderEliminar
  109. No veo que lo tengas puesto en tu blog, pero de entrada he visto que al agregar el diseño has eliminado la llave de cierre de otros estilos y ese podría ser el problema. Lo tienes así:

    #menulineup a:hover{
    background-color: #2E9AFE; /*Color de las pestañas al pasar el cursor*/
    padding-top: 10px;
    padding-bottom: 0;
    border-bottom-color: #2E9AFE; /*Color del borde inferior al pasar el cursor*/
    color: white;
    #news-div {
    height:50px; /* Altura del contenedor de los anuncios de texto */
    background:#FFFEB8; /* Color de fondo de los anuncios de texto */
    border:1px solid #ccc;
    }

    Y debe ser así:
    #menulineup a:hover{
    background-color: #2E9AFE; /*Color de las pestañas al pasar el cursor*/
    padding-top: 10px;
    padding-bottom: 0;
    border-bottom-color: #2E9AFE; /*Color del borde inferior al pasar el cursor*/
    color: white;
    }
    #news-div {
    height:50px; /* Altura del contenedor de los anuncios de texto */
    background:#FFFEB8; /* Color de fondo de los anuncios de texto */
    border:1px solid #ccc;
    }

    ResponderEliminar
  110. Hola de nuevo Potro tenias razón con lo de la llave, pero sigue igual me aparece un recuadro de imagen de error y no me funciona ayúdame :!!es de mucha importancia tener esto en mi web!!.

    chequeala de nuevo esta vez deje el gadget mas visible!!
    http://www.todosobreelmanesgerman.co.cc/
    GRACIAS!!

    ResponderEliminar
  111. Hola Mauricio,

    El problema en sí no es con el gadget sino con las imágenes, y es que desde hace mucho Blogger está teniendo problema con ellas. Si te fijas, al abrir en el navegador una de las imágenes que has puesto verás que dice que la URL no existe.
    Te recomiendo que las subas a otro hosting o bien que vayas a Picasaweb, des click en la foto y con el botón derecho del mouse des click nuevamente sobre ella y selecciones una opción parecida a 'Obtener URL de la imagen'

    ResponderEliminar
  112. HOLA Potro era ese problemita gracias Ahora por q no puedo poner esto arriba denajo de la cabezera de mi blog lo pongo y no aparacese nada !!!!

    ResponderEliminar
  113. Ha de ser por la plantilla que usas, quizá necesites seguir los pasos de esta entrada:
    http://ciudadblogger.com/2011/03/como-usar-cualquier-menu-en-las.html

    ResponderEliminar
  114. Ola Potro hizo todo lo que dice en tu publicación pero sigue igual no puedo poner el Gadget debajo de la cabezera del blog QUE HAGO AYUDAME POR FA!!!

    ResponderEliminar
  115. Necesitaría que lo pongas debajo de la cabecera para poder entrar a tu blog y echarle una mirada a los códigos.

    ResponderEliminar
  116. Olaaaa Listho Potro ya lo puse hecale un vistaso a ver que es lo que pasa http://www.todosobreelmanesgerman.co.cc/

    TE LO AGRADESCO MUHISIMAS GRACIAS !!!
    QUISIERA SER ALIADO TUYO ALGUN DIA ERES GENIAL

    ResponderEliminar
  117. Busca esta línea y elimina lo que está en negrita:

    <div class='tabs' id='crosscol-overflow'>

    ResponderEliminar
  118. Gracias Potro pero puede funcionar en otra plantilla por que en la mia no me aparse esa seccion Pero AYUDAME ES ESCENCIAL PARA MI GRACIAS !!!!!

    ResponderEliminar
  119. Entonces busca todos los class='tabs' que encuentres y elimínalos.

    ResponderEliminar
  120. Hola, disculpa la molestia, una duda ¿el hecho de tener infolinks en el blog puede afectar a que este script no funcione? lo pregunto porque en uno de mis blogs no funciona (que tiene infolinks) y hace tiempo lo implementé en otro de mis blogs (que no tenía infolinks) y sí funcionó. Saludos.

    ResponderEliminar
  121. No sabría decirte pues nunca he usado infolinks pero sí podría caber en la posibilidad que eso suceda pues también quienes usan Scriptculous (otro script) y tienen la barra Wibiya les deja de funcionar algo.

    ResponderEliminar
  122. Hola, buenas tardes.
    Me encantó este gadget, hice todo según las instrucciones. El problema es que sólo aparecen dos de los tres banners que agregué, y no lo hacen de la forma correcta.
    Mi blog es http://cristianitaeninternet.blogspot.com
    y aquí pueden ver de lo que hablo:
    https://docs.google.com/leaf?id=0Byf2LlEsZPlEZTdlODE4YzktOGZmMy00NmQ4LTg3NzUtZWMzOGE5YTc5YWQ0&hl=en&authkey=CNWiq58M

    No sé si sea problema de la plantilla. Espero que puedan ayudarme.

    ResponderEliminar
  123. Hola Cristianita,

    Una de las URLs de las imágenes no funciona, que es esta:
    http://es.beruby.com/images/banner/banner-beruby-468x60-es-es.gif

    Otro de los problemas podría ser el script de Conduit que tienes que parece que es el que se encima al rotador y lo oculta. Prueba quitándolo un momento para asegurarte si es un problema.

    Y otro es que quizá necesites primero aplicar estos pasos:
    http://ciudadblogger.com/2011/03/como-usar-cualquier-menu-en-las.html

    Saludos.

    ResponderEliminar
  124. Gracias, Potro, por contestar.

    La primera observación: Ese banner está puesto en mi blog y siempre ha funcionado perfectamente. No sé por qué en este gadget no aparece...

    Segunda observación: ya quité el banner de Conduit, y siguió el problema.

    Tercera observación: Después de probar lo anterior, seguí los pasos que muestran en el enlace que me diste... Pero sigue el problema =(

    No sé si algo hice mal, pero todo es tan sencillo de hacer que sinceramente no creo haberme equivocado.

    Ojalá que haya algo más que se pueda hacer...

    ResponderEliminar
  125. Ah, olvidaba preguntarte eso de "expandir la plantilla de artilugios"...

    En la primera modificación que hice, de seguro que no activé esa casilla porque aquí en tu tutorial no lo mencionas.

    Me llamó la atención que ahora en el siguiente enlace que me diste, ahi sí dice "SIN expandir la plantilla de artilugios".

    No sé si en la primera modificación debí haber activado esa casilla...

    ResponderEliminar
  126. Hola de nuevo Cristianita,

    Si te fijas con la mofificación que hiciste del enlace que te mencioné ahora ya se ve pero encima de la primera entrada.
    Una de las imágenes sigue sin verse porque como te comenté antes esa imagen no funciona, necesitas cambiarla.

    Ahora, los pasos de la entrada que te mencionaba aunque los has seguido uno de ellos no lo has hecho correctamente.
    Debes eliminar todo lo que hay debajo de:

    /* Tabs
    ----------------------------------------------- */

    Hasta antes de:

    /* Headings
    ----------------------------------------------- */

    En su lugar de todo eso que has eliminado debes poner esto:

    ul {z-index: 200; padding:0 !important;}
    li:hover {position:relative;}
    #crosscol ul li {padding:0 !important;}

    Prueba de nuevo con ello y mira si tienes mejores resultados.

    ResponderEliminar
  127. No funciona en IE 9 o lo hago mal?

    www.palabra-devida.blogspot.com

    ResponderEliminar
  128. No sabría decirte pues no tengo ese navegador, pero al menos en IE8 sí funciona.

    ResponderEliminar
  129. Vaya, no he podido enviarte el comentario tan largo que te había redactado... A ver si éste...

    ResponderEliminar
  130. Ok, parece que ahora sí.

    Te decía que los banners aparecen ahora sobre la entrada porque los moví a lo último de todo lo que tengo en la cabecera del blog.

    Respecto a la imagen que no se ve, fácil: la quito y ya. Sin embargo, eso no hace desaparecer mi incomodidad de por qué no se ve ahí, si en otra página del blog se ve perfectamente.

    Ya hice la modificación que me indicas, y lamento decirte que no ha habido cambios =(
    Incluso los banners ahí donde están, no se deslizan hacia un lado, sino que sólo aparecen y desaparecen..

    Por otro lado, si te vas mero abajo del blog, verás la imagen del globo terráqueo del contador que tengo, y notarás un área blanca que ha aparecido a su alrededor. Esto no estaba antes, y me temo que mi plantilla se está desconfigurando.

    Seguiré intentando hacer aparecer esos banners deslizantes, espero no dar al traste con mi blog.

    Espero tu siguiente sugerencia, si es que hay alguna... ¡Gracias, Potro! ☺

    ResponderEliminar
  131. Quizá es tu navegador porque no veo nada blanco en el gadget de contador que tienes ahí.
    El banner está funcionando, lo que parece que falla es algo de la plantilla que pudiste haber modificado y alterar un estilo que no permite que el gadget se mantenga en su posición pero desconozco qué cambios pudiste haber hecho que lo ocasionaron.

    Una posible solución sería que debajo de esta línea:
    #portfolio li {list-style-type:none;}

    Agregues esto:

    #portfolio {height:80px !important;}

    ResponderEliminar
  132. ¡Gracias, Potro! ☺
    Sí, definitivamente es el Firefox (aunque antes no se veía así), pero en el Opera se ve bien...

    Y ya quedó bien el gadget, gracias a Dios...

    Bueno, dirás que qué latosa soy, pero si te fijas en este blog, los banners se deslizan hacia la izquierda... http://anselmo7gananciasweb.blogspot.com/

    Así era como yo creía que quedaría mi gadget...

    ResponderEliminar
  133. Pues no sé porqué creíste que así quedaría si en ninguno de los ejemplos de la entrada se ve de esa forma o.O
    Qué bueno que ya está resuelto!

    ResponderEliminar
  134. Lo que pasa es que el dueño de ese blog me dijo que aquí había encontrado el tutorial para poner sus banners de ese modo... Por eso pensé que era este tutorial..

    ¿Cuál tutorial sería?

    ResponderEliminar
  135. Ah, ya pude ponerlo :D
    Lo chistoso es que no necesité tanta cosa, es sólo un code, se agrega el html de los banners, y ¡ya está! jajaja
    ¡Gracias de todos modos! ¡hasta la próxima!

    ResponderEliminar
  136. Hola Potro, como puedo hacer banner cambiantes pero de 125x125 como los que tu tienes pero al estilo de Btemplates. Osea que cada vez que entras a otro post los anuncios cambian cosa que te da la posibilidad de poner más de 6...

    Saludos :D

    ResponderEliminar
  137. Probablemente basándote en el código de esta entrada.

    ResponderEliminar
  138. como puedo poner los banners en la cabeza de mi blog

    ResponderEliminar
  139. Sigue los pasos de esta entrada sólo que en lugar de agregar el script que ahí se menciona colocarías el código de los anuncios rotativos.

    ResponderEliminar
  140. Potro lo estoy usando en mi blog

    juegosmanager.blogspot.com

    pero tengo un problema e echo todo bien pero cuando sale en la web se visiualiza el menu cuando esta cargando el blog pero luego se queda un cudrado amarrilo , y no se aprecia nada

    que puede ocurrir

    Espero alguna contestacion la agradeceria saludos!!

    ResponderEliminar
  141. Hola ViperX, no lo vi puesto en tu blog, pero lo que puede estar pasando es que tienes muchas versiones de jQuery en tu blog, y alguna debe estar haciendo conflicto con las demás.

    ResponderEliminar
  142. hola Potro, me gustaría poner una caja de anuncios como el tuyo que está debajo de "Contacto"... como puedo hacer una así?
    muchas gracias =)

    ResponderEliminar
  143. Hola CristJian,

    En esta entrada está la explicación:
    http://ciudadblogger.com/2009/10/scroll-de-bienvenida-sin-script.html

    ResponderEliminar
  144. Hola que tal, empece a hacer un blog y me resulto muy util tu pagina.
    te queria hacer una consulta sobre esto, hice los anuncios rotativos con imagenes y el problema que tengo es que este gadget queda ensimado a los demas, como si estuviese al frente de todo, probe correrlo a varios lados y en todas partes queda ensimado.
    agradezco tu ayuda, saludos

    ResponderEliminar
  145. Hola,

    No lo he podido ver funcionando porque los archivos los subiste a Dropbox fuera de la carpeta Public, eso hace que sólo tú puedas verlos. Deben estar dentro de Public para que se ejecute el script para todos. Saludos.

    ResponderEliminar
  146. Muy buenas potro,
    una vez mas, como siempre agradeciendote el trabajo que haces ayudadandonos a mejorar nuestros blogs. Antes de escribirte he probado varias cosas sin conseguir una solucion. El caso es que como veras en mi blog, estoy intentando poner banners entre las entradas. Para eso he puesto un banner en cada entrada y el resultado para mi sorpresa, es que sale totalmente desaliniado. Mi intencion era alinear con el cuadro escrito y que no pisara la siguiente entrada. Sabes por que me ocurre esto??
    Muchisimas gracias de antemano, y no creas que el blog esta mal escrito, tan solo es la lengua de mi pais. UN saludo
    http://nomhopreguntispas.blogspot.com/

    ResponderEliminar
  147. Hola Ramón,

    ¿Ya has probado poner el banner debajo de...?
    <b:include data='post' name='post'/>

    ResponderEliminar
  148. Hola potro, gracias por todos tus consejos, siempre son de ayuda, recurro siempre a tu web/blog para "enchular" mi blog...
    tengo el siguiente problema, he puesto el anuncio rotativo con imágenes en mi blog, pero al hacerlo el efecto deslizante de los botones de "ir arriba y abajo" se pierde...
    he tratado de editar mi plantilla, y lo único que he logrado es que dependiendo del código que ponga justo antes de /head es el que funciona... al parecer son incompatibles, pero veo que en tu blog si funciona... ojala puedas ayudarme para solucionar el problema.... gracias!

    ResponderEliminar
  149. potro este es el blog, aquí puedes ver que las imágenes están estáticas y en lista en vez de rotando

    http://jovenesasambleavictoria3048descargas.blogspot.com/2011/09/pack-salvapantallas.html

    ResponderEliminar
  150. Hola Potro majo!!!

    A mí me salen todas las imágenes una encima de la otra, pero ni pasan ni nada. Salen todas juntas.

    he puesto lo del conflicto jquery por si acaso, y tampoco...

    ya me dirás

    un abrazo

    ResponderEliminar
  151. Pueden ser varias cosas Gorka, pero ya sabes que sin ver el código puesto en un blog me es imposible acertar al problema. Si bien puede ser incompatibilidad con Scriptaculous, también puede ser incompatibilidad con otras versiones de jQuery, o algún error hay en los estilos.

    Un abrazo.

    ResponderEliminar
  152. Gracias Potro,

    Déjame un correo donde poder mandarte unas claves de entrada (una cuenta de gmail que creé standar pa estas cosas).
    Como no queda bien en el blog, no puedo dejar el error fijo, así que lo he quitado. Aún así, cuando te mande las claves, lo volveré a poner cuando me digas, y así lo ves.

    Me hace ilusión que entres, porque todo lo que he conseguido es gracias a tu web.

    Un abrazo majo!!!

    ResponderEliminar
  153. Hola Gorka,

    Por aquí no puedo dejarte una dirección, contáctame por el formulario de contacto para que te envié una dirección de correo.

    Saludos!

    ResponderEliminar
  154. Hola Potro muy buenas por estos lares. Los anuncios rotativos dejaron de funcionar en mi blog hace días, he probado cambiando la url del archivo jquery innerfade pero ni así. ¿Se te ocurre dónde puede estar el problema?

    Un saludo!

    ResponderEliminar
  155. Hola Joker,

    ¿En cuál blog? ¿has hecho cambios últimamente? ¿añadiste otro elemento que requiera Scriptaculous o jQuery?

    ResponderEliminar
  156. Potro parece que ya va bien, es que ayer no sé porqué no me funcionaba este script, el archivo jquery innerfade.js que tenía alojado en dropbox debía tener problemas, no había manera de acceder a él, hoy sin embargo está accesible.

    Como siempre muchas gracias por responder tan rápido. De nuevo, un saludo.

    ResponderEliminar
  157. Hola Joker,

    Supongo que estás en España, pues ahí todo el fin de semana hubo problemas con Telefónica que no podía acceder a algunas DNS, entre ellas las de Dropbox, es por ello que muchas cosas que estaban alojadas en ese hosting no funcionaban.
    Pero qué gusto que ya está todo en orden otra vez.

    Saludos.

    ResponderEliminar
  158. Pues sí Potro, tuvo que ser eso que dices, no cabe otra explicación, de la noche a la mañana los archivos que tenía en dropbox no dejan de estar accesibles así sin más. Gracias una vez más. Te ha quedado brutal el nuevo diseño del blog ;)

    ResponderEliminar
  159. Saludos trato de hacer colocando el htlm, pero no me sale, no entiendo lo del url del archivo query, me encantaria pero sin eso entiendo q no me sale.

    ResponderEliminar
    Respuestas
    1. Hola Wilfred Matías, el archivo que hay que descargar se tiene que descomprimir, luego, ese archivo descomprimido se tiene que subir a un hosting, y así obtener su URL, esa URL es la que necesitas poner en el código.
      Aquí hay dos tutoriales que muestran cómo subir archivos a un hosting y cómo obtener su URL:
      http://ciudadblogger.com/2011/01/como-subir-archivos-en-google-sites.html
      http://ciudadblogger.com/2010/04/como-usar-dropbox.html

      Eliminar
  160. Potro, saludos gracias por escribir, bueno amigo en verdad no logro hacerlo, no que sea un bestia en esto , pero te explico, mi pagina es www.prociclismo.com, ya tiene un slideshow la plantilla, hice lo que me dijistes, baje dropbox, subi los archivos ahi, copie el url y lo pegue, anadi el gadget htlm, y no salieron las imagenes, que le coloque el url de cada una que la stengo en el album de picasa.Inclusive cuando subi todo el slideshow de la plantilla dejo d e funcionar, tuve que borra rlos cambios y dejarlo. Ahora, el archivo que hay q bajar mi pc me da un error q no lo descopmrime asi q un amigo mio lo descomprimio, me envio todo eso por email y lo coloque en dropbox tambien pero no funciono. caramba que estare haciendo mal?? sera que el otro slide show conflige? bueno me encantaria que me ayudaras si es posible, puedes escribirme directamente a wilfredmatias@gmail.com, necsito anadir 2 slide shows mas pero no puedo. Espero tu respuesta y ayuda. Mil gracias
    Wilfred

    ResponderEliminar
    Respuestas
    1. Hola Wilfred Matías,

      ¿Quieres añadir dos slideshows más, iguales al que tienes?
      Lo que sucede con cualquier slider, es que tienen un ID, ese ID es el que hace que el script, y los estilos reconozcan al gadget. Y cualquier elemento debe tener siempre un ID distinto, no puede haber nunca dos IDs repetidos, pues al hacerlo dejan de funcionar.
      Si quieres dos slideshows más te recomiendo que uses dos scripts distintos, pero, la verdad es tampoco es muy recomendable que pongas varios en una misma página, por la cuestión de velocidad de carga del blog.

      De cualquier manera, sea cual sea el que pongas déjalo puesto en el blog para que pueda ver porqué no está funcionando, puede ser que la URL de los archivos no estén bien, o que haya un conflicto entre las versiones de jQuery.
      Si subes los archivos a Dropbox asegúrate que estén dentro de la carpeta Public, de lo contrario no funcionarán.

      Saludos.

      Eliminar
  161. Potro saludos,
    Asi es, la plantilla trajo el slide, y bueno como te dije quiero poner por lo menos 1 adicional, no igual a lo que trae la pagina, si no a como lo tienes tu aqui en este tutorial, deseo usarlo para los que se auspician en mi pagina, cuando entras los veras, lo que hice fue usar un gadget para poner como un slide show, lo que pasa es q ahi no puedo poner enlace a cada foto para que lleguen a la pag del auspiciador,por eso quiero hacer lo que explicas en el tutorial. Bueno coloque los archivos en public, los tenia en photos.Tu deseas que t e envie el htlm asi podrias ver lo que me dices? dejame saber man, pq le he escrito a los que hicieron la plantilla y no me contestan. Elimine el slide show q no funcionaba ya que el principal tampoco funcionaba, pero entra a mi pag www.prociclismo.com y vez ambos slides. Mil gracias por todo man. Honestamente no estoy familiarizado con el sript, como poner otro distinto y eso, soy un novato en esa parte.

    ResponderEliminar
    Respuestas
    1. Hola Wilfred.
      Entré ayer y hoy, pero sólo veo el slide que trae tu plantilla, no he visto algún otro.
      Ponlo en tu blog, si quieres hasta abajo para que no se vea mal mientras lo reviso, y ya puesto podré decirte qué anda mal ahí.
      Si no quieres complicarte mucho puedes usar este rotador de banners, que queda muy bien para publicidad, y lo mejor es que no hay que subir nada a ninguna parte:

      http://ciudadblogger.com/2009/04/banner-cambiante.html

      Eliminar
  162. Potro,
    Saludos, si lo acabo de anadir lo del banner, me esta funcionando mil gracias por ello,lo deje ahora para que lo revises,pero no sale como el tuyo que hay solo una imagen y cambia, en el mio salen las 4 imagenes que coloque y rotan, lo deje para que lo revises. Otra cosa es posible hacer otro baner con ese mismo htlm? dejame saber, pq quisiera hacer otro de las entradas populares, pues revisalo y espero tus sugerencias, mil gracias por toda tu ayuda. Mi blog es www.prociclismo.com, lo coloque abajo.

    ResponderEliminar
    Respuestas
    1. Hola Wilfred,
      Revisa el código de los estilos, lo has puesto en el lugar incorrecto. Cambiándolo al lugar que se indica en la entrada funcionará como debe ser.
      Lo otro que preguntas no recuerdo, revisa los comentarios de esa entrada, me parece que ahí estaban las indicaciones para agregar otro rotador de banners en la misma página.

      Saludos.

      Eliminar
  163. Potro
    Saludos se que jorobo mucho con esto, pero ya esta quedando y te agradezco esa ayuda, pero no entiendo a lo que te refieres al decir codigo de los estilos, por ejemplo cuando dices pega esto aqui antes de head, pues voy a ahi y lo pego antes, me refiero antes colocandolo abajo de la palabra,como si la miraras de abajo hacia arriba asi seria cierto? dejame saber man!
    Mil gracias, por cierto vi el comentario #60 como anadir otro slide lo que tengo es q buscar la palabra rotador y nombrarla por otro, creo q lo entendi.
    Saludos
    Will

    ResponderEliminar
  164. Potro entiendo que ya logre arreglarlo, estube toda la bendita tarde jejejje era a loque t epreg, antes era como decir arriba de la palabra no debajo..chequealo man!

    ResponderEliminar
  165. Potro, bueno como dice el dicho entre mas tengo mas quiero, trate colocar oto segun el post pero no me funciono, hay alguna otra manera de colocar otro banner ademas de la explicacion del post 60 de banners?
    Gracias man, esos tips me han ayudado un monton, me alegro en saber que hay gente dedicada y dada en ayudar..saludos desde Puerto Rico.

    ResponderEliminar
    Respuestas
    1. Esa la única manera Wilfred. Si no te queda bien deja el comentario en esa entrada (para que pueda yo ver el código base) y en él deja la dirección del blog donde lo has puesto.

      Saludos :)

      Eliminar
  166. Potro,
    Saludos, pues mira logre arreglar lo del banner como te habia dicho ayer, pero intente anadir otro,pero no me salio, te explicare lo que hice:
    Andi el codigo htlm del baner y donde decia rotator, le escribe rotator2, luego tome el htlm del gadget y lo anadi, con otras imagenes, y urls pero entonces el primer baner dejo funcionar, el segundo funcionaba pero con el problema que te decia, salia como de cuadros todo, no se que hice mal, pregunto ahora, tendre que anadir otro htlm adicional en la parte de bskin y nombrarlo cmo rotator 2 tambien? bueno dejame saber tus sugerencias pq estoy muy contento con el primer banner me ahoro espacio y pude enlazar a los auspicadores, pero quiero crear otro baner de actividades y asi ahorarme espacio..
    Saludos,
    Wilfred
    www.prociclismo.com

    ResponderEliminar
    Respuestas
    1. Jaja, yo me refería a que dejaras el comentario en la otra entrada, en la del rotador que has puesto, pero bueno, mientras aquí para no dar más vueltas.
      Sí, se tienen que duplicar todos los códigos, incluyendo los que van en SKIN, y ahí también hay que poner #rotator2, de lo contrario el segundo banner no reconocerá los estilos.

      Saludos.

      Eliminar
  167. Potro!
    Mala mia saludos, pues man, hice eso duplique ambos codigos le asigne rotador2, pero es esegundo que intete anadir no me corrio, que quedo ahi como imagen, inclusive tome el gadget de htlm le asigne rotador2 pero nada, que podra ser? dejame saber si lo dejo para que lo revises, ok.
    Saludos
    Will

    ResponderEliminar
  168. Lo deje en la parte de abajo del blog, no esta corriendo, como te indique, asigne duplicando los codigos y nada, a ese gadget htlm le asigne rotador 2 y entonces las imagenes me salian hacia abajo, pues no se que podra ser, por fa cotejamelo y dejame saber ok, saludos
    Wilfred
    www.prociclismo.com

    ResponderEliminar
    Respuestas
    1. Va de nuevo, los códigos los tienes que repetir, porque uno, el que ya tienes, es para el banner que ya funciona, así que debes pegar de nuevo otros códigos para que funcione el otro banner (como si hicieras de nuevo el truco), a esos códigos tienes cambiarle todas las palabras que digan rotator todas.
      Así que si en los otros códigos que has puesto dice #rotator tendrás que poner otro que diga #rotator2
      Eso se haría a todas las palabras rotator que pongas en los códigos repetidos, en las tres partes del código que añadiste nuevamente, tanto las que van antes de SKIN, como las que van antes de /HEAD y las que van en el HTML/Javascript.

      Saludos.

      Eliminar
    2. Potro:
      Diras este tipo es medio bruto o que? jejeje, mira man, hice lo que me dijistes, tome el codigo, lo duplique y le asigne, rotator2 en toods los lugares, o sea en bskin que hay 2, uno dice rotator, el otro rotator img, en head el rotator que esta en parentesis , fui al gadget y lo hice tambien,pero me paso lo siguiente, dejo de funcionar el primero de arriba y el de abajo empezo a funcionar, pues no se que error sera. Ahora mismo pues el gadget no tiene numero en el rotator para que se quede estatico como imagen, para ver si me lo puedes verificar y me dejas saber ok man. Espero tus instrucciones a ver en donde estoy fallando.
      Saludos
      Will

      Eliminar
    3. No Wilfred, no podría decir ni pensar eso de nadie, créeme ;)
      Te di de nuevo las indicaciones pues anoche cuando entré no encontré esos códigos, por eso te lo decía, porque no encontré los duplicados.

      Veo que el segundo no tiene rotator2, ese deberás ponérselo.
      Igual veo que en los estilos hay un error. Cuando los has puesto has eliminado unos caracteres que sirven a modo de comentarios en los códigos.
      Tienes esta parte así:

      /* BANNER CAMBIANTE
      ----------------------------------------------- */
      {margin: 0; padding: 0;}
      #rotator {
      border: 0px solid #000000;
      overflow: hidden;
      margin: 0px ;
      padding:2px;
      position: relative;
      width: 260px;
      height: 260px;
      }
      #rotator img {
      border: 0;
      width: 252px;
      height: 260px;
      }
      */
      /* BANNER CAMBIANTE
      ----------------------------------------------- */
      {margin: 0; padding: 0;}
      #rotator1 {
      border: 0px solid #000000;
      overflow: hidden;
      margin: 0px ;
      padding:2px;
      position: relative;
      width: 260px;
      height: 260px;
      }
      #rotator img1 {
      border: 0;
      width: 252px;
      height: 260px;
      }
      */


      Y debe ser así:

      */
      /* BANNER CAMBIANTE
      ----------------------------------------------- */
      {margin: 0; padding: 0;}
      #rotator {
      border: 0px solid #000000;
      overflow: hidden;
      margin: 0px ;
      padding:2px;
      position: relative;
      width: 260px;
      height: 260px;
      }
      #rotator img {
      border: 0;
      width: 252px;
      height: 260px;
      }

      /* BANNER CAMBIANTE
      ----------------------------------------------- */
      {margin: 0; padding: 0;}
      #rotator1 {
      border: 0px solid #000000;
      overflow: hidden;
      margin: 0px ;
      padding:2px;
      position: relative;
      width: 260px;
      height: 260px;
      }
      #rotator img1 {
      border: 0;
      width: 252px;
      height: 260px;
      }

      Eliminar
    4. Potro:
      Gracias por la ayuda y el feedbac, bueno gracias por toda la comprension y ayuda, pues vi el error de arriba del caracter. Bueno he copiando el htlm y lo pegue en el htlm de mi blog, asigne al segundo rotador (rotator1)y en el gadget tambien, y bueno el de arriba ha dejado de funcionar y el de abajo ahora funciona, que carajos sera?no encuentro el error, man mira ver con la luz de tus ojos a ver q estoy fallando pq lo verifico y no se q pueda ser.Vuelvo y digo para el rotador de arriba lo deje rotator nada mas, para el d eabajo rotator1 y en el gadget asi y nada..me dejas saber man, por cierto me enlace a tu fb para q me lleguen todos esos updates deseo ir mejorando en esto pq me encanta, mil gracias
      Will

      Eliminar
    5. Hola de nuevo Wilfred,

      Este de acá:

      #rotator img1 {
      border: 0;
      width: 252px;
      height: 260px;
      }


      Debe ser así, ayer no me fijé de ese error:

      #rotator1 img {
      border: 0;
      width: 252px;
      height: 260px;
      }


      Luego, el script del primero rotador está duplicado, si te fijas verás que debajo de ese script tienes uno igualito, y sólo debe haber uno, bueno, dos, el que dice rotator, y el que dice rotator1

      Eliminar
  169. Hola Potro, sigo aqui todavia, bueno manito, deben haber 2 codigos verdad? si no interprete mal deben haber 2 ya que deseo 2 baners, al igual que el otro htlm de head, el que esta como identificado rotador, para el primer baner y el rotador 1 para el segundo baner cierto?, si es asi arregle identificando el 1 que estaba despues de img, lo puse como digistes rotador1 img, y bueno todavia sigue igual, que podra ser, que estare haciendo mal?? bueno sigo con la duda mano, espero seguir contando con tu enorme pasciencia,
    Saludos
    Wilfred

    ResponderEliminar
    Respuestas
    1. Así es, debe haber 2 códigos, pero tú tienes 3 scripts, no 2. Sería más fácil señalarte qué script es pero al no haber hecho la pregunta en la entrada que correspondía se me dificulta a mí un poco. Revisa los scripts, verás que un lo tienes duplicado (el de rotator), el otro está bien (rotator1).
      Saludos.

      Eliminar
  170. Potro,
    Saludos, mano, por favor un ser que pide ayuda a gritos jejeje, tendras que identificarme cual es el script,y copiarmelo aqui, por que ahi ya me perdí, no logro ver ese duplicado que me dices, asi que bueno espero tu respuesta y como siempre agradecido por toda esa ayuda que me has dado. Mil gracias,
    Wilfred

    ResponderEliminar
  171. Potro, vi el script( o codigo) repetido, lo eliminé, aun asi, no me funciona, lo deje para que me verifiques a ver q detalle sigo dejando, vi que en la parte de head tenia ahi 3 codigos, rotator, rotato1,rotator1, asi que elimine el que tenia repetido como rotator1, pero no me funciona, bueno amigo espero tu insumo para ver si le doy jaque mate a eso.
    Saludos.
    Will

    ResponderEliminar
    Respuestas
    1. Hola Wilfred,
      Estuve haciendo varias pruebas y tampoco me anduve. Si embargo encontré una variante para que pueda funcionar con dos banners. Por favor, deja la pregunta en esa entrada (la del rotador), así el código que te dé podrá servir a alguien más.

      Nos leemos en un rato ;)

      Eliminar
  172. Potro ok, hice la pregunta en el foro de los banners ok man, perfecto estoy loco por tener eso listo, muy amable,si no es ahi me dejas el enlace en donde debo dejar esa pregunta.Gracias manito..
    Will

    ResponderEliminar
  173. Hola potro, que buen truco, lo único que no me funciona muy bien en los post. Hay algún truco para que no salga flotante en los post? un abrazo www.radiomalon.com.ar

    ResponderEliminar
  174. Gracias potro, este es el link de la entrada: http://www.radiomalon.com.ar/2012/02/las-fotos-de-las-postulantes-reina-del.html y fijate que está flotante también dentro de la lista de post que se despliegan. Un abrazo

    ResponderEliminar
  175. Hola Enrique. Prueba poniendo estos estilos:
    #portfolio ul {height:310px;}

    ResponderEliminar

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