S3Slider: Mostrar contenido destacado

10 de mayo de 2010 400 comentarios ,
s3slider
S3Slider es una galería de imágenes para mostrar contenido destacado del blog. Quedan perfectos para los blogs tipo revista y sólo requiere de JQuery y S3Slider.
Puedes ver un ejemplo en este blog de pruebas.

Para ponerlo en tu blog sigue estos pasos:
  1. Descarga este archivo, descomprímelo y el archivo S3Slider.js súbelo a un hosting.
  2. Entra en Diseño > Edición de HTML y pega antes de </head> lo siguiente:
  3. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/> <script src='URL del archivo s3Slider.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#slider&#39;).s3Slider({ timeOut: 3000 }); }); </script>
  4. Cambia lo que está en color verde por la URL del archivo que descargaste y subiste previamente.
  5. Ahora antes de ]]></b:skin> pega lo siguiente:
  6. /* S3Slider ----------------------------------------------- */ #slider { width: 550px; /* Ancho del gadget */ height: 300px; /* Alto del gadget */ background:#FFF; position: relative; overflow: hidden; margin-bottom:10px; border:1px solid #d7d0c0; } #sliderContent { width: 550px; /* Ancho del gadget */ position: absolute; top: 0; margin: 0; padding:0; } #sliderContent li{ list-style-type:none; } .sliderImage { float: left; position: relative; display: none; } .sliderImage span { position: absolute; font: 11px Arial, Helvetica; /* Tamaño y tipo de letra */ padding: 10px 13px; width: 550px; /* Ancho del gadget */ background-color: #000; /* Color de fondo del texto */ filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; /* Color del texto */ display: none; } .clear {clear: both;} .bottom { bottom: 0; left: 0; } .top { top: 0; left: 0; }
  7. Por último en un elemento HTML/Javascript pega esto:
  8. <div id="slider"> <ul id="sliderContent"> <li class="sliderImage"> <a href="URL de la entrada"> <img src="URL de la imagen" /></a> <span class="bottom">Aquí va la descripción de la entrada.</span> </li> <li class="sliderImage"> <a href="URL de la entrada"> <img src="URL de la imagen" /></a> <span class="bottom">Aquí va la descripción de la entrada.</span> </li> <li class="sliderImage"> <a href="URL de la entrada"> <img src="URL de la imagen" /></a> <span class="bottom">Aquí va la descripción de la entrada.</span> </li> <div class="clear sliderImage"></div> </ul> </div>
  9. Ya sólo cambia la URL de la entrada y de la imagen que será la que se muestre en el slide.

Si quisieras agregar más imágenes añade este código por cada imagen que quieras poner:
<li class="sliderImage">
<a href="URL de la entrada">
<img src="URL de la imagen" /></a>
<span class="bottom">Aquí va la descripción de la entrada.</span>
</li>

Las imágenes cambian cada tres segundos, si quieres modificar el tiempo entre cada una busca en el primer código donde dice timeOut: 3000 y cambia ese número por otro, por ejemplo en cinco segundos sería timeOut: 5000

En el código que pegamos antes de ]]></b:skin> están las indicaciones de dónde se debe modificar el color del texto, el color de fondo, etc.
Si te das cuenta en el caso del tamaño aparece tres veces, por lo que si cambias el tamaño deberás poner el mismo tamaño en los tres lugares donde se pide.

La descripción de la entrada se muestra en la parte de abajo; si deseas que se muestre en la parte de arriba cambia en el último código donde dice class="bottom" por class="top"


Por último toma en cuenta que este gadget trabaja con JQuery así que si ya tienes Scriptaculous no funcionará.


400 comentarios en:

" S3Slider: Mostrar contenido destacado "

  1. Primer coments :)

    Buenísimo Potro..!!!

    Voy a ver si lo pongo en mi blog para las noticias de Fútbol. jajaja


    Abrazo compañero!!!

    ResponderEliminar
  2. Es justo lo que necesitaba, pero es una pena que no funcione con Scriptaculous... -.-'

    ResponderEliminar
  3. Como hace para saber que es el contenido destacado de nuestro blog??? Los mide por comentarios, visitas, etc.??


    Saludos!!!

    ResponderEliminar
  4. El contenido tú lo agregas, es por eso que debes poner la URL de la entrada y la de la imagen que quieres que la describa.

    ResponderEliminar
  5. Excelente bro... vere si mañana lo agrego ahora no tengo tiempo.

    Saludos y gracias :D

    ResponderEliminar
  6. Hola potro
    Le atinaste... es justo lo que andaba buscando. Es más, me estaba rompiendo el coco tratando de descifrar estos códigos. Te dejo el link para que veas algunos ejemplos de estos sliders que estaba probando:

    http://www.webdeveloperjuice.com/2010/04/22/14-most-sexy-galleries-and-slideshows-usign-javascript-and-css/

    Espero que coloques algunos que están buenísimos.
    Por ahora voy a seguir tu spot.
    Gracias Potro.

    ResponderEliminar
  7. Potro: lo acabo de aplicar a mi blog de pruebas y te comento lo siguiente:

    1. Hay que tener en cuenta que las imagenes deben de tener las mismas dimensiones, cosa que se puedan ver completas y no cortadas.
    2. El texto me queda muy pegado al lado derecho(está justificado) cuando trato de reducir las dimensiones.

    No es más... y que pena con tanta insistencia con este spot.
    Bye.

    ResponderEliminar
  8. Claro, como en toda galería dentro de un mismo contenedor las imágenes deben tener el mismo tamaño.
    Respecto al texto sí olvidé mencionar que en el caso de los párrafos largos deben usarse salto de líneas <br /> entre renglón y renglón para que no se corte.

    Saludos.

    ResponderEliminar
  9. Está fantástico Bro!!! Por suerte lo publicaste luego que terminé la plantilla nueva. De haberlo hecho antes, seguro hubiese agregado este truco al blog y hubiese dejado lo demás como estaba (de modo iba a cargas mas lento aún XD )

    Cuando decidí cambiar la plantilla me decidí por la que tengo, ya que andaba buscando el Slider, esto le da un toque mas Pro al blog ¿no?

    Incluso vi una con un Slider similar al de este post, y me gustó muchísimo, pero tenía el problema que las imágenes que generalmente utilizo en mi blog no tenían esas proporciones, por ello opté por la que estreno hoy.

    Ya me imagino, ahora andarán todos los blogs con slider!! jajajajajaja...como siempre que publicas un truco!!

    Eres lo mas Bro!! Gracias por todo!!

    Un abrazo!!!

    ResponderEliminar
  10. El que tú tienes está perfecto para tu plantilla, éste pienso que se adecua mejor en blogs de deportes, noticias o galerías.
    Pero el próximo mes que cambies de plantilla podrás considerar este slider, jaja.

    ¡Un abrazo!

    ResponderEliminar
  11. ¡Está muy bien! Solo que yo ya tengo Scriptaculous entonces no me sirve :(

    ¿Hay algo parecido compatible con ésto? Saludos ^^

    ResponderEliminar
  12. ¿Combinable con los docks?
    Díme que si...

    ResponderEliminar
  13. Julio, para Scriptaculous no hay muchas opciones, ya andan muy escasas.

    Drawer 4 Everyone, debe ser, ambos usan JQuery, sólo trata de no repetir el archivo jquery.js

    ResponderEliminar
  14. Ya habia visto este efecto en plantillas, lo malo que no sabia como hacerlo :P.

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

    ResponderEliminar
  16. Aún tengo que practicar el código de los enlaces :P .El link del Directorio es http://www.directorioblogger.com

    Todos estan invitados.

    ResponderEliminar
  17. HOLA ESTA GENIAL TU POST.. UNA PREGUNTA COMO PUEDO PONERLE "FLECHAS" A LA IZQUIERDA Y A LA DERECHA PARA QUE LOS USUSARIOS DECIDAD CAMBIAR LA IMAGEN POR ELLOS MISMO Y COMO LE PUEDO PONER LINK A LAS IMAGENES?

    ResponderEliminar
  18. PD: ENCONTRE ESTO OJALA SIRVA Y ME DES MI RECOMPENSA JAJAJAJ http://banakabanaka.blogspot.com/2009/10/utiliza-jquery-scriptaculous.html ES PARA UTILIZAR JQUERY Y SCRIPTACULOUS A LA VEZ EN UN MISMO BLOG SERVIRA?

    ResponderEliminar
  19. PepeX, ahí está por si un día te animas a ponerlo :)

    JORGE, aún no he revisado los correos de soporte, luego le echo una mirada ;)

    zona lerh, gracias a ti por tu visita.

    nEjO, a este no se le pueden agregar las flechas. En el código donde van las imágenes ya está marcado dónde debe ponerse el enlace. Respecto al hack para resolver el conflicto entre esas dos librerías no lo he probado pero ya hace tiempo había leído que no funcionaba en todos los casos.

    ResponderEliminar
  20. Hola, oye men, sabes que me aparece tambien cuando abro una entrada, puse los codigos esos de "Condicionales en Bloger" pero nose de donde hasta donde ponerlo y no me resulta :(

    Bueno espero que me respondas Saludos

    ResponderEliminar
  21. ¿repetirlo donde?
    sólo aparece l archico jquery.js una vez en toda la plantilla pero no no anda ni aún así.

    Me echas un vistazo porfi?
    Blog que no anda

    ResponderEliminar
  22. MCarlitooH2, las condicionales deben encerrar el código que se explica en el paso #5.

    Drawer 4 Everyone, repetirlo en la plantilla tal como lo has hecho, revisa tu plantilla y verás que lo has puesto dos veces.

    ResponderEliminar
  23. Corregido y arreglado y funciona perfectamente.

    Por cierto, no se si sabrás responderme, ¿pero para hacer banners es mejor photoshop, fireworks o illustrator?

    ResponderEliminar
  24. Lo que hay que ver, ahora esto mas que un post parece un foro.

    Oye, maestro, funciona de lo lindo, pero quisiera ponerlo encima de los post y a la izquierda de los gadgets, ¿que tendría que hacer un servidor?

    (siento ser tan pesao, pero temo el liarla...)

    ResponderEliminar
  25. Sup POTRO,nomas queria preguntaryte como pongo un banner en mi blog del lado debajo de donde dice,lo que pasa que si hay in gadget para ponerlo,pero pa eso necesito tener una cuenta de adsence en google y me han cancelado varias y ya no tengo,tons kiero poner una mia de el tamanio 468 x 60 creo algo asi,porfavor si me puedes ayudar,gracias de antemano
    pix donde kiero el banner
    MI BLOG DONDE KIERO EL BANNER

    ResponderEliminar
  26. Drawer 4 Everyone, sólo arrastra el gadget hasta que quede arriba de las entradas.

    Microboy90, esos espacios no son específicamente para Adsense, puedes poner cualquier banner, sólo busca el área donde estaba el anuncio y en su lugar pon el código del banner que quieres.

    ResponderEliminar
  27. es que no me deja...

    Tengo para poner arriba y al la derecha, pero no para poner como te digo.

    ¿que hago?

    ResponderEliminar
  28. es que no se puede arrastrar nomas asi,como que hay que poner el widget o el gadget,desde el editor...ya lo intente arrastrarlo pero no deja!! como le harias entonces???

    ResponderEliminar
  29. Drawer 4 Everyone, aunque no te aparezca la opción de agregar gadget puedes arrastrarlo has ahí, verás que al ponerlo encima se marca un recuadro oscuro. Si sigues sin poder de esa forma entonces sigue este método usando la opción de hacerlo directo en la plantilla.

    Microboy90, la opción de arrastrar no era para ti, en tu caso como te dije tienes que buscar en la Edición de HTML el código donde estaba el anuncio anteriormente y sustituirlo por el de tu banner.

    ResponderEliminar
  30. No me funciona potro, agrege estas etiquetas

    < b:if cond='data:blog.url == data:blog.homepageUrl' >
    ...Aquí que codigo que señalas en el paso 5
    < /b:if >

    mmm, nose que puedo hacer

    Saludos

    ResponderEliminar
  31. Creí que habías puesto el código directo en tu platilla. Pero veo que no es así, sino en un gadget.
    Cuando las condicionales se aplican a un gadget se agregan directo en los artilugios del gadget.
    Para no confundirte mejor lee esta entrada.

    Saludos.

    ResponderEliminar
  32. Gracias... ahora me funciona como yo queria ;)

    ResponderEliminar
  33. Impresionante Potro.. lo venia viendo hace rato en varias paginas y le teina una ganas terribles pero no me anime a preguntartelo.. pero hace rato que queria esto. mil gracias excelente como siempre.

    abrazo!

    ResponderEliminar
  34. POTRO - es que no hay ningun banner ahi solamente esta
    la que trae por defecto la plantilla y a eso no lo puedo cambiar,porque es la que trae la plantilla,por goole con cuenta adscense y yo no tengo mira aqui esta una pix de como esta!!
    asi esta en la plantilla

    ResponderEliminar
  35. y es que a lo que me dijistes que busque el area donde esta el banner y lo cambie! no se puede porque no hay ningun banner ahi potro,nomas esta la opcion de poner banner si es que tengo cuenta en adscense... porfavor ojala y me entiendas loqw e tedigo!!

    ResponderEliminar
  36. Por eso, sin expandir los artilugios busca ese gadget, debe empezar como b:widget id='HTML1'
    Elimina esa línea y en su lugar por el banner que quieres.

    ResponderEliminar
  37. Ok potro lo he hecho asi como me dijistes y si funciono,gracias potro,de nuevo gracias!! chido por la ayuda!!

    ResponderEliminar
  38. Hola Potro justo en estos dias estaba buscando algo parecido, vi un slide como el de Cyberbloggero, es algo parecido solo qye yo quiero que se muestre digamos un cuadro por entradas, y que diga algo de contenido y despues leer mas, sera posible hacer?. Esta es la pagina de ejemplo http://lifehacker.com digamos como unos post al hazar pero con imagen. Saludos.

    ResponderEliminar
  39. POTRO ...ajhora tengo otro problema,porque solamente me aparecen 2 entradas ,cuando tengo puesto 8 para la pagina principal y solamente me salen 2,porque es eso? porfavor cualkier respuesta hazme saber gracias de antemano!!

    ResponderEliminar
  40. Borest, ahora no tengo algo parecido, pero si no tiene efectos tú mismo podrías hacerlo, sólo son imágenes con texto.

    Microboy90, Blogger tienen un problema con eso, es un error general, sólo hay que esperar a que lo solucionen.

    ResponderEliminar
  41. Muchas gracias amigo!!! me encanto como se mira el recurso en mi blog!!!:D

    SALUDOS!!!!

    ResponderEliminar
  42. Entonces puedo añadir un gadget debajo de la cabecera pero que solo se ajuste al espacio de la entrada, no al del menu de la derecha? O si se agrega algo asi solo se puede ajustar a todo lo ancho de la pagina? Sldos.

    ResponderEliminar
  43. Excelente muy bueno este fin de semana voy a agregarlo a mi blog hace mucho estaba buscando una S3Slider ninguna me funcionaba correctamente o duraban 2 dias no màs y quedaba en negro.

    un saludo y muchas gracias

    ResponderEliminar
  44. Borest, eso depende de cada plantilla, generalmente sólo creas un elemento HTML/Javascript y lo arrastras hasta donde quieres, ya sea arriba de las entradas, bajo la cabecera, etc.

    samantha, seguro este durará más de dos días :D

    ResponderEliminar
  45. hermoso hermoso sonara a repeticion pero justo lo que necesitaba mi estimado potro

    ResponderEliminar
  46. Ohhh osea que no es error mio?? uff! pense que yo era el que lo hacia mal,tons hasta tu tienes problemas con eso??

    ResponderEliminar
  47. Travian Crack, qué bueno que te ha gustado :)

    Microboy90, a mí no me sucede, pero sé de muchos blogs a los que sí.

    ResponderEliminar
  48. Potro se puede añadir un gadget justo arriba de el elemento ''entradas del blog''? Pero que se ajuste al ancho de ese elemento. Sldos.

    ResponderEliminar
  49. Muchas gracias compa ..

    Lo hice paso a paso y funcionó

    Quedó muy bien el efecto

    se agradece el tuto

    Muchas gracias


    Saluos bro ;)

    ResponderEliminar
  50. Borest, como te dije, sólo arrastras el elemento arriba de las entradas y se ajusta al tamaño, obviamente como todo gadget, si pones contenido más grande que el gadget se corta.

    MarcoliO, gracias a ti por tu visita :)

    ResponderEliminar
  51. Una pregunta muy elemental de novato, ¿como sé si mi blog es Scriptaculous o otro JQuery?

    Gracias de antemano.

    ResponderEliminar
  52. Sólo busca si en tu plantilla tienes algo que diga Scriptaculous y/o Prototype, si es así entonces sí tienes ese script.

    Saludos.

    ResponderEliminar
  53. Hola. Use esta herramienta en blog, en firefox se ve completa la imagen, pero en Internet explorer la muestra desde el centro hacia la derecha. Porque pasa esto?

    ResponderEliminar
  54. Hola aqui te dejo el blog para que lo veas:
    www.estadisticassalud.blogspot.com
    Visualizalo en Navegador FireFox y se ve bien
    luego prueba Internet explorer y veras a que me refiero

    Gracias amigo

    ResponderEliminar
  55. muy padre me gusto, solo que igualmente ma pasa como dice omar jose con el explorer se ve alamitada pues ni modos

    ResponderEliminar
  56. OMAR JOSÉ MONTILLA SUÁREZ, intenta pegado el código del cuarto paso antes de esta línea:
    /* Page structure tweaks for layout editor wireframe */


    .::EALV::., sin saber cuál es tu blog me es imposible ver si hay posibilidad de solucionarlo.

    ResponderEliminar
  57. Muchas gracias por la respuesta.

    Y por cierto, gran blog, lo visitaré con mucha frecuencia a partir de ahora. ;)

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

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

    ResponderEliminar
  60. Potro es eterno?? y dime como hago para poner en el gagdet las últimas entradas pero sin imágenes, por ejemplo como la de cyberbloggero! gracias

    ResponderEliminar
  61. Con este gadget no, el que él tiene ya venía incluido con la plantilla, después buscaré uno parecido para publicarlo.

    Saludos.

    ResponderEliminar
  62. Gracias potro, he seguido ésta entrada para colocar de ésta forma mi contenido destacado.
    Una pregunta que me surge al intentar hacerlo... Las imágenes que le voy a incluir son del mismo tamaño que el widget (550x300), tal y como veia en tu blog para el ejemplo. Sin embargo, me aparece un borde izquierdo y superior negro, que impide que se vea adecuadamante la prersentación.
    ¿A que se debe y como puedo corregirlo?
    Gracias

    ResponderEliminar
  63. ¡Bien Potro! Si vas a publicar algo parecido al contenido destacado de cyberbloggero no dudes que lo usaré, además en http://pcjuegosyelinks.com tienen un gadget parecido que también me llama mucho la atención. No pude utilizar este porque tengo Scriptaculous. Gracias

    ¡Saludos!

    ResponderEliminar
  64. Perdón: es pcjuegosyelinks.blogspot.com

    ResponderEliminar
  65. CeTTa, necesitaría verlo funcionando en tu blog para orientarme con los códigos y encontrar una solución.

    Julio, no sé qué gadget use el de esa página ya que no pude entrar, pero ya después pondré uno como el de Cyberbloggero, veo que muchos lo piden ;)

    ResponderEliminar
  66. Hola Potro,

    excelente aporte como siempre!!

    pero tengo una duda, me gustaria saber como poder poner el texto en lugar de arriba y abajo a la derecha o izquierda, es posible?

    un saludo.

    ResponderEliminar
  67. Debajo de:
    .top {
    top: 0;
    left: 0;
    }

    Agrega esto:
    .left {
    top: 0;
    left: 0;
    width: 110px !important;
    height: 280px;}
    .right {
    right: 0;
    bottom: 0;
    width: 90px !important;
    height: 290px;}

    Y en el código de la imagen donde dice class="bottom" cámbialo por left o right según sea el caso.

    ResponderEliminar
  68. Potro, antes de nada agradecerte muchisimo la ayuda.
    Al insert el codigo obtengo la siguiente respuesta al guardar...

    Se ha encontrado más de un artilugio con el ID: HTML5. Los ID de artilugio deben ser exclusivos.

    ¿A que se puede deber?

    A ver si me puedes echar una mano.

    Gracias

    ResponderEliminar
  69. "Potro" muchas gracias por la ayuda, pero creo que lo intentaré más adelante por mí mismo y con distintos plugins, a ver que pasa.

    "El otro Diego" Pues evidentemente tienes repetido ya ese ID, y los Id deben ser únicos. Cambia el nombre de iD llamado HTML5 por otro que quieras, por ejemplo HTML5_2 o PepePalotes o como quieras, pero que no esté repetido.

    Saludicos !!!

    ResponderEliminar
  70. Muchas gracias, Cetta,voy a probar....mi miedo era ese, cambiar el nombre y que se fuera a la mierda todo.Sabiendo que no hay problema voy a ello...

    Un saludo

    ResponderEliminar
  71. Perfecto,Cetta, ya veo el slider....ahora mi duda es la siguiente: el slide queda sobre las entradas, es decir, que se coloca encima de ellas, Como puedo hacer para bajar la primera entrada y el slide no se sobreponga sobre la primera entrada que tengo?

    Un saludo

    ResponderEliminar
  72. Poco a poco voy solucionando mi problema. Ya mas o menos lo tengo, el unico problema que tengo es que cuando pasa de imagen a imagen en texto de las entradas sube un segundo hasta que sale la siguiente foto del slide. Es decir, que la primera entrada sube y baja en funcion de si hay foto o no. ¿Como puedo hacer para que esa primera entrada siempre se mantenga a la misma distancia del slide aun en los cambios de foto del slide? No se si me habre explicado bien. Espero que me entendais. Muchas gracias

    ResponderEliminar
  73. Hola El otro Diego,

    Puede ser porque en el área de #sliderContent { has modificado los parámetros de posición.
    Regresa esos parámetros a los originales y verifica se se arregla.
    Saludos.

    ResponderEliminar
  74. Buenas Potro, te comento.

    Si dejo los parametros originales queda asi..

    http://elotrodiegoblog.blogspot.com/

    Como ves queda sobre el banner. Si en #sliderContent aumento la cifra en top el slide baja pero se queda sobre la primera entrada. Si le pongo relative en vez de absolute, entonces me pasa lo que te comentaba, que la primera entrada pestañea subiendo y bajando cada vez que cambia de imagen el slide.

    La solucion que se me estaba ocurriendo es aumentar la distancia que queda entre la primera entrada y la zona del banner ¿como lo ves? ¿como seria posible hacerlo? A ver si me puedes echar una mano. Muchas gracias a todos.

    ResponderEliminar
  75. Igualmente pienso que podemos controlar los márgenes, tanto del slider como el de las entradas.
    Busca esta parte y agrega lo que está en negrita:
    #sliderContent {
    width: 550px; /* Ancho del gadget */
    position: absolute;
    top: 0;
    margin: 0;
    padding:0;
    margin-top:220px;
    }
    Luego abajo agrega esto:
    #Blog1 {
    margin-top:330px;
    }

    Saludos.

    ResponderEliminar
  76. Ya lo he conseguido,Potro. toqueteandomargenes lo consegui. De todas formas me quedo tu solucion que la veo muy util.

    Muchas gracias por todo,compañero.

    Un saludo

    ResponderEliminar
  77. Por nada, qué bueno que ya está todo trabajando bien.
    Saludos.

    ResponderEliminar
  78. Una ultima duda,Potro.¿Como se puede conseguir que el Slide solo se vea en la pagina principal pero no en cada entrada?

    Muchas gracias.

    Un saludo

    ResponderEliminar
  79. Ya lei la entrada,Potro. El tema es encontrar ese gadget ¿alguna pista para encontrarlo en el Html?

    Muchas gracias de nuevo

    ResponderEliminar
  80. Ponle un nombre al gadget por un momento, así encontrarás el gadget por su nombre.
    Lo editas y luego eliminas el nombre de nuevo.

    ResponderEliminar
  81. Muchas gracias,Potro. Todo perfecto pero esto parece el cuento de nunca acabar,ejej, lamento tanta molestia.
    El tema es que me ha surgido una ultima duda, al eliminar el slide de las entradas se me queda el espacio reservado para este, es decir, que la entrada no comienza desde arriba,sino que comienza desde donde comenzaria si estuviera el slide.he estado toqueteando margenes y no lo consigo. ¿Como podria arreglar esto? mil gracias

    Un saludo

    ResponderEliminar
  82. Entonces habría que poner otra condicional para el gadget de Entradas del blog. Antes de </head> pega esto:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #Blog1 {
    margin-top:0px;
    }</style>
    </b:if>

    Con eso estás indicando que cuando se trata de una entrada individual, las entradas no tendrán el margen superior que habías puesto antes, sino que se subirá a la altura que tenía normalmente.

    ResponderEliminar
  83. Ahora está todo perfecto, Potro. Mil gracias por el tiempo dedicado y la ayuda que nos prestas. Para cualquier cosa ya sabes donde estoy.
    Muchas gracias por todo.

    Un saludo

    ResponderEliminar
  84. el mio no quiere aprarescer tengo las imagenes en dropox y di la pedo ver que pasa ise todo bien

    ResponderEliminar
  85. potro mira mi blog wwww.elmvpmusical.blogspot.com

    ResponderEliminar
  86. Primero descomprime el archivo s3Slider.rar y extrae el archivo s3Slider.js
    En el primer código debe ir el archivo s3Slider.js que previamente debiste subir a Internet, al parecer lo intentaste subir a Dropbox pero el archivo debe ir dentro de la carpeta Public.
    Ya que has subido ese archivo y has puesto su URL donde se indica entonces tienes que subir las fotos que vas a mostrar y poner su URL en el código del paso #5

    ResponderEliminar
  87. todavia no se ve pero yene uno ohh tengo que llenarlo todo los url

    ResponderEliminar
  88. Recuerda y lee nuevamente lo que te dije, el archivo que debes subir a la carpeta Public no es el archivo .rar sino el .js
    Las fotos igual se suben a la carpeta Public, no es la URL de toda la carpeta, sino se pone la URL de cada una de las fotos que quieres mostrar.

    ResponderEliminar
  89. Es genial este elemento! Tengo una pregunta respecto a un problema que tengo. Adjunto una imagen, ya que es mas fácil entender viéndola.

    http://yfrog.com/jpimagen1jbp

    Necesito que este elemento ocupe todo el ancho del blog, hasta donde están delimitadas las lineas rojas, y nose que parte del html modificar para lograrlo. Si alguien me puede ayudar lo apreciaría mucho!.

    ResponderEliminar
  90. En sí el ancho del blog es lo que tienes en verde, lo que está en rojo no, lo puedes comprobar porque el ancho de tus entradas tampoco alcanza el ancho que deseas.

    ResponderEliminar
  91. POTRO ESPERO VEAS ESTE COMENTARIO XD AVER ESQUE NO ME MUSTRA LA DESCRIBCION DE LA IMAGEN SY SI LA TRAE QUE PODRA SER

    ResponderEliminar
  92. no olvidalo ya lo compuse

    ResponderEliminar
  93. NA OLVIDALO, OTRA DUDA POTRO PORQUE SE QUEDA EN BLANCO AL PASAR A LA SEGUNDA IMAGEN? CUANDO REGRESA ALA PRIMERA PASA RAPIDO :S
    AVER SI ME AYUDAS TIO

    ResponderEliminar
  94. Entre cada imagen se pone blanco en desvanecimiento porque así es el efecto que tiene.

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

    ResponderEliminar
  96. Hola Potro, coloqué los códigos y me quedó un espacio en la parte superior y que no dejaba ver el mensaje por cada imagen, le quite el borde poniendole 0px,y le di 557px de ancho de gadjet y de alto 500, solo de esa manera se ve el comentario bajo la foto, todas las imagenes tienen 544x408 y a pesar de eso el slide está muy abajo del titulo de la entrada, ¿como tengo que hacer para que esté mas arriba el slide?, Gracias de Antemano Potro.

    ResponderEliminar
  97. http://selectprint.blogspot.com/2010/02/galeria-flickr.html
    me olvidaba, ésta es la entrada, gracias.

    ResponderEliminar
  98. Prefiero el que presentan aqui: http://testtsets.blogspot.com/http://testtsets.blogspot.com/

    Las instrucciones para implementarlo en nuestro blog estan en esta otra pagina: http://www.cooltricksntips.com/2009/06/adding-jquery-posts-slider-to-blogger.html

    Espero que les sirva

    ResponderEliminar
  99. ANDRES ARMAS,

    Podrías ponerle un margin-bottom debajo de .sliderImage span {
    Por ejemplo:
    .sliderImage span {
    margin-bottom:20px;

    O bien,
    .sliderImage span {
    margin-top:-20px;

    Quizá eso lo arregle, generalmente todos los gadgets se ven distintos cuando están dentro de una entrada.

    ResponderEliminar
  100. Te paso a explicar algunos detalles, en el blog las entradas siempre tienen un ancho de 555 y cuando le pongo una imágen, queda precisa si le doy una imagen de 544, con el alto no hay problema, por que el marco que se crea se adapta a la foto.

    En el código que pusiste del slide:
    le di 0px, en border:1px solid #d7d0c0
    para que no me cree otro borde, por que la imágen se recortaba un poquito por los costados.

    En el código que pusiste le cambié estos valores.
    width: 555px; /* Ancho del gadget */
    height: 490px; /* Alto del gadget */

    para la velocidad le dí timeOut: 2000, para que pase un poco mas rapido.

    background-color: le puse el color de fondo de las entradas.

    Ahora, le puse el codigo que sugeriste, pero no hubo cambios, le quité algunas cosas que decían scriptaculos en la plantilla, pero antes de eso podía ver los slides, o quizas no lo hice correctamente, espero puedas ayudarme con esto, gracias como siempre por responder a tantas consultas, un abrazo.

    ResponderEliminar
  101. Intenta con esta otra cosa, en esta parte agrega lo que está en negrita:
    .bottom {
    bottom: 30px;
    left: 0;
    }
    Con eso estamos indicando que el área del texto suba 30px desde abajo.
    Espero y eso funcione.

    Saludos.

    ResponderEliminar
  102. master esta genial esto,pero como lo podria hacer para que solo se vea en la pagina principal .

    saludos

    ResponderEliminar
  103. Hola Potro, he ido probando pero aún no funciona, pero no pierdo la esperanza, saludos.

    ResponderEliminar
  104. goles y mujeres, mira esta entrada

    ANDRES ARMAS, eso debió arreglarlo, no sé qué más pueda ser excepto el alto del gadget. Seguro los estilos de las entradas están teniendo los conflictos con los estilos del gadget.

    ResponderEliminar
  105. Hola potro , mi consulta es la siguiente , coloqué el slider en la sidebar , el problema es que en Firefox se ve perfecto pero en I.Explorer 8 , solo se ve la mitad , no se si esto tendrá solución , o si diste anteriormente respuesta a una situacion similar , te dejo la direccion del blog ,para que lo compruebes si tienes tiempo claro esta , saludos amigo y felicidades por este maravilloso espacio que nos brindas .

    ResponderEliminar
  106. Perdon se me olvido darte la direccion es esta :
    http://cvizcaya.blogspot.com/

    ResponderEliminar
  107. Hola Miguel A. Glez.,

    Lo he visto en Chrome e IE8 y en ambos se ve cortado, la razón no es el navegador sino que el gadget excede el ancho de tu sidebar, es por eso que se recomienda que vaya arriba de las entradas o debajo de la cabecera para que en ancho se acomode y no se corte como en tu caso.

    Saludos.

    ResponderEliminar
  108. Gracias eres un crack , tienes un blog que nos ayuda muchisimo , hare alguna prueba con tu consejo , un saludo.

    ResponderEliminar
  109. Excelente recurso Potro, en Mozilla se ve muy bien, la dificultad es en Explorer.

    Hay algunos tutoriales al respecto pero no encontré nada que resuelva el problema.

    Un abrazo desde Uruguay.

    ResponderEliminar
  110. s3Slider es compatible incluso con la versión 7 de Internet Explorer pero habrá muchas plantillas que no lo sean, ahí es cuando puede haber problemas con el gadget pero no por el script sino por la plantilla que no es compatible.

    Saludos.

    ResponderEliminar
  111. Hola Potro, cuando abro la pagina en internet explorer aparece este mensaje de error.
    http://i866.photobucket.com/albums/ab223/selectprint_/error.jpg
    Saludos.

    ResponderEliminar
  112. Ese mensaje sólo aparece cuando se da click en el ícono de advertencia y es muy común que suceda no sólo con este sino con cualquier otro script, Internet Explorer tiende a no leer bien la mayoría de los scripts según sea la plantilla.
    Si todo te funciona bien no le hagas mucho caso.

    ResponderEliminar
  113. oye conmigo sale mal me podrias ayudar porfavor http://wrestling-wwe-live-pruebas.blogspot.com/

    ResponderEliminar
  114. A ver, Potro, te explico:

    Hay un tipo de slideshow que te escoge automáticamente una imagen de cada entrada sin importar el tamaño, y te va pasando cada imagen con el título de cada entrada; aquí te pongo un ejemplo de lo que digo: http://guiaforex.bligoo.es/

    He buscado hasta hartarme en google, en español y en inglés y no he encontrado nada sobre un widget de este tipo para meter en Blogger.

    Si tu sabes algo o pudieras investigarlo, sería estupendo. A mi gusto, es el tipo de slideshow perfecto que debería ir al principio de cualquier blog.

    Saludos,

    Enrique.

    ResponderEliminar
  115. Con respecto a lo que te iba contando del slideshow con los títulos de las entradas y las imágenes lo único que he podido encontrar es esto:
    http://www.quierocrearunblog.com/2009/12/slideshow-titulares-entradas-blogger.html

    Es un slideshow automático con los títulos de las entradas y excerpts, pero sin imágenes; aunque el concepto es el mismo.

    Yo ya lo puse en mi blog: guiaforex.blogspot.com aunque todavía tengo que personalizarlo;

    claro que este widget no es lo que yo ando buscando (slideshow con imagen automática de cada entrada y titulares), pero a falta de pan...

    ResponderEliminar
  116. Hola Enrique Muley,

    Ningún gadget que conozca incluso ese que mencionas toma la imagen de forma automática, en todos se tienen que agregar manualmente por los webmasters, de cualquier modo si encontrara algo parecido te lo haré saber.

    Saludos.

    ResponderEliminar
  117. Hola Potro , escribo este comentario para difundir la solucion al conflicto de este gadget con Internet Explorer o al menos la que a mi me funcionó , con la esperanza de poder ayudar a los que tambien lo sufrieron como yo , me explico , el gadget como dije anteriormente en un post se me veia cortado en dicho navegador Explorer , lo solucioné asi : 1ºAcceder 2ºDiseño 3ºElementos de pagina 4ºIr al gadget donde tengamos el S3slider y darle a Editar 5ºEn el archivo HTML lo que hice fue suprimir la linea del texto donde pone "center" del principio y la linea del texto donde pone "/center" del final .
    Espero que a los demas les funcione tambien , decir que yo el gadget lo tenia colocado en la sidebar , un saludo y felicidades por tan maravilloso blog .

    ResponderEliminar
  118. Perfecto Miguel :D
    De cualquier modo voy a quitar esas partes que mencionas del código para quienes apenas lo usen no vayan a presentar el mismo problema que tuviste.
    Muchas gracias por compartirlo.

    ¡Saludos!

    ResponderEliminar
  119. Hola Potro,

    A pesar de probar todo lo que aparece arriba en cuanto al problema con el IE, yo sigo con lo mismo, sigue apareciendo sólo la mitad de la imagen. Me das una mano?

    En mi plantilla no encontré el "Page structure..." que mencionaste arriba.

    Muchas gracias por tu ayuda!
    María

    ResponderEliminar
  120. Hola Maar,

    Necesitaría ver tu blog para darme una idea de qué pueda estar pasando.
    Saludos.

    ResponderEliminar
  121. Como tengo que hacer para que pueda combinarlo con el sexy menu? porque no me aparece nada cuando escribo el codigo.

    ResponderEliminar
  122. Lo mismo que te había dicho antes, si ya tienes puesto una vez el archivo jQuery no hay necesidad de ponerlo de nuevo, a menos que, el otro truco que necesita jQuery sólo funcione con otra versión anterior, si es así entonces quizá no puedas usar ambos.

    ResponderEliminar
  123. men ya lo puse y dejo de funcionar no se por ke quisiera saber como identifico si tengo Scriptaculous para que funcione espero respuesta rubengonzalez22@hotmail.com

    ResponderEliminar
  124. saludos? llave, potro buen truco hermano me sirvió y me funciona muy bien en mi web pues recomiendo este post es muy bueno sigue así pana.

    ResponderEliminar
  125. Te lo agradezco, qué bueno que todo te ha salido perfecto ;)

    ResponderEliminar
  126. Hola Potro, excelente Blog de ayuda, gracias por compartir.

    ResponderEliminar
  127. Gracias a ti por tu comentario y tu visita!

    ResponderEliminar
  128. hey potro saludos y esta excelente tu pagina, mira tengo un proble hago todo lo que indicas pero al final cuando voy a ver mi blog me sale solo esto, div id="slider">, sera por la clase de plantilla o le tengo que cambiar algo. agradecería tu ayuda.

    ResponderEliminar
  129. Quizá no has puesto los códigos en el lugar indicado, revisa de nuevo la entrada para que verifiques que has realizado los pasos correctamente.

    ResponderEliminar
  130. ok fíjate que ya lo He revisado tres veces pero te dejo mi blog para que chequees http://dossda.blogspot.com/ es un blog de prueba para que antes de que lo meta a mi mero blog ya sepa como. y veras que sigue apareciendo div id="slider">

    ResponderEliminar
  131. hey amigo buen aporte te cuento que ya lo pude hacer

    ResponderEliminar
  132. Vale, ya lo veo funcionando, qué bueno que lo has resuelto :)

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

    ResponderEliminar
  134. Lo siento, sólo explico cómo hacerlo, cada quien debe hacerlo por sí mismo.

    ResponderEliminar
  135. potro,como lo puedo ocultar en las paginas estaticas checa mi blog como quedo, otra cosa al poner el S3Slider el boton de efecto dezlizante que va hacia ya no tiene el efecto dezlizante solo sube normal ayda¡¡

    ResponderEliminar
  136. Sigue los pasos de esta entrada, sigue esos pasos sólo que en lugar de usar la primera línea en color rojo usa esta:
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    Lo otro es porque este menú usa jQuery y el efecto de la flecha usa Scriptaculous, estos scripts son incompatibles.

    ResponderEliminar
  137. quedo bien ya no se visualiza en las paginas estaticas pero no hay una solucion a la incompatibilidad??

    ResponderEliminar
  138. Pues dicen por ahí que hay un truquillo pero la verdad yo lo he puesto en marcha y nunca he tenido resultados es por eso que no puedo decir que sea la solución :\

    ResponderEliminar
  139. tengo una pequeña duda. quisiera saber si esto es compatible con el menú acordeón desplegable que posteaste.

    ResponderEliminar
  140. No, este usa jQuery el cual es incompatible con ese menú que usa Mootools.

    ResponderEliminar
  141. HOLA CHE... LA VERDAD QUE NO ME SALE... FIJATE EN MI BLOG SI LO PODES ARREGLAR..

    GOLESPORELMUNDO.COM.AR

    NO SE CUAL ES EL PROBLEMA

    ResponderEliminar
  142. AH.. SUBIE EL ARCHIVO QUE DESCARGUE A RAPIDSHARE.. ¿¿¿ESTA BIEN?? O LO TENGO QUE SUBIR A Dropbox?????

    ResponderEliminar
  143. Rapidshare no te dará una URL para "leer" el script sino para descargarlo. Necesitas subirlo a un alojamiento que te permita leerlo. Yo recomiendo Dropbox pero si hay otro que uses no hay problema.

    ResponderEliminar
  144. Hola potro, al poner las imagenes que quiero en el slider me queda un margen a la izquierda y arriba, siendo las imagenes y el gadget del mismo tamaño 600x350

    http://jmgvideosycaps.blogspot.com/

    ResponderEliminar
  145. Esas plantillas nuevas suelen alterar los gadgets. Prueba buscando esto:
    #sliderContent {
    width: 550px; /* Ancho del gadget */
    position: absolute;
    top: 0;
    margin: 0;

    Eso que está en negrita remplazalo por esto:
    margin: -10px 0px 0px -22px;

    Eso debe hacer que se mueve a la derecha, si sigue quedando un color blanco (ahora del otro lado) sólo cambia donde dice:
    #slider {
    width: 550px; /* Ancho del gadget */
    height: 300px; /* Alto del gadget */
    background:#FFF;

    Y ahí cambia el color de fondo por otro, o bien elimina eso mismo que está en negrita.

    ResponderEliminar
  146. POtro, muchisimas gracias, ya esta solucionado, felecidades por el blog

    ResponderEliminar
  147. Una duda potro, el gadget se puede poner mas centrado, y por que no me sale el titulo que le pono, un saludo

    ResponderEliminar
  148. Lo del título debe ser de algo de tu plantilla que no permite poner un título en los gadgets que se ponen en esa área.
    Para centrarlo entonces la parte que agregaste, es decir, esta:
    margin: -10px 0px 0px -22px;

    Cambia ese -22px por otro número más alto como 200px así hasta que quede a la distancia que deseas.

    Saludos.

    ResponderEliminar
  149. Hola, gracias ante todo por este aporte. Muy bueno. Tengo solo un problema con él. Tengo puestos 5 imagenes cada una con su url y enlace de la entrada pero al arrancar la página no aparece una imagen que vaya cambiando sino que aparecen las 5 una debajo de otra y van desapareciendo cada una debajo de la anterior. El caso es que tarda un rato hasta que ya queda solo una arriba como definitiva y la pagina mientras está toda dando botes. ¿Que he podido hacer mal?

    ResponderEliminar
  150. Prueba poner el primer código después de <head> para que cargue más rápido ese archivo.
    Si continua el problema dime en cuál blog es para echarle un vistazo.

    ResponderEliminar
  151. He puesto el primer codigo justo después de -head- pero sigue igual. Si le puedes echar un vistazo te lo agradezco: http://videodegatos.blogspot.com/

    ResponderEliminar
  152. Estoy casi seguro que entonces debe ser la plantilla. Nunca lo he probado en las plantillas nuevas de Blogger pero sé que la mayoría de los trucos, efectos, menús y cuanta cosa no funciona en ellas.
    Podrías probar con otra plantilla que no sea de las nuevas y ver qué resultado tienes.

    ResponderEliminar
  153. Hola, use los cod..segui todo, pero solo aparece el recuadro, pero no las imagenes, tenes idea, de porq sera?
    graxias

    ResponderEliminar
  154. Hola potro
    He puesto todo al paso de la letra, pero no me funca, no se q pasara, y en verdad necesito ponerle esto a mi blog, por favor te pido que me ayudes.

    Saludos...

    ResponderEliminar
  155. bueno, vuelvo pero sin pedidos, ya arergle el prolema xD
    era q tengo 2 scrip, y no reconosia 1, lo redireccione bn, y anda lo mas bn.... graxias = =) nos vemos

    ResponderEliminar
  156. Y como fue que lo hiciste WD porfa ayudame o alguien ayudeme Porfavor...!!!

    Saludos...

    ResponderEliminar
  157. WD, qué bueno que lo has arreglado :)


    ΔŖĮŞξ, probablemente usas Scriptaculous o Prototype, si es así entonces no funcionará ya que esos scripts no son compatibles con jQuery y es el que se usa para esta galería.

    ResponderEliminar
  158. Grax Potro

    Pero como lo puedo quitar y disculpa las molestias q causo, nada mas quiero q mi blog quede mas personalizado

    Saludos...

    ResponderEliminar
  159. Como puedo quitar el Scriptaculous de mi blog para q funcione este widget

    ResponderEliminar
  160. Gracias potro por la ayuda...soy muy nueva en esto de los blogs y estoy tratando de armar uno aplicando tu slider pero me gustaría agregarlo dentro de una página estática. ¿Me puedes ayudar a hacerlo? Pensé (solo de curiosa que soy) que agregando el codigo del paso 5 al final de la página (editando en HTML) se vería pero a pesar de verse sólo suben las imagenes a la mitad y pasana una vez y luego queda en blanco.
    Muchas gracias de antemano por tu ayuda... el blog es de prueba por lo que no te daré la dirección porque solo veras puras burradas que estoy probando.

    ResponderEliminar
  161. ΔŖĮŞξ, pues es que en los tres blogs de tu perfil no veo que tengas Scriptaculous, no sé si ya lo eliminaste o si es en otro blog, necesitaría más información para saber cómo ayudarte.

    Equipo Blog Olimpiadas, es muy complicado hacerlo dentro de una entrada o una página, igual lo he intentado y los estilos impiden que trabaje como debería :\

    ResponderEliminar
  162. Hola de nuevo Potro.

    Mira si te has fijado bn es Super Musica el blog en el que necesito poner el Widget, si puedes rebisarlo o si ya lo revisaste dame una ayudadita por favor y disculparas las molestias que Causo.

    Grax y Saludos...

    ResponderEliminar
  163. Po si a caso te dejo el link del blog Super Musica, http://super-musica-ng.blogspot.com/ | Muchas Grax Potro.

    ResponderEliminar
  164. Bueno, es que ya la plantilla que usas tiene un slider que hace lo mismo, quizá sería mejor que usaras el que ya tienes, pero sino entonces elimina ese gadget así como los scripts que tiene y que hacen que funcione para después poner el de esta entrada.

    Si tienes dudas sobre qué debes eliminar me dices para darte más detalles.

    Saludos.

    ResponderEliminar
  165. Hola potro, eso te iba a decir, que decidí cambiarle de plantilla, para no tener inconvenientes. Dejame agradecerte bastante por la ayuda que brindas. Muchas Gracias

    Saludos...

    ResponderEliminar
  166. Buenas noches, Saludos, gracias y felicitaciones por los tutoriales. Amigo tengo una duda. Cómo modifico ese recuadro negro donde va el título? Quiero que el recuadro que contiene mi título sea menos grande y apenas un poco mas grande que las letras. Gracias.

    ResponderEliminar
  167. Ese recuadro se adapta automáticamente al contenido del texto que agregues, si le pones una medida exacta entonces podrás tener el problema que en imágenes con mayor o menos texto te quede muy grande o muy chico.

    ResponderEliminar
  168. Hola Potro!

    ¿Cómo hago para eliminar el marco que aparece en el caso de mi blog? Te dejo en enlace a la página estática donde está!

    http://www.miguelnayaphotography.com/p/home_13.html

    ResponderEliminar
  169. Prueba buscando esta parte y poniendo en 0 (cero) donde dice 1px:

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: 0;
    background: #111111;
    border: 1px solid #111111;

    ResponderEliminar
  170. Como estas amigo! es posible q cada imagen tenga un link? me refiero al hacer clik en la imagen me redireccione a una url ,muchas gracias!

    ResponderEliminar
  171. Potro, una vez más, eres un crack!

    Gracias!!

    Una pregunta (no corresponde a esta entrada): Cuando entro en una página estática, aparece el título de la página y luego el contenido (además, por supuesto, del gadget de páginas). ¿Se puede eliminar el título de la página?

    ResponderEliminar
  172. Dj's Club, de hecho si lees con cuidado la entrada verás que cada imagen lleva un enlace que dirige a alguna página que elijas, sólo que yo en mi ejemplo no le he puesto enlaces.

    Miguel Naya Santalla, antes de </head> pega esto:
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <style>
    h3.post-title {display:none; visibility:hidden;}
    </style>
    </b:if>

    ResponderEliminar
  173. No sé cómo lo haces, pero has vuelto a acertar!! jajajaja

    Desde luego, a mí me tienes flipado... Todo lo que te he pedido has sido capaz de resolverlo (bueno, lo único, lo de redireccionar a una página estática el dominio)... Creo que el día que consigas eso, alguien te hará una estatua!! jejeje

    A lo serio. Me he fijado que cuando se pone el cursor encima del Slideshow, éste se detiene, y si hago click, se me abre la imagen. Se puede desactivar ambas opciones? Es decir, que no se detenga, y/o que no se abran las imágenes...

    ResponderEliminar
  174. Para evitar que se detenga no creo que pueda hacerse, así es el script, o al menos yo no sé cómo se haga.
    Para eliminar el enlace sólo quita del código las partes que contienen el enlace, es decir, lo que está en negrita:

    <a href="URL de la entrada">
    <img src="URL de la imagen" /></a>

    Saludos y gracias por tu comentario ;)

    ResponderEliminar
  175. Con tal de que no se pueda abrir el enlace me llega. Gracias Potro!!

    ResponderEliminar
  176. Buenisimo , vere si me sale , gracias :)

    ResponderEliminar
  177. me salio amigo , pero nose porq la entrada me sale a la altura de la cabecera, habra alguna solucion . muschas gracias!

    ResponderEliminar
  178. en mi caso no lo puse en un widget html, lo puse en una entrada , sera por eso ? :O

    ResponderEliminar
  179. Efectivamente es por eso, cuando se pone en una entrada la ubicación falla bastante :\

    ResponderEliminar
  180. ah!! entendi gracias por la ayuda , aprovecho para preguntarte tambien si se podria hacer algo asi como tieen esta pagina http://msn.foxsports.com/
    en donde rotan las noticias y se puede seleccionr q numero de noticia ver, escuche de un programa llamado cuber pero nose si funciona en blogguer
    http://www.taringa.net/posts/animaciones/5077839/Flash-Slide-imagenes-Cuber.html
    Gracias-!

    ResponderEliminar
  181. Ese no creo que funcione para Blogger, es más bien para páginas web.
    Hay algunos que pueden funcionar pero son bastante complejos tanto de hacer como de explicar. Ahora no tengo alguno parecido, pero apenas me dé un poco de tiempo probaré unos cuantos para ver cuál es más conveniente y lo publico.

    Saludos.

    ResponderEliminar
  182. gracias amigo , estareal tanto , un abrazo :D

    ResponderEliminar
  183. Caralho, qué buen truco, lo he probado y funciona a las mil maravillas. ¡Muy bueno, hermano!

    ResponderEliminar
  184. Gracias Perro Blanco, ya lo he visto funcionando en tu blog ;)

    ResponderEliminar
  185. amigo lo intentare hacer con un widget, ya q en la entrada no me funciona, la pregunta seria como hacer para q ese widget aparezca unicamente en laportada del blog, es decir en la parte principal :D

    ResponderEliminar
  186. Muchas gracias Potro me funciona; pero me sale un espacio blanco en la parte superior el tamaño de las fotos miden igual que las medidas.
    Lo unico que cambie fue el tiempo y el tamaño "500" para que pudiera entrar.
    http://cybernetics-csiyon.blogspot.com

    ResponderEliminar
  187. Hola Potro muy buenas, hace tiempo que no comento nada por estos lares porque he ido aplicando tus tips sin complicaciones, pero ahora me surgió un problema y es que mi plantilla trae por defecto un s3slider, el cual cuando oculto usando tus condicionales afecta a un menu lateral, sin embargo si lo dejo por defecto el menú funciona perfectamente, pero es un tostón que aparezca el s3slider en el portal, en las páginas estáticas, en las entradas individuales...

    Disculpa el tochaco, ojalá puedas decirme cómo hacer para arreglarlo. Salu2

    (Mi blog: http://detotengo.blogspot.com/)

    ResponderEliminar
  188. Csi_yon, pues no lo he podido ver funcionando porque tienes Prototype y Scriptaculous, mismos que no son compatibles con el script que se usa para este slider (jQuery).

    Joker, sí veo el slider pero no veo que lo tengas oculto en las entradas para poder ver de qué manera afecta al menú que mencionas. Otra cosa ¿cómo lo habías ocultado?

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

    ResponderEliminar
  190. Gracias por responder tan rápido Potro!, acabo de ocultarlo de nuevo para que puedas dar con el problema, uso la condicional para que se muestre el s3slider solo en el portal del blog, del post tuyo: aquí.

    El caso es que de esa forma la condicional cumple con el propósito pero si accedo a una entrada individual, a una página estática... como no se cargará el s3slider el menú lateral no funciona bien, se queda fijo sin el efecto. Además, solo utilizo la librería Jquery.

    Nuevamente, muchas gracias de antemano!

    ResponderEliminar
  191. Ok, quizá sea la forma en la que lo estás condicionando.
    Pega antes de </head> lo siguiente

    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <style type="text/css">
    #s3slider {display:none; visibility:hidden;}
    </style>
    </b:if>

    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.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger