TriSlider, otro slider con jQuery

31 de marzo de 2011 332 comentarios ,
La verdad es que eso de TriSlider me lo he inventado yo porque no tengo la menor idea de cómo se llame este slider, pero muchos lo han visto en la plantilla Dilegno Star y me han pedido que lo publique, así que mientras aparece el nombre real de este slider vamos a llamarlo así.

Aunque está diseñado para mostrar tres imágenes es un slider con un aspecto bastante lindo que estoy seguro que se verá muy bien en muchas plantillas para mostrar el contenido destacado del blog.


Para poner este slider en tu blog primero descarga este archivo, descomprímelo y súbelo a un hosting.
Luego entra en Diseño | Edición de HTML y antes de </head> pega esto:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='URL del archivo' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
jQuery(function(){
var $featured_area = jQuery('#featured-area');
var $featured_item = jQuery('#featured-area div#slider-control div.featitem');
var $slider_control = jQuery('#featured-area div#slider-control');
var $image_container = jQuery('div#s1 > div');
var ordernum;
var pause_scroll = false;

$featured_item.find('img').fadeTo("fast", 0.7);
$slider_control.find("div.featitem.active img").fadeTo("fast", 1);
$image_container.hover(
function () {
jQuery(this).find("img").fadeTo("fast", 0.7);
},
function () {
jQuery(this).find("img").fadeTo("fast", 1);
}
);

function gonext(this_element){
$slider_control.find("div.featitem.active img").fadeTo("fast", 0.7);
$slider_control.find("div.featitem.active").removeClass('active');
this_element.addClass('active');
$slider_control.find("div.featitem.active img").fadeTo("fast", 1);
ordernum = this_element.find("span.order").html();
jQuery('#s1').cycle(ordernum - 1);
}

$featured_item.click(function() {
clearInterval(interval);
gonext(jQuery(this));
return false;
});

var auto_number;
var interval;

$featured_item.bind('autonext', function autonext(){
if (!(pause_scroll)) gonext(jQuery(this));
return false;
});


interval = setInterval(function () {
auto_number = $slider_control.find("div.featitem.active span.order").html();
if (auto_number == $featured_item.length) auto_number = 0;
$featured_item.eq(auto_number).trigger('autonext');
}, 5000);

});
//]]>
</script>

<script type='text/javascript'>
jQuery(function(){
jQuery(&#39;#s1&#39;).cycle({
timeout: 0,
speed: 1000,
fx: &#39;fade&#39;
});

});
</script>
Cambia donde se indica, la URL del archivo que subiste previamente.
Luego antes de ]]></b:skin> pega los estilos del slider:
#gallery {
width:616px; /* Ancho del contenedor general */
height:320px;
margin:0 0 20px 0;
float:left;
display:inline;
}

#featured-area {
height: 300px;
width:616px; /* Este ancho debe ser igual al contenedor general */
position: relative;
padding: 11px 0px 10px 0px;
z-index: 1;
}

#featured-area .pics {
position: absolute;
width: 490px; /* Ancho de las imágenes */
height: 298px;
top: 11px;
left: 14px;
}

#featured-area .pics div.excerpt {
background: #fff; /* Color de fondo de la descripción */
bottom:0;
left:0;
padding:0px 0 0 10px;
position:absolute;
width:480px; /* Ancho de los títulos */
z-index:2;
opacity:0.8;
filter:alpha(opacity=80);
.width: 100%;
}

#featured-area .pics div.excerpt p {
color: #203136; /* Color de la descripción */
width:450px; /* Ancho de la descripción */
height:20px;
}

#featured-area .pics div.excerpt a {
font-size:18px; /* Tamaño de los títulos */
color: #000; /* Color de los títulos */
font-weight:bold;
text-decoration:none;
}
#featured-area .pics div.excerpt a:hover {
color: #ddd; /* Color de los títulos al pasar el cursor */
text-decoration:none;
}
.excerpt-text {
display:inline;
float:left;
font-size:12px; /* Tamaño del texto de la descripción */
width:450px; /* Ancho de la descripción */
padding:0px 0 10px 0;
}

#featured-area .pics span.feat-overlay {
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 490px; /* Mismo ancho de las imágenes */
height:298px;
z-index: 1;
}

#featured-area div#slider-control {
position: absolute;
width: 110px;
height: 296px;
border: 1px solid #b4b4b4;
z-index: 4;
top: 11px;
right: 1px;
}

#featured-area div#slider-control div.featitem {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY-3p64DmYV4cgpGd15WgzqG59Xhv9TMo22G9_6t23g3-ahyphenhyphengNUhEXs6pomVZQiRCoa-1DGZ3WVbWwVWK9-wjftv8laebyG21dDf_lOq5ISbVZkNY352bEX7kMRE16MxYzku1wafrKPRU/s1600/featitem-bg.png) no-repeat top left;
width: 76px;
height: 77px;
float: left;
padding: 10px 16px 12px 18px;
cursor: pointer;
}

#featured-area div#slider-control div.featitem img {
float: left;
margin-right: 18px;
border: 1px solid #f6f6f6;
margin-top: 5px;
width:67px;
height:67px;
}

#featured-area div#slider-control div.featitem.active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPTRCFNMR1F5z8uTcQAzj0YDjN8pTt4W73yEoDbElR2muNQrmgo9X7JDCIELxqMnGPKi18f-T3edVvDj3sv2_yrETIMJjoWucuqBH_6cUWVZJqDzOKmUeox4OaXSANNVc0pWGpGW8xjvc/s1600/featitem-bg-active.png) no-repeat top left;
margin-left: -20px;
padding-left: 38px;
}
#featured-area div#slider-control div.featitem.active h2 {display:none;}
#featured-area div#slider-control div.featitem.active span.meta {border: 0px;}
#featured-area div#slider-control div.featitem span.order {display: none;}
#featured-area div#slider-control div.featitem span.meta {display:none;}
Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega la estructura del slider:
<div id='gallery'>
<div id='featured-area'>
<div class='pics' id='s1'>

<!-- Imágenes grandes -->
<div>
<img src='URL de la imagen UNO' style='width: 490px; height: 298px;'/>
<div class='excerpt'>
<p><a href='URL del enlace'>Lorem ipsum</a></p>
<p class='excerpt-text'>Aquí va la descripción.</p>
</div>
<a href='URL del enlace'><span class='feat-overlay'/></a>
</div>



<div>
<img src='URL de la imagen DOS' style='width: 490px; height: 298px;'/>
<div class='excerpt'>
<p><a href='URL del enlace'>Lorem ipsum</a></p>
<p class='excerpt-text'>Aquí va la descripción.</p>
</div>
<a href='URL del enlace'><span class='feat-overlay'/></a>
</div>



<div>
<img src='URL de la imagen TRES' style='width: 490px; height: 298px;'/>
<div class='excerpt'>
<p><a href='URL del enlace'>Lorem ipsum</a></p>
<p class='excerpt-text'>Aquí va la descripción.</p>
</div>
<a href='URL del enlace'><span class='feat-overlay'/></a>
</div>

</div>

<div id='slider-control'>

<!-- Imágenes en miniatura -->
<div class='featitem active'>
<img src='URL de la imagen UNO' style='width: 67px ; height: 67px ;'/>
<span class='order'>1</span></div>


<div class='featitem '>
<img src='URL de la imagen DOS' style='width: 67px ; height: 67px ;'/>
<span class='order'>2</span></div>


<div class='featitem '>
<img src='URL de la imagen TRES' style='width: 67px ; height: 67px ;'/>
<span class='order'>3</span></div>


</div>
<div class='clear'/>
</div>
</div>
En este último código cambia donde se indica la URL de las imágenes y la URL de los enlaces. Notarás que cada imagen se pone dos veces, esto es porque una es para la imagen grande y otra para las imágenes en miniatura.
Algo parecido sucede con los enlaces, verás que el enlace se pone dos veces, uno es para en enlace de la imagen grande, y otro para el enlace del titulo que está arriba de la descripción.

En el primer código verás en color azul un número, este es el tiempo en milisegundos que tarda cada imagen en cambiar.

Como mencioné antes el slider está diseñado para mostrar sólo tres imágenes porque aunque se podrían agregar más quedaría poco estético, créanme, no les gustará el resultado si agregan más. Sin embargo pueden cambiar el ancho del slider, sólo hay que poner atención en las anotaciones que están en color verde dentro del segundo código y en el tamaño de las imágenes del tercer código.

Ahí mismo en el segundo código hay áreas que se pueden personalizar, como color del título, color de la descripción, etc. En el caso del fondo del área de las miniaturas es una imagen, bueno en realidad son dos, y si se de desea cambiarlas de color hay que editar las URLs de las imágenes que se encuentran también en el segundo código.

La verdad es que así como está el slider se ve muy bien, es de los pocos gadgets que no necesitan nada más que ponerlo en el blog y presumirlo a sus lectores.


332 comentarios en:

" TriSlider, otro slider con jQuery "

  1. Esto si que esta genial!... lo podrias hacer para video? o hay algo similar para video con esas mismas caracteristicas?... estoy buscandolo para mi blogs... quiero hacer una lista de temas en video, o seleccionar los videos de you tube y ponelos asi como esta este slider. gracias por toda la ayuda!!! NI TODAS LAS GRACIAS DEL MUNDO ALCANZAN! pero bueno... GRACIAS TOTALES!

    ResponderEliminar
  2. WWOW genial lo pondre en mi web aver que tla

    ResponderEliminar
  3. holaaaaaaaa me encanta tu blog donde ayudas gratuitamente voy a poner este slider si pueo que graciassssssssss feliz tarde ya te direeee si me funciona jajajaja besitosssssss

    ResponderEliminar
  4. Hola RM Musica,

    Pues no se me había ocurrido, aunque no sé si con este mismo pueda hacerse con videos, pero a ver si más adelante lo probamos y ver si se puede.
    Mientras tanto te dejo una buena opción de Vagabundia con la cual puedes insertar varios videos de YouTube tipo galería:

    http://vagabundia.blogspot.com/2009/10/incrustar-multiples-videos-de-youtube.html

    Saludos.

    ResponderEliminar
  5. Woooooo Potro genial lo que queria yo y creo que muchos potro eres un caballo de carreras ....

    ResponderEliminar
  6. Dreko, ojalá que todo salga bien ;)

    EMBRUJO, y a mí me encanta que me visites, ¡feliz tarde!

    ResponderEliminar
  7. wow Potro era justo lo que estaba buscando....
    como siempre lo mejor es Ciudadblogger

    ResponderEliminar
  8. Que tal potro nuevamente paso a saludarte y platicarte mis problemas jeje, ya pareces nuestro terapeuta personal blogger, mira se trata de una plantilla con un pequeño detallito que parece muy simple pero no puedo solucionar y ya llevo mas 14 hrs con eso, mira te explico:

    este blog es el del problema http://www.clinicadentalwhite.blogspot.com/ abajo del buscador aparece una imagen que dice BESTTHEME esta contiene un enlace hacia otra pagina, quiero quitar esa imagen y el enlace pero ya busque en la plantilla con los artilugios e expandidos la imagen y ya busque el codigo fuente solo de esa seleccion para eliminarlo y nada no me aparece dentro de la plantilla y me urge quitarlo me esta atrasando mucho para proseguir un proyecto, esta plantilla que estoy usando la puedes descargar de aqui http://besttheme.net/page/3
    se llama EVANDER, ¡ayudame protro porfa, parece algo muy simple pero ya me desespero y me estoy quedando sin cabello nada mas por este pequeño problema. GRACIAS Y RECIBE UN ABRAZO POTRO Y ESTA FABULOSO ESTE SLIDE COMO SIEMPRE PUROS MEGA POSTS TE AVIENTAS

    ResponderEliminar
  9. Oye lo del hosting no se como se maneja :S
    busco y se tiene que pagar :S
    me interesa mucho este truco me podrías ayudar por fa gracias :)

    ResponderEliminar
  10. Javier, por la pésima condición física que me traigo lo dudo mucho :P

    Sergio Molina, gracias bro, tú siempre tan amable :)

    ResponderEliminar
  11. @Potro porfavor necesito tu ayuda!
    Mira que le kiero eliminar un pedazo o hacer k suba el body para que se kite el pedazo ese que no kiero..porfavor gracias!! espero me entiendas
    te dejo una imagen y la url de mi blog
    http://img709.imageshack.us/img709/8642/peliculasyprogramas.png

    http://www.peliculasyprogramas.org/

    ResponderEliminar
  12. Hola Xtremdf bloggero,

    Parece que se ejecuta desde un script y por eso no aparece en la plantilla.
    Prueba buscando esta línea:
    .widebanner{height:60px;position:absolute;bottom:10px;right:10px;padding:0px 0px;text-align:center;}

    Y cámbiala por esta otra:
    .widebanner{display:none; !important;}

    ResponderEliminar
  13. Hola Potro,me gustaria saber si es posible cambiar el slider para que en lugar de poner imagenes, ponga mis ultimas entradas, usando mi Feed o algo por el estilo.

    Saludos!

    ResponderEliminar
  14. COMO DICE JAVIER WOWWWW ERES UN POTRO DE CARRERAS JEJEJE ¡EXCELENTE POTRO¡ MUCHAS GRACIAS POR TU AYUDA Y POR LO DE MI COMENTARIO EN FACEBOOK DE QUE DESAPARECIO LO DE EXAMINAR PLANTILLA AUN NO HE CREADO UNA NUEVA CUENTA PERO EN CUANTO LO HAGA SI ME APARECE ESO DE LOS CAMBIOS QUE IMPLEMENTO BLOGGER TRATARE DE TOMARLE FOTOS PARA QUE VEAS QUE NO ES MENTIRA, TAL VEZ LO ESTA HACIENDO AL AZAR UNAS PRUEBAS PILOTO DE LO QUE VIENE, GRACIAS NUEVAMENTE POTRO

    ResponderEliminar
  15. Hola Teiiicyy Vargazzz,

    Hay muchos hostings gratuitos, entre ellos Google Sites y Dropbox.

    ResponderEliminar
  16. Microboy90, supongo que ya lo has arreglado porque entré al blog y lo veo hasta arriba.

    D1360, puedes poner tus entradas de forma manual pero no automáticamente. En los próximos post publicaré uno, ya lo estoy checando ;)

    ResponderEliminar
  17. Genial potro era el que me gustaba ahora solo necesito tiempo para los menus y este slider

    Mil gracias

    ResponderEliminar
  18. hola potro, estoy seguro que con este slider nos leiste la mente a más de uno, pero antes de empezar a instalarlo en mi blog quisiera saber si es necesario subir las imagenes con los tamaños que están estipulados en el estilo del slider tanto en las grandes como en las miniaturas.

    ResponderEliminar
  19. Watesam, entonces ahora viene lo bueno que es el trabajo :)


    Carlos Gómez, de preferencia sí, pues aunque si subes una imagen más grande o más pequeña se redimensionará a las medidas que están en el código, pero si subes las imágenes con las medidas exactas se verá mejor el resultado. Y ojo, en el caso de las miniaturas no es una imagen distinta, es la misma URL que usarás para la imagen grande.

    ResponderEliminar
  20. hola potro esta es my blog http://narutoshippudencolombi.blogspot.com/ y la verdad e intentado por todos lados cambiarle el color de fondo ese gris claro nose si tu sabes como para que me ayudes gracias ^^

    ResponderEliminar
  21. @Potro Si lo arregle justo cuando te deje el mensaje x aki,revise mis codigos que tenia de hace un par de anios y ahi tenia guardado en donde lo tenia que mover!! y si quedo gracias de todos modos!

    ResponderEliminar
  22. Ero-k'rlox, en esta parte:

    .main-outer {
    background: $(main.background);

    Cambia eso que está en negrita por el código del color que quieres.

    ResponderEliminar
  23. Gracias Potro, como siempre hasta ahora no hay nada que no encuentre aquí, y te agradezco lo rápido que lo posteaste...

    TriSlider, no pudo ser mejor el nombre jeje ;)
    Saludos y gracias nuevamente

    ResponderEliminar
  24. gracias potro si no fuera pos usted estaria en palotes muchas gracias eres de gran ayudaa en la web

    ResponderEliminar
  25. Hola Potro:
    Tengo problemas con distintas aplicaciones que tenia aplicadas de Ciudad Blogger. He entrado en mi blog en html y resulta que estas estan en la plantilla pero no se ven. Esto se debe a que he cambiado la imagen de mi plantilla.
    Mi blog htpp://franciscoadame.blogspot.com

    ResponderEliminar
  26. Pirez, el nombre es lo de menos siempre y cuando funcione :)

    Ero-k'rlox, gracias!

    FRANCISCO ADAME RODRIGUEZ, cuando se cambia de plantilla el contenido de muchos gadgets como el de HTML/Javascript y Lista de Links no se traslada el contenido de ellos, es posible que ese haya sido tu caso, por lo que habría que agregar de nuevo el contenido a esos gadgets.

    ResponderEliminar
  27. Hola Potro:
    sabes como cambiarle el color a los botones que de las pestañas donde se dirijen a cada pagina es que e intentado por todo lado y no e podido en la seccion de diseñar plantilla avanzada no aparese la opcion este es my blog http://yu-gi-oh-colombi.blogspot.com/ gracias si puedes

    ResponderEliminar
  28. Potro:
    Le comento que estos están en la plantilla y no se han perdido.
    Que debo hacer eliminarlos y volverlos a introducir o que hago.
    Le he enviado platilla al correo.

    ResponderEliminar
  29. earv94, en el Diseñador hay una opción que dice 'Fonde de las pestañas' dentro de 'Avanzado'.


    FRANCISCO ADAME RODRIGUEZ, ¿exactamente cuáles son los gadgets que han dejado de funcionar?

    ResponderEliminar
  30. hola potro mira my plantilla no tiene barra lateral y nose si se pueda colocar algo como un borde a los gadge un borde negrito nose si se pueda este es my blog http://narutoshippudencolombi.blogspot.com/ y me gustaria colocarlo como esta pagina de un amigo http://www.narutoshippudentv.com/ el lo tiene todo en cerrado en recuadros azules oscuros

    ResponderEliminar
  31. En las plantillas del Diseñador no tengo la menor idea, poco sé de ellas :/

    ResponderEliminar
  32. u.U mi buen potro y que paso con tu cuenta de facebook?? he tenido un poco de tiempo ultimamente, queria pasarte la info de como poner en automatico las ultimas entradas de los blogs en este tipo de sliders... si aun tienes cuenta mandame mensaje a black@traviancrack.com o agregame pa que te vaya explicando como se hace esa cosa, saludos

    ResponderEliminar
  33. esa cuenta de correo admite msn, estoy disponible desde las 9 am o 9:30 am hora centro mexico por si gustas

    ResponderEliminar
  34. Hola Potro, Genial este tema, me encanta!!! Gracias como siempre por tu interés y paciencia para con todos nosotros y en particular con
    MaG@s RaDioMuSiC, y por todas estás cosas tan chulas que nos enseñas, un abrazo y feliz fin de semana

    ResponderEliminar
  35. Potro, tengo las siguientes dudas

    Tengo un blog de pruebas y me sale todo pero las imagenes no, creo que no las subo bien podria subirlas al mismo Google

    Al subirlo al blog principal, con las imagenes me pasa lo mismo pero al abrir cualquier entrada me sale un número, la página en blanco.

    Tengo mucho interes en este truco para la página de mi equipo. Espero tu ayuda

    ResponderEliminar
  36. ola potro un truco muy bueno pero quería preguntarte donde compraste el Dominio.com

    ResponderEliminar
  37. epale potro me puedes ayudar a solucionar un pequeño porblema con mi blog respondeme x favor

    ResponderEliminar
  38. Black, la cuenta personal del Face la di de baja hace unos días, avisé que la eliminaría pero creo que nadie lo leyó jajaja. En un rato agrego esa dirección al MSN ;)


    MaG@S RaDioMuSiC, otro abrazo para ti y feliz fin de semana igualmente :)

    ResponderEliminar
  39. Javier, últimamente Blogger y específicamente Picasa está teniendo muchos problemas con las imágenes, haz esto, sube de nuevo las imágenes pero cambiale el nombre a ellas, es decir, que no tengan ningún caracter especial como el signo +, -, *, etc.
    Prueba así y me cuentas cómo te fue.

    ResponderEliminar
  40. Pokelevel, en ViaInternet.com.mx pero en name.com están más baratos.

    Breiino'xX-hack, pues me encantaría pero no mencionas cuál es el problema que tienes ni en cuál blog.

    ResponderEliminar
  41. Gracias Potro de momento no lo voy a acer por k me kedan añadir muchas cosas salu2

    ResponderEliminar
  42. Hola Potro, pues yo tampoco leí lo de que eliminarías tu cuenta del fais buik... así que ahora ya no tengo como darte la vara por allí jajajajaja, bueno quizás apuntastes mi correo un día que te lo dí? sino pues tengo otro que he puesto nuevo para el blog, att.magosradioblog@gmail.com
    agregalo si gustas :-)

    ResponderEliminar
  43. Ayuda, por favor, me quedó todo mal. Este es mi blog:
    http://calculo-tv.blogspot.com
    Agradezco ayuda!!!

    ResponderEliminar
  44. Lo saqué todo porque quedaba muy mal... no salió el slider...

    ResponderEliminar
  45. MaG@S RaDioMuSiC, me parece que la otra vez te agregué, pero al rato que me conecte lo reviso :)

    Felipe, sin poder verlo puesto no puedo decirte dónde puede estar el error.

    ResponderEliminar
  46. Potro lo mismo, las he subido a picasa con un nombre diferente muy sencillo sin puntos, nada de nada lo he intentado con google sites lo mismo, ¿donde las subiste tu?

    ResponderEliminar
  47. Okey Potro, claro que al ser gmail y msn pues no pueden sino enviarse correos, así que hasta que no mandes un ¡ Hola Soy El Potro ! no me enteraré ;-) gracias, de todas maneras sino no lo tuvieses envías al que te dí por ahí encima ;-)

    ResponderEliminar
  48. Javier, de verdad que no sé, Blogger tiene demasiados y serios problemas con las imágenes últimamente, y según las URLs que tienes no existen. Quizá otra opción sería que entres a tu cuenta de Picasaweb, localices las fotos que subiste, las abras una por una y con el botón derecho del mouse da click sobre ella, te aparecerá un menú contextual, ahí selecciona algo parecido como 'Copiar URL de la imagen' y prueba poniendo esa URL en tu código.
    Yo las subo la mayoría de las veces desde Blogger y hasta ahora no he tenido problemas.


    MaG@S RaDioMuSiC, vale, ya estamos :)

    ResponderEliminar
  49. Potro ya conseguido solucionar lo de las imagenes no me ha andado por las ramas y las he subido a imageshack pero me pasa una cosa muy rara en la mayoria de las entradas todo normal pero mira lo que pasa en esta http://cdvillanuevadelarzobispo-javier.blogspot.com/2011/02/cd-villanueva-2-linares-deportivo-2.html

    ResponderEliminar
  50. Ya está puesto, no sale el slider...
    Está al final de la página para que no quede tan mal para el que entra...

    Agradezco ayuda!!! por favor!

    ResponderEliminar
  51. http://calculo-tv.blogspot.com/ es el blog...

    ResponderEliminar
  52. Javier, debe ser un gadget o un elemento que has puesto en esa entrada, sería cuestión de que veas cúal has puesto y quitarlo.

    ResponderEliminar
  53. Felipe,

    Hay dos razones por la que no te funciona y las dos razones tiene que ver con la forma como lo has puesto.
    El primer error está en que pusiste los estilos dentro de otros estilos y quedó roto el código.
    Tenías este código al final:
    #calbackloadimg{
    display:none;

    }

    Y justo en ese espacio pusiste el código de los estilos del slider, esa es una razón por la que no funciona.
    Debes poner siempre los códigos de forma correcta sin meterlos dentro de otro código. Así que quita los códigos de ese lugar y ponlos justo debajo de todo esto:

    #calbackloadimg{
    display:none;
    }

    El otro error (y desconozco por qué lo hiciste) es que pusiste de nuevo los estilos pero dentro del script.
    Si te fijas en el código que va antes de </head> también has repetido el código que iba antes de ]]></b:skin>

    Por esas dos razones es que no te funciona. Si pones todo tal com se indica y de forma correcta verás que será todo más sencillo ;)

    ResponderEliminar
  54. Saqué los códigos y los volví a poner, ahora me quedó un poco mejor pero las imágenes continúan yendo para abajo:
    http://calculo-tv.blogspot.com/

    ResponderEliminar
  55. No lo corregiste todo, como te dije, en el primer código también metiste otro código dentro de él y eso hace que no funcione.
    Mira de nuevo con detenimiento el primer código que se menciona en la entrada y verás que has añadido otro código dentro de ese mismo.

    ResponderEliminar
  56. Gracias Potro. Gracias a tus consejos mi blog va cogiendo forma. Es fácil estar al día con tus enseñanzas. El siguiente trabajo es hacer un menú superior decente. Que el que tengo es para salir del paso.

    Saludos desde Barcelona.

    Mi blog es:
    http://rj45music.blogspot.com

    ResponderEliminar
  57. Que todo salga bien tal como ahora ;)

    ResponderEliminar
  58. Hace una semana compre un dominio de blogger para pasarlo de blogspot.com a .com.(Ya que soy un novato y me parece que blogger es intuitivo en lagunos aspectos)

    Pero al terminar la migración me dí con la sorpresa de que los efectos del menu despegable y de un slider de imagenes no funcionaban. Pense que era un error de código, pero está todo igual que cuando si funcionaba.

    Lo vi por el IE9, y no funciona. Pero al revisarlo por Firefox sólo funciona el menu despegable, pero cuando activo el script del slider de imagenes ya no funcionan ninguno de los dos.

    Me podrían apoyar con este error.

    La dirección es www.tucartafianza.com (en construcción aún, pero no puedo avanzar)

    ResponderEliminar
  59. Hola Ronald,

    No creo que el problema tenga que ver con el cambio de dominio sino mas bien parece que hay un problema en el hosting donde tienes alojados unos scripts.
    Si te fijas antes de </head> tienes dos scripts, jquery.min.js y jquery-ui.min.js, ambos parece no funcionar sus URLs donde están alojados.

    Prueba subiéndolos a otro hosting para ver si se trata de eso o quizá es un problema de compatibilidad entre algunos de los varios scripts que usas.

    ResponderEliminar
  60. saludos potro después de terminar de poner este slider me di cuenta que mis thumbnail perdieron el efecto que tenían mira este es mi blog: http://rikudou-animes.blogspot.com/ y el demo para que veas el efecto que tenia: http://work-a-holic-template.blogspot.com/

    ResponderEliminar
  61. Probablemente haya un conflicto con las versiones de jQuery. Prueba eliminando esta línea para ver si se arregla:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script>

    ResponderEliminar
  62. Hola El Potro.
    Gracias por tu comentario. Subi los dos scripts en mi SkyDrive. Y el efecto de las imágenes empezó a andar. Pero en firefox no se aprecia el efecto. ¿En qué hosting podría subir mis scripts, imágenes,etc.? Para que firefox lo reconozca.

    Y los menus despegables, como podría solucionarlo.

    saludos

    ResponderEliminar
  63. Hola hermano. Primero te agradezco todo tu trabajo. Segundo te escribo para comentarte que me ha gustado este slider PERO, lo quiero poner y no funciona el efecto y se ubican las imágenes una debajo de otra tapando el contenido del blog :(...
    Probé en Google Chrome, Mozilla y IE y sucede lo mismo en los tres exploradores (solo en Chrome dentro de una entrada en particular funciona bien, pero solo dentro de una entrada con Chrome)...
    ¿será que uso un dominio ".com.ar"?
    o que sucederá??
    Gracias por adelantado...

    ResponderEliminar
  64. Hola Diego,

    Necesitaría verlo puesto para decirte cuál puede ser el problema.

    ResponderEliminar
  65. Potro; es
    http://www.credirecto-salta.com.ar/

    Lo tengo en construcción...

    ResponderEliminar
  66. Pues sí podría ser por el alojamiento pues todo parece estar en orden.
    Muchas veces Google Sites tiene conflictos cuando se trata de dominios propios, sucede siempre con los archivos de música y reproductores, quizá es la misma situación con este script.
    Prueba subirlo a otro alojamiento como Dropbox para estar seguros si se trata de eso.

    ResponderEliminar
  67. ok Potro, gracias. Lo subo a otro alojamiento y te cuento luego.
    Un gusto hermano. Saludos.

    ResponderEliminar
  68. HEY MAN NO PUDE PONER ESE SLIDER, YA QUE AL CARGAR LA PAGINA ME TIRA LAS OTRAS DOS IMAGENES ABAJO Y DESPUES DESAPARECEN. NO SE QUE PUEDE SER.

    ResponderEliminar
  69. te dejo una imagen para que mires de lo que te hablo http://dl.dropbox.com/u/10732904/OSALINAS/CATALOGO%20RION10/BANNERS%20PRINCIPALES/ddd.png

    ResponderEliminar
  70. LO ESTOY PROBANDO EN STE BLOG DE PRUEBA Y ERRORES
    CHECA http://pruebayerroresiron10.blogspot.com/

    ResponderEliminar
  71. Pues en ese blog está funcionando bien, excepto por las imágenes pequeñas pero al parecer aún no les has puesto su URL, fuera de eso lo veo trabajando bien.

    ResponderEliminar
  72. pues no que sera, yo uso firefox y la verdad que al entrar a la pagina pues me da ese error de que las imagenes se ponen abajo cuando la pagina esta cargando,

    ResponderEliminar
  73. Lo he probado en Firefox 4 y Chrome 11, en ambos funciona bien.

    ResponderEliminar
  74. mira ahorita lo voy a poner en mi blog principal, para que lo chequees haber como se ve ,

    ResponderEliminar
  75. no man no me funciona jejejejeje..
    sigo con el mismo problema, buscare otro slide haber como me va.

    ResponderEliminar
  76. hermano quiero consultarte haber si tu me puedes decir, porque las entradas de mi blog se ven de esta manera cada ves que publico una nueva entrada osea no se ven alineadas, te dejo mi pagina para que veas de que te hablo.

    http://dsl-iron10.blogspot.com/

    ResponderEliminar
  77. Busca esta parte:

    h2.date-header {(visibility:hidden;)
    margin:1.5em 0 .5em;
    visibility:hidden;
    }

    h2.date-header{margin:1.5em 0 .5em}

    Y cambia todo eso por esto:
    h2.date-header {display:none; margin:0;}

    ResponderEliminar
  78. gracias hermano por tu ayuda ya lo solucione..

    dios te bendiga..

    ResponderEliminar
  79. hermano otra consulta, fijate que en mi blog al entrar a un post los videos pasan por encima de la imagen que tengo en la cabeza de la pagina, no se que pueda ser talves tu conoscas algo sobre este problema si lo sabes hazmelo saber te lo agradecere.

    ResponderEliminar
  80. hermano fijate que no me aperecen las paginas enumeradas ya que en la pagina principal solo visualizo 5 entradas y tengo como 9 entradas y deberias de aparece la siguiente pagina con las demas entradas.

    ResponderEliminar
  81. Eso es por la autopaginación de Blogger, cuando son muchas entradas o es muy tardado el blog entonces Blogger reduce el número de entradas a mostrar en la portada, etiquetas y entradas antiguas.

    ResponderEliminar
  82. Hola de nuevo potro! Yo te estaba haciendo consultas por el coin slider pero al final me decidi por este. Te hago una consulta cortita cortita , no se si te podes pegar una vuelta por mi blog y fijarte que hay un pequeño borde a la izquierda del slider que no coincide con el borde de las entradas , es decir el slider esta a una altura y las entradas a otra. Es un detalle infimo pero me gustaria saber si sabes como lo puedo corregir.

    Mil disculpas por las molestias , sos un genio!

    ResponderEliminar
  83. Quizá es por los estilos de tu plantilla, tal vez agregando un poco más el contenedor y las imágenes se corrija pero sino entonces sí debe ser algún estilo que no permite que se ajuste como quieres.

    ResponderEliminar
  84. al igual q Osalinas me pasa el mismo problema
    con el slidera que se puede dever

    ResponderEliminar
  85. Recuerda que siempre que tengas un problema con el blog debes dejar la dirección del mismo, de lo contrario no puedo adivinar dónde lo has puesto y mucho menos saber dónde puede estar el problema.

    ResponderEliminar
  86. Hola!
    ¿Que pasa siempre que quiero poner algo en el blog?

    NUNCA QUEDA BIEN A LA 1° VEZ...
    Te explico...

    Las imágenes de ven una debajo de la otra, no se ocultan como deberían, y que luego se muestran cuando deben... NO!

    1° Descargué el archivo y lo copie en DropBox.

    2° Copié antes de head el código que correspondía.

    3° Volví a DropBox, le di botón derecho sobre el archivo 'Copy Pyblic Lick'

    4° Volví al script de antes de head y puse el link donde corresponde(por las dudas yo te lo dejo acá por si en mi caso no sé, está mal... http://dl.dropbox.com/u/14132616/jquery_cyrcle_plugin.js)

    5° Antes de ]]> pegué lo que correspondía y como aún no quiero hacer le cambios para personalizarlo LO ÚNICO que hice fue poner 500 en las dos veces donde corresponde para darle otro tamaño.

    6° Guardé y fui a Elemento de Página.

    7° Como sólo estoy viendo como quedaba desde mi carpeta de Dropbox y tomé 3 imágenes copie sus link y bueno los puse donde correspondía, incluyendo en las partes de las imágenes pequeñas...

    8° Guardé, refresqué mi Blog y.....

    SE VEIA FATAL!!!!!!!! HORRIBLE!!!!!!!!!!!!

    Entonces NO QUIERO SACARLO! ME GUSTA MUCHO =(

    Así que lo puse abajo de todo del blog para que lo veas y me digas que puede estar mal...

    AH! Antes te digo, tengo Dos menús funcionando podrás verlos ahí mismo y funcionan de maravilla... tal vez y el script de alguno de esos interfiere, no lo sé, no tengo conocimiento de esas cosas...

    Ojalá puedas darme una mano.

    Acá te dejo mi link

    http://missvariete-words.blogspot.com/


    (siempre acabo publicando comentarios mas largos que un testamento)

    ResponderEliminar
  87. Hola Miss Varieté,

    Quizá es un conflicto entre los scripts que usas o sus versiones de jQuery.
    Prueba quitando estas dos líneas (están por separado)

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

    Mira si así funciona, en caso de que sí funciona comprueba que tus otros trucos que usan jQuery sigan funcionando.

    ¡Saludos!

    ResponderEliminar
  88. OH! Eres un divino habiendo contestado tan rápido!
    Te cuento que sólo saqué la linea correspondiente al menú deslizante arriba del Blog. Porque so sacaba el de Sexy Drop Down no funcionaban las sub-pestañas.
    Gracias en verdad!!
    Ahoraaaaa... me pondré a editar las imágenes de los marcos de las imágenes pequeñas para que vallan a tono con el Blog.
    ¿Ya te dije lo lindo que eres al ayudarnos tanto?
    Besitos y Cariños desde Argentina ♥

    ResponderEliminar
  89. Gracias Miss Varieté, qué gusto que ya esté resuelto :)
    Besitos también para ti.

    ResponderEliminar
  90. Hola me llamo Rafael y me gustaria que alguiel me ayudara a encontar este template ya lo llebo viendo en varias web y no se como encontrarlo me gustria que alguiel de aqui me diga como encontralo o com se llama ese template aqui os enseño mla pagina en la que he visto este template que busco:

    http://narutoshippudencolombi.blogspot.com/
    http://narutoshippudenspain.blogspot.com/
    http://toditonarutoshippuden.blogspot.com/

    Y otra mas que ahora no me acuerdo porfavor que alguiel me pase este templante de esas web.

    ResponderEliminar
  91. La plantilla original se llama Revolution Church, la puedes encontrar en Btemplates.com

    ResponderEliminar
  92. buenas potro nesecito de tu ayuda lo puse todo como va pero las imágenes no se ven ni la miniaturas ni las grande párese como k el archivo no sirve o algo asi observa lo que te digo:

    http://parteatra1.blogspot.com/

    se le agradece por la atencion

    ResponderEliminar
  93. Parece haber un error en las imágenes, si las abres en tu navegador verás que aparece un error de Google. Prueba subirlas de nuevo y si continua el problema súbelas directo desde Picasaweb.
    También anda un poco lento hoy Dropbox así que igual ese podría ser un problema temporal para el slider (sólo con el funcionamiento, no con que las imágenes no se muestren).

    ResponderEliminar
  94. Hola El potro... de verdad muchas gracias por este post me ha sido de gran ayuda...pero tengo una pregunta, ya sabes como hacer que las entradas se publiquen solas? es que estar cambiando el codigo todos los días es un poco pesado, en especial si programo muchas entradas para estar despreocupado en los dias de semana... espero tu pronta respuesta...saludos..

    ResponderEliminar
  95. Con este no, pero en Pizcos.net hay un tutorial que hablan sobre ello, quizá quieras buscar ahí aunque el aspecto del slider es diferente. Saludos.

    ResponderEliminar
  96. Gracias por tu pronta respuesta El Potro... al final me decidi por hacer el mismo Trislider... pero no se porque el área de la descripción queda un poco más abajo que las miniaturas.. se que es muy poco, pero soy un poco quizquilloso...

    mi blog es www.disneyvacaciones.blogspot.com

    ResponderEliminar
  97. Busca esta parte del código:

    #featured-area .pics div.excerpt {
    background: #fff; /* Color de fondo de la descripción */
    bottom:0;

    Cambia ese 0 (cero) por 5px y con eso deberá solucionarse.
    Saludos.

    ResponderEliminar
  98. Muchas gracias El Potro quedo perfecto....

    ResponderEliminar
  99. hola, he agregado el tri slider, esta muy bueno....trabaja perfectamente..! pero me gustaria saber si podrias ayudarme en crear un slider que funcione usando el feed.. osea que carguen las imagenes y el texto de acuerdo a las últimas entradas (por ejemplo las últimas entradas de la categoria 'Portada'), entonces esas aparecerían en ese slider. trate de agregar. en esta direccion

    http://simplexdesign.blogspot.com/2009/11/make-slider-for-recent-posts-part-2.html

    hay un slider como el que quiero, trate de agregarlo pero no funciona.

    espero tu respuesta positiva, Saludos. Att: Alex

    ResponderEliminar
  100. Ese mismo que estás tratando de crear está explicado en Pizcos:
    http://www.pizcos.net/2010/07/slideshow-automatico-de-entradas-usando.html

    Saludos.

    ResponderEliminar
  101. Potro, he intentado tantas veces y no funciona... quizas tu puedas hacerlo funcionar y explicar los pasos... por que el de pizcos no funciona.. solo sale el blanco el cuadro. te lo agradeceria ..

    saludos

    Alex. este es mi blog http://www.enestelidtodos.com

    ResponderEliminar
  102. Por ahora no, quizá más adelante que tenga menos entradas pendientes. Saludos.

    ResponderEliminar
  103. Hola potro quería poreguntarte si la última parte del codigo :

    div id='gallery'

    Puede ponerse dentro de la plantilla ? para que no vaya en un gatget ? estoy tratando de que mi blgo cargue más rapido ya que tengo problemas de carga de mi página, puedes mirar y decirme que crees que puede ser que haga que mi blog cargue tan lento ? eh quitado un truco de Miur de entradas con etiquetas que creo que ese era el problema en m iblog, pero como eres un genio a lo mejor me recomeindas algo jeje saludo.

    ResponderEliminar
  104. Otra cosa que me olvidaba por decirlte potro es porque mi galeria al momento de reiniciar o volver al inicio del blgo ( donde solo tengo la galería para que se vea en la portada 9 se desplaza las imágenes hacia abajo no lo entiendo será por que modificque los tamaños de la galería para que ocupe todo mi blog creés que puede ser ese el problema?.
    El de DTODOS http://www.enestelidtodos.com

    eh visto que en su blgo no pasa eso por que ?

    ResponderEliminar
  105. La última parte da igual si la pones en el HTML o en un HTML/Javascript, de cualquier forma de ambas formas está dentro de la plantilla así que eso no aligera ni alenta el blog en nada.
    Sobre la carga no lo sé, puedes usar algún sitio online que mida la velocidad de carga de tu blog pues a veces es más nuestra propia conexión que la verdadera carga del blog.

    Aquello que ves que se baja y luego sube de nuevo es por el tiempo en el que tarda el blog en leer el script, como mientras carga aún no lo ha leído lo muestra "normal", ya una vez que lo lee lo sube a su lugar.
    Algunas veces se soluciona poniendo el primer código después de <head> pero en esos casos sí tiene que ver con el tiempo de carga del blog.

    ResponderEliminar
  106. Hola potro eso hecho de medir la velocidad de carga de mi blog en "Page Speed Online" me da una velocidad de 75 de 100, aunque me da alguna detalles para solucionar me pone esto:

    ( Se han detectado los siguientes bloqueos de secuencias de comandos en línea en http://carlangas24game.blogspot.com/ entre un archivo CSS externo y otro recurso. Para permitir la descarga en paralelo, mueva la secuencia de comandos en línea antes del archivo CSS externo o después del siguiente recurso. )

    Eh revisado el codigo pero no encuentro saber cual es el problema, me puedes ayudar por favor ? que estoy comenzando a volverme loco con esto, te lo voy agradecer mucho, te mando un jamon desde aquí españa jeje ayuda por fa :)

    ResponderEliminar
  107. Blogger agrega algunos códigos de CSS externos para algunos gadgets, quizá sean esos, o tal vez sea el archivo CSS de Lightbox que está externo en Dropbox y que puedes agregar directo en tu plantilla para que sea más rápido.

    ResponderEliminar
  108. Hola portro de nuevo yo :) y como puedo agregar el Lightbox directo a la plantilla ? me puedes decir los pasos por favor y te juro que ya no te molesto más que soy muy pesao jeje y estado poniendo el primer codigo de la galería después de head como dices tu y sigue igual ayudame por favor quiero que mi blog cargue rápido, saludos genio.

    ResponderEliminar
  109. Abre el archivo .CSS copia el contenido y pégalo antes de ]]></b:skin>

    Eso es para los estilos, en cuanto al script JS mira esta entrada que explica cómo alojar los scripts en la plantilla.
    Saludos.

    ResponderEliminar
  110. Hola potro ya lo hice como me as dicho pero sigue igual, la galería sigue desplazandoce hacia abajo y tarda en cargar la imágen que puedo hacer ?

    el archivo de la galeria donde dices copiar la URL y subirlo a un servidor lo tendo en dropbox eso lo puedo poner directamente en la plantilla ? que puedo hacer para mejorar mi blog ? ayuda por favor solo me importa la galería que no tarde en cargar.

    ResponderEliminar
  111. Sí puedes alojar ese script directo en la plantilla lo cual también siempre es benéfico para la rapidez de carga:
    http://ciudadblogger.com/2010/02/como-alojar-scripts-en-la-plantilla.html

    En unos días publicaré un tema sobre cómo mejorar la velocidad del blog.

    ResponderEliminar
  112. buenas potro esta muy bueno tu blog mira puse este menu que publicaste aqui
    http://ciudadblogger.com/2011/03/menu-horizontal-deslizante-con.html#comment-form
    y al poner este slider el menu pierde su efecto osea ya no se deslisan ni salen los sub menus
    nose que podra ser si me ayudas porfavor.

    ResponderEliminar
  113. Hola crisnoa, es que jQuery no es compatible con Scriptaculous. Si quieres usar los dos al mismo tiempo tendrás que usar un parche con jQuery:
    http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

    ResponderEliminar
  114. holaa una pregunta soy muy nueva en esto como subo el archivo a un hosting exactamente alguien me podria ayudar se los agradeceria mucho :)

    ResponderEliminar
  115. Hola natalia, mira esta o esta entrada, cualquiera de las dos podrá servirte.

    ResponderEliminar
  116. Gracias Potro ya me funcionan los 2 muy buenos y faciles de hacer tus tutoriales

    ResponderEliminar
  117. Qué bueno que ya está todo resuelto :)

    ResponderEliminar
  118. Hola potro...de verdad muchas gracias por este slider... ya lo modificque a mi gusto, si quieres hechale un vistazo y me dices que te parece... y si tienes algun consejo sobre el blog bienvenido sea...

    www.disneyvacaciones.blogspot.com

    ResponderEliminar
  119. Lo has personalizado bastante bien :)

    ResponderEliminar
  120. Buenas potro otravez molestandote lo que pasa es que agrege tu carrusel te acuerdas que tuve un problema de compatibilidad y lo solucione bueno lo que sucede es que ya diseñe las imagenes para ponerselas y las puse le cambie el titulo le puse su descripcion y no seve nada queda coo si no le hubiera modificado nada me podrias ayudar o decir que hice mal

    ResponderEliminar
  121. Hola de nuevo crisnoa, ¿me podrías decir dónde lo has puesto para que pueda verlo?

    ResponderEliminar
  122. Claro que si potro es este
    http://www.wegears.com/

    ResponderEliminar
  123. Si abres la URL del archivo que subiste verás que no abre el archivo, sino que abre la página de MediaFire para poder descargarlo.
    Necesitas subirlo a un hosting donde te den un link directo, como Dropbox, o Google Sites.

    ResponderEliminar
  124. Bien potro o soy bien piedra o soy bien piedra ya subi el archivo a Dropbox y cambi el enlace
    ahora donde agrego la imagen no sale la imagen y no sale ni titulo ni descripcion espero no sea mucha molestia

    ResponderEliminar
  125. Si el archivo lo subes desde la página de Dropbox, entonces haz click en la flechita que se encuentra del lado extremo derecho y en el submenú que aparece haz click en 'Copiar enlace público'. Esa es la URL que necesitas poner.
    Saludos.

    ResponderEliminar
  126. Estoy atorado, creo que el problema es el tamaño de las imagenes. Si no es mucho molestar, te podés dar una vuelta: http://leccionesdelsa.blogspot.com/

    Estoy remodelando el sitio de mi esposa que es discapacitada y ahora estoy empantanado. Encima mi profesor (mi hijo) está en el exterior y no me puede ayudar.

    Si me das una mano te lo voy a agradecer.
    Un abrazo

    ResponderEliminar
  127. Hola Selva,

    Cuando los archivos se suben a Dropbox deben ir dentro de la carpeta Public. Si no están ahí entonces no están subidos a la red.
    Ponlos dentro de esa carpeta para ver si eso lo soluciona, sino entonces vemos qué más aparte de eso puede estar afectando.

    Un abrazo.

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

    ResponderEliminar
  129. Todos los archivos que subas a Dropbox, incluyendo los scripts, deben ir dentro de esa carpeta, por eso sigue sin funcionar:
    [Cómo usar Dropbox]

    ¡Saludos!

    ResponderEliminar
  130. Tienes razón, hay que leer antes de molestar a la gente. Gracias por tu paciencia. Ya lo solucioné con otro script. Tiene algunos detalles pero los iré solucionando. Funciona bien en Firefox, muy bien en Chrome y mal en Explorer. En fin, detalles que iré corrigiendo.
    Mil gracias por tu tiempo.
    Seguiré visitando tu sitio porque es muy bueno.

    ResponderEliminar
  131. Hola, tengo un problema y es que cuando termino de diseñar y ubicar las cosas en su lugar las imágenes en grande me aparecen hacia abajo una detrás de la otra no comprimidas en el slider, y eso genera que me tape cosas de mi blog, tendré algo mal en la configuración?
    Desde ya muchas gracias!

    ResponderEliminar
  132. Selva, qué bueno que ya lo has resuelto, y en lo que pueda ayudarte ya sabes que para eso estamos ;)

    Emiliano, podrían ser varias causas, pero para estar seguro necesitaría ver el blog donde lo has puesto para darle una revisada. Saludos.

    ResponderEliminar
  133. potro te cuento que hice todo tal cual lo dice tu link pero no puedo ver las imagenes (que estan alojadas en dropbox) te paso la direccion del blog para ver si me podes dar una mano saludos, Sebastian
    www.mamuchabebes.com.ar

    ResponderEliminar
  134. ya solucione el problema muchas gracias por lo que nos enseñas, saludos!!

    ResponderEliminar
  135. Qué gusto que ya lo hayas resuelto Mamucha. ¡Saludos!

    ResponderEliminar
  136. Una pregunta como hago para agrandar la zona de las imagenes en miniatura? te paso la pagina para que lo veas. Saludos y desde ya muchas gracias.

    ResponderEliminar
  137. estimado potro: disculpame las consultas repetidas pero en el caso de mi ultima consulta respecto a como puedo modificar el area donde van las imagenes en miniaturas que me quedan desproporcionadas, estoy seguro que la respuesta a esto está en el codigo que vos pasaste pero como no se que significa cada cosa te sugiero (si es posible, no tengo idea) la elaboracion de un glosario con distintas lineas ej.; #featured-area { ---#featured-area .pics div.excerpt p { ---------#featured-area div#slider-control div.featitem img { para saber que es cada cosa y por ahi no molestarte Saludos, Sebastian www.mamuchabebes.com.ar

    ResponderEliminar
  138. Hola de nuevo,

    No es ninguna molestia, el problema es que nunca he modificado esa área pero podemos experimentar para aprender.
    Dentro del código de cada imagen en miniatura vienen las medidas de la imagen:
    width: 67px ; height: 67px ;

    Además de eso, en:
    #featured-area div#slider-control {
    se encuentra en ancho (width) y un alto (height) que también deberán cambiarse.

    Más abajo en:
    #featured-area div#slider-control div.featitem {
    También hay un ancho y alto, ese supongo que igual debe cambiarse.
    En este mismo apartado se encuentra la URL de una imagen, ese es el fondo de esa área por lo que si modificas las medidas también deberás editar la imagen para que tenga las medidas que quieres.

    Saludos.

    ResponderEliminar
  139. Muchas gracias por tu respuesta!!! Te hago otra pregunta se pueden poner 1 o mas gadgets de este tipo en un blog o es imposible y finalmente la ultima pregunta hay forma de que cuando no haya entradas en el blog no aparezca la frase "no hay ninguna entrada" y la frase Suscribirse a: Entradas (Atom) y finalmente donde dice pagina principal no se le puede cambiar por otra frase como "home" o la que uno puede definir? Saludos, y ,muchisimas gracias again

    ResponderEliminar
  140. No he intentado poner más de uno, pero además de lo complicado que podría ser se haría algo tardado el blog.
    Sobre las otras preguntas te dejo los enlaces correspondientes:
    http://ciudadblogger.com/2009/06/cambiar-o-eliminar-suscribirse-entradas.html
    http://ciudadblogger.com/2009/07/ocultareliminar-el-mensaje-mostrando.html
    http://ciudadblogger.com/2009/07/personalizar-los-links-entradas.html

    Saludos.

    ResponderEliminar
  141. Buenos dias potro, otra vez yo fastidiando jajaja, una pregunta...como hago para que el Trislider quede centrado??? porque he hecho todo lo que se me ocurre y lo que hago es destrozarlo jajaja

    ResponderEliminar
  142. Listo Potro ya lo consegui, disculpa las molestias

    ResponderEliminar
  143. No es ninguna molestia, qué bueno que ya lo has resuelto ;)

    ResponderEliminar
  144. Potro..falsa alarma :S ... te explico... en mi blog quiero colocar una imagen en el área del header, pero la quiero de fondo y no como la opcion de titulo que ofrece blogger, así que pense en colocar la imagen en la parte de ".header-outer {" hasta aqui todo fino, pero es que quiero que la imagen abarque todo el ancho del blog así que le coloqué "width: 2500px;
    margin:-45px 0 0 -150px;" pero entonces como yo tengo el Trislider en el header ( le coloque la opcion de varios gadgets en el header) el Trislider se me va a la izquierda, y quisiera saber si hay alguna forma de centrar solo el Slider sin que interfiera con el cambio de los margenes que le di a la imagen de fondo... espero que se entienda el problema..cualquier cosa escribeme...gracias...

    ResponderEliminar
  145. ¿Ya probaste encerrarlo entre <center> y </center>?
    ¿En cuál blog lo has puesto?

    ResponderEliminar
  146. Listo Potro ahora al parecer si pude hacerlo, pero no como tu me dijiste, sino que en la parte donde sale "
    #gallery {
    width:900px; /* Ancho del contenedor general */
    height:320px;
    margin:0 0 20px 170px;"

    modifiqué los margenes y listo...gracias de todas formas... mi blog es www.disneyvacaciones.blogspot.com pero aun no he hecho el cambio ya que estoy aun con el Photoshop de la imagen...

    ResponderEliminar
  147. No, pero te puedo dar la URL de cómo subirlo a Dropbox de una manera bastante sencilla:
    http://ciudadblogger.com/2010/04/como-usar-dropbox.html

    ResponderEliminar
  148. Potro otra vez necesito ayuda :O estuve probando este slider pero no me aparecen las imagenes, las tengo alojadas en Picasa, tal vez ese sea el problema no???

    este es el blog donde lo estoy probando para el diseño de mi nueva plantilla

    http://diseniadorplantillas.blogspot.com/

    ResponderEliminar
  149. Pues ese parece ser el problema, si abres la URL de una de esas imágenes verás que dice que la imagen no existe.
    Prueba obtener de nuevo la URL de las imágenes, sino se arregla súbelas de nuevo:
    http://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html

    ResponderEliminar
  150. Pero las he copiado como siempre lo hago, de todas formas volvere a intentarlo.

    Otra cosa que estuve probando los enlaces y excepto con el de google me aparece la dirección del blog y despues de eso la url dando como resultado que la página no exista.
    Gracias por tu ayuda Potro de verdad que no se que hariamos sin tanta ayuda tuya todas formas volvere a intentarlo.

    Otra cosa que estuve probando los enlaces y excepto con el de google me aparece la dirección del blog y despues de eso la url dando como resultado que la página no exista.
    Gracias por tu ayuda Potro de verdad que no se que hariamos sin tanta ayuda tuya

    ResponderEliminar
  151. Que todo salga bien Kron. Igual verifica que no hayas modificado los permisos del álbum de Picasa, si todo está bien entonces de nuevo Picasa debe andar fallando.

    ResponderEliminar
  152. Las movi a Imagechack y el Slider ya funciona correctamente, creo que tiene que ver con Picasa, gracias por la ayuda Potro

    ResponderEliminar
  153. me pregunto si hay alguna manera de que este tipo de slider se configuren para mostrar las ultimas entradas en ves de una imagen predeterminada.

    sabés si se puede hacer eso?

    ResponderEliminar
  154. Con este no, pero en Pizcos.net alguna vez vi uno que sí era automático.

    ResponderEliminar
  155. si ya sé. pero el de pizcos no me funciona.
    puede ser que cuando hay dos script de jQuery funcionen mal??


    siempre tengo problemas con esa libreria. no se si la uso mal o cual es el problema.

    ResponderEliminar
  156. Algunas veces puede ser que aun entre scripts de jQuery no sean compatibles porque unos requieren una versión y otros otra. Pero la mayoría de las veces el problema está en que agregamos varias veces el script base de jQuery en sus distintas versiones.
    Por ejemplo, el de esta entrada es:
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>

    Esa es la última versión actual, así que si tienes otras líneas como esa o de versiones anteriores debes eliminarlas. Usualmente haciendo eso se resuelve el problema.

    ResponderEliminar
  157. Hola disculpa las molestias me podes decir como hago para que este aparesca solamente cuando entro al blog y no en todas las entradas...

    Www.SomosAldosivi.Com.Ar

    si podes entra y fijate lo que te estoy diciendo a ver si me entendes jejeje muchas gracias me sirvio muchisimo...

    ResponderEliminar
  158. Hola Somos Aldosivi,

    Mira esta entrada, ahí se explica cómo harías para que se oculte en todas partes del blog menos en la portada:
    http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

    Saludos!

    ResponderEliminar
  159. Hola amigo muy bueno el slide, tengo una pregunta, me funciono perfecto, pero quiero que solo salga en la pagina principal y no en las entradas (estoy usando un gadget html) se agradece mucho tu trabajo.

    ResponderEliminar
  160. Hola Edxz101, mira el comentario anterior al tuyo. Saludos.

    ResponderEliminar
  161. ola potro gracias por el tutorial, segui todos los pasos pero al momento de añadir un gadged no se donde para que quede al centro de mi blog

    foto de elemtos de pagina http://i.imgur.com/8h194.jpg

    foto portada del blog http://i.imgur.com/zWNn8.jpg

    ResponderEliminar
  162. http://team-comparte.blogspot.com/

    te dejo url de mi blog !!

    Gracias

    ResponderEliminar
  163. Hola GatozZ!,

    Al centro no creo que se pueda porque la estructura de tu plantilla no te lo permite. Puedes arrastrarlo a otras áreas que sean aptas para agregar gadgets, pero eso depende del diseño de cada plantilla.

    Saludos.

    ResponderEliminar
  164. Hola Potro, gracias por mantener un sitio tan informativo para los que apenas nos iniciamos en esto del blog. He intentado llevar a cabo este slider y el problema es que me da un resultado distinto al ejemplo que muestras, ojala puedas ver el sitio y me puedas auxiliar:

    http://omarpagina.blogspot.com/

    Saludos cordiales

    ResponderEliminar
  165. Hola,

    Muchas gracias por tu amable comentario.
    El dilema es causado por uno de los problemas más recurrentes al agregar los estilos.

    Arriba de esos estilos CSS has eliminado una llave de cierre del código que le antecede.
    Lo tienes así:

    .BotonesSociales img {
    vertical-align:middle;
    border:0;
    /* Fin seccion botones sociales */
    /* -----------TriSlider------------ */


    Y debe ser así:

    .BotonesSociales img {
    vertical-align:middle;
    border:0;
    }
    /* Fin seccion botones sociales */
    /* -----------TriSlider------------ */

    Saludos.

    ResponderEliminar
  166. Hola Potro, me podrias decir las medidas como el tuyo para que entre en una entrada? esque no lo consigo xD Muchas gracias por tu aporte Genial!

    ResponderEliminar
  167. Hola Li3, las imágenes de ejemplo que yo tengo son exactamente de la misma medida que aparece en el último código, de 490px por 298px

    ResponderEliminar
  168. Maestro:

    El slide me funciona pero la barra de la descripcion se me pone arriba de la imagen principal..tiene idea de que puede ocurrir?

    No le envio imagenes porque no quise aceptar los cambios...eso si, funciona todo lo demás.
    Ojalá me pueda ayudar

    Saludos desde Chile !

    atte.
    Rodrigo
    www.lucesysombras.cl

    ResponderEliminar
  169. Ah un detalle, me ocurre el problema al intentar instalarlo con Mozilla, con Google Chrome no hay problema..que pasó ? Mozilla se une al club de los problematicos con Explorer ?

    Saludos desde Chile !

    atte.
    Rodrigo
    www.lucesysombras.cl

    ResponderEliminar
  170. Hola Rodrigo,

    Necesitaría velo puesto para ver qué podría estar sucediendo. Usualmente si se ve bien en Chrome se ve bien en FF, pero con los navegadores ya no se sabe.

    Saludos.

    ResponderEliminar
  171. Gracias Potro, finalmente he desistido de usarlo en ese blog, pero si tomé el Sexy Drown Menú, asi es que a través de esa entrada te molesto con otra duda.

    Abrazos desde Chile !

    ResponderEliminar
  172. oye me puedes decir como le ago para que solo se muestre en la portada del blog y que no salga en los post por favor ?? muchas gracias

    ResponderEliminar
  173. Mira esta entrada, ahí verás cómo hacer para que se muestre solo en la portada:
    http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

    ResponderEliminar
  174. gracias ya quedo. oye al tener el slide tiene algun problema mi menu ya que no se ve todos los sub-menus aqui te dejo una imagen para que me entiendas mejor :

    http://4.bp.blogspot.com/-aUGDebsrq2M/TnUTze-TSfI/AAAAAAAAI04/2aEb4duTdfM/s1600/Sin%2Bt%25C3%25ADtulo-x4.png

    y asi se veia antes de ponerle en slide

    http://2.bp.blogspot.com/-TgHsT4dRjl0/TnUTzOXGTDI/AAAAAAAAI0w/9GKLpUEnyG0/s1600/Sin%2Bt%25C3%25ADtulo-4.png

    solo me ocurre ese problema en la portada del blog ya que cuando entro a un post ya se ve bien sabes cual es el problema? Tambien te dejo mi blog por si lo necesitas para ver mejor el problema:
    http://blogdepruebas008.blogspot.com/

    Gracias

    ResponderEliminar
  175. Hola Potro ! es la primera vez que uso tu pagina ! la verdad muy buena déjame felicitarte.. :) y mi consulta es la siguiente las imágenes que debería de aparecer me salen rotas ! :/
    Les agregue las Url de cada imagen en el lugar donde te dan las opciones de cambiar pero no me sale ninguna imagen... Desde ya gracias !! Saludos!!

    ResponderEliminar
  176. Hola erick,

    Busca esta parte del código de tu menú:
    #menu-superior ul.submenu {

    Debajo agrega esto:
    z-index:900 !important;

    ResponderEliminar
  177. Hola Sally^^,

    ¡Bienvenida a Ciudad Blogger!
    Necesitaría saber el blog donde estás teniendo el problema para ver las URLs que estás poniendo. Pero por si las dudas te dejo un enlace para que veas cómo conseguir correctamente las URLs de las imágenes:
    http://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html

    Saludos.

    ResponderEliminar
  178. Muchas Gracias Potro ya quedo encerio muchas gracias por la ayuda

    ResponderEliminar
  179. Muy bueno, pero alguien sabe como poner este Slider que aparece en el siguiente blog http://www.curiosohotel.com

    ResponderEliminar
  180. Ese está hecho con flash, por lo que quien lo ponga debe saber de programación en flash.

    ResponderEliminar
  181. Buenas!!!!!!!

    Una consulta, es posible que no funcionen teniendo en la misma plantilla este slider y otro que presentaste en otra entrada??

    Si pongo los dos no me andan.. Es solo para sacarme la duda y ver cual dejo..

    Gracias Totales!!!!!!!

    ResponderEliminar
  182. Hola Marcos,

    Sí es posible que no funcionen ambos, puede ser por incompatibilidad de scripts, o porque aun siendo el mismo script (en este caso jQuery) se tengan versiones diferentes del mismo script. Justo de eso trata la próxima entrada que publicaré, sobre cómo solucionar esos problemas.
    Por lo pronto necesitaría saber en cuál blog tienes el problema, y cuál es el otro slider que tienes puesto.

    Saludos.

    ResponderEliminar
  183. Hola! Tengo un problema con el codigo. Te dejo la direccion para que me puedas guiar un poco.
    Muchas gracias.
    Salu2

    ResponderEliminar
  184. Hola Juplagon,

    ¿Qué problema tienes con el código y cuál es la dirección del blog donde lo has puesto?

    Saludos.

    ResponderEliminar
  185. Hola. Se me olvido poner la direccion. http://www.turadioesfera.blogspot.com/
    El codigo deberia estar en medio y a los lados los gadgets, pero el problema es que el codigo sale 3 veces!
    Saludos.

    ResponderEliminar
  186. Hola de nuevo Juplagon,

    Lo que pasa es que también usas Scriptaculous, un script que no es compatible con jQuery (el que se usa para este slider). Si quieres usar ambos al mismo tiempo tendrías que parchar el script de jQuery:
    http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

    ResponderEliminar
  187. Muchas gracias por la respuesta. Por desgracia no he podido conseguir nada y ahora el blog se ha movido de lado y no consigo ponerlo en su sitio.
    Saludos.

    ResponderEliminar
  188. Eso es por alguna otra modificación que hiciste, sólo recuerda que fue lo último que modificaste antes de que quedara de esa forma, o sino has hecho muchos cambios reinstala la plantilla.

    ResponderEliminar
  189. ¿Las imágenes de post relacionados se actualizan autmaticamente? o ¿debo hacer el mismo proceso con cada post de pegar código de imagen y Url cada vez que vaya a publicar un post?

    ResponderEliminar
  190. Debes hacerlo cada vez que quieras mostrar algo en el slider. Por ahora ninguno de los sliders que he publicado actualizan la información automáticamente.

    ResponderEliminar
  191. hola lo ise igual a como dijiste pero no me funcionaba bien, tube que ir a la direccion del ejemplo donde vinculas al archivo fuente y extraje de ay los codigos y funciono, checalo para la banda en que cometi yo mi error al programar tus pasos o realmente ay un error en tu publicacion! saludos

    ResponderEliminar
  192. Hola Unknown,

    La mayoría ha tenido éxito al hacer el slider y han seguido los pasos de la entrada. Sin haber visto puesto tu slider no sabría decirte dónde estaba el error, pero pudo ser el hosting donde subiste el archivo.

    Saludos.

    ResponderEliminar
  193. A mi me quedo separado no sé porque, o sea, las imágenes no se muestran en el mismo espacio.
    Acá se puede ver:
    http://prueba2-florencia.blogspot.com/

    (Las cosas raras de arriba son otros sliders que no me funcionaron, no les prestes atención xD)

    ResponderEliminar
  194. Hola Florencia,

    Recuerda que después de que descargues el archivo debes descomprimirlo, ese archivo que descomprimas es el que debes subir al hosting.

    Saludos.

    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