Aunque S3Slider es un slideshow que funciona muy bien y ha tenido buena aceptación, son muchos quienes desean que este gadget cuente con flechas de desplazamiento para poder navegar por las imágenes de forma más inmediata.
Un slideshow que permite hacer eso es Orbit, que funciona a base de jQuery y muestra las imágenes con flechas de navegación. Pero además, en la parte superior izquierda indica cuál es la imagen que se está viendo, y del lado superior derecho un control de pausa e indicador del tiempo entre cada foto.
Una de las ventajas que me gusta de este slider es que el script cuenta con una versión corta, por lo que podremos colocar el script directo en la plantilla y así nos evitaremos colgarnos de un hosting.
Para empezar vamos a colocar los scripts que son lo que harán que funcione, así que vamos a Diseño | Edición de HTML y antes de </head> pegamos lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>Ahora es turno de los estilos, así que antes de ]]></b:skin> pegamos esto:
<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->
<script type='text/javascript'>
$(window).load(function() {
$('#featured').orbit({
advanceSpeed: 5000,
'bullets': true,
'timer' : true,
'animation' : 'horizontal-slide'
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>
/* ORBIT SLIDERYa por último usaremos el código que mostrará las imágenes, así que en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript pegamos este código:
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}
div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}
div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}
span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_IEK_xbju75PiEt-Vn_jVrEj0-B8ADGmaF7BYlwDTSwyKaksXEFNp6_HyFtq6ewr13WrdqvEwbRYpCeizqKs-6j3YTN_gQDQArteaacNko62aVeREFz0DeaoY_x0n3Gh4ln9hKi_lgLoA/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}
span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}
span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnkQQRK2nbcuQ91_WDz2b5QY-sz5FZ-6ChM1lN-xd-bZxgpumWP0wqQTlf__iar5MKNFpYUaEkQUyaZ0t2YGfIVMHKSxKW2JB-yDQLPAsbCdn1tO7qkuyKSMFhm0JuLIFQS48RG8xqZI86/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}
span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyn2E0XSceq6R8DCxS5ds1ymgjVoTJb7sxMDZKGqJBajQe280PZRhVU14vrXSCVhvvQuXBvPpAT0zAIsbdpjlmZx53R1QqSs0Wuav8pQCTooLkfaNoB4kg9SpmGMhLdAW8681EKT4N_4a/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}
div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }
div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}
div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }
div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}
div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPDiq4PTWkoulzhGrSogTJLduDTfrZ_XTGuFF_HdOEfwRlfpa9P29HVWHD-nY9kWckKktywMDJNEeKiriYd5_EWoz3tBX3vhszdc9yyN03OewSjyLyQzXJzzng0DoeRZx149vThBvnEzW5/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHhBdWwkj7pPKscV-GENgKr5b3AC733XeqNKWYOj43NAPg0ErD-xlAleZc-4-Yr83QEmPKLJFoYQ9sxG5wbNuL4vIpVSjyHv7r9IgLSjXxORgUemLzPNbwNJGQZ3L32IabkM3wrbyuEzOm/s1600/left-arrow.png);
left: 10px;
}
.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}
.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnNaWrXsYvGwrUPQBsM8YqmKDjT6LktUPFGsdwh8IPYVZbZeca0PMvZ-3APO7iO0NmX3cC99ZmRNKAL5qLDIaAnNeLhoLFXlwT7SfXeJ7CtvvCUbIAMge2yJHJ5LT7hVVV93DvQyxivOrU/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: #222; background-position: -7px 0; }
<div id='featured'>Esta última parte es la que contiene las imágenes, los enlaces y los textos descriptivos de cada imagen.
<a href='URL del enlace'><img rel='foto1' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius augue sit amet magna condimentum dictum.</span>
<a href="URL del enlace"><img rel='foto2' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto2'>Este es un ejemplo de la descripción con enlaces: <a href='URL del enlace' style='color: #fff';'>Ciudad Blogger</a></span>
<a href="URL del enlace"><img rel='foto3' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto3' style='text-align:center;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius augue sit amet magna condimentum dictum.</span>
<a href='URL del enlace'><img rel='foto4' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto4'>Este es un ejemplo de la descripción con enlaces: <a href='URL del enlace' style='color: #fff';'>Ciudad Blogger</a></span>
</div>
Lo que está en color rojo son las URLs de los enlaces y de las imágenes.
Dentro de cada código de imagen están especificadas las medidas que tendrá cada imagen, pero puedes modificar esos tamaños a tu gusto, eso se hace en width (ancho) y height (alto), recuerda que todas las fotos deben tener el mismo tamaño especificado.
Lo que está en color verde es el texto descriptivo de cada imagen.
Pero atención, no basta con poner el texto descriptivo para que éste aparezca, sino que, cada descripción tiene un identificador (id), éste identificador debe ser único. Para que el texto descriptivo aparezca deberá ponerse dentro del código de la imagen el atributo rel + el nombre del identificador.
Por ejemplo, en el texto descriptivo de la primera imagen aparece su id que es, id="foto1" y dentro del código de la imagen aparece el atributo rel con el nombre del id, o sea, rel="foto1"
Como ves no es nada complicado, sólo hay que ponerle un poco de atención a las descripciones de las imágenes, pero fuera de eso será un slider sencillo de utilizar.
Y bueno, aunque está probado en todos los navegadores y en Internet Explorer funciona, el control de pausa no se muestra en ese navegador por los fallos que tiene, de igual modo es posible que el desplazamiento entre cada imagen no se vea con un efecto tan suave como se vería con otro navegador de mayor calidad como Mozilla Firefox o Chrome.
ACTUALIZACIÓN: En el primer código, en la línea azul advanceSpeed: 5000, se puede modificar la velocidad de las transiciones entre cada imagen, un número más alto hará que las imágenes tarden más tiempo entre cada transición.
Si lo prefieres puedes descargar el script y subirlo a un alojamiento en caso de que no quieras tenerlo directo en tu plantilla.
Enlace | Descargar script
ACTUALIZACIÓN: En el primer código, en la línea azul advanceSpeed: 5000, se puede modificar la velocidad de las transiciones entre cada imagen, un número más alto hará que las imágenes tarden más tiempo entre cada transición.
Si lo prefieres puedes descargar el script y subirlo a un alojamiento en caso de que no quieras tenerlo directo en tu plantilla.
Enlace | Descargar script
Soy la 1° jijijiji
ResponderEliminarEstá Genial! De verdad me gusta mucho, es más estilizado y "profesional" que los slider que se pueden hacer con Slide.com (aunque la FunPix me gusta mucho ^^)
Gracias por traer siempre algo Nuevo!
Besitos ♥
Oh, me olvidaba.
ResponderEliminarQuería saber si me podrías decir, si en laguna entrada que hallas hecho está el modo de poner esto.
http://i55.tinypic.com/1z3w6f8.jpg
Es que quiero ponerlo en un viejo y un nuevo Blog....
pero tengo la duda si en el viejo va a contar a partir desde que lo "instale" o "recolectará la información" del blog contando desde la fecha de la 1° publicación, lo mismo que con la cantidad de las entradas y todos los review.
Sé que soy una pesada, pero quiero mejorar mis Blogs ^^
Besitos ♥
En esta entrada se explica cómo poner ese gadget.
ResponderEliminarLa información la recolectará desde el feed así que no importa si lo pones hoy o mañana, tomará los datos que ya existan.
Y no eres nada pesada, por el contrario, siempre es un gusto leerte por aquí ;)
¡Besos!
wooo, esta la raja.... Saludos y mil gracias
ResponderEliminargracias potro, debemos pedir que IE se jubile!!!!!
ResponderEliminarGracias por este slider Potro, es justo lo que andaba buscando y te pedía en otro post.
ResponderEliminarSólo tengo una duda, ¿el código te permite poner más de 4 fotos o es el máximo?
Ola :D quisiera que me ayudaras en algo que no tiene nada que ver con el tema de este post, pero quisiera que me ayudaras a decirme como hago para ponerle texto a un banner en alta calidad, esque tengo mi sitio que es este http://bit.ly/a24d57 pero la imagen del header se ve muy mal :( no me gusta y he pasado dias enteros investigando como hacer para que mi header se vea en buena calidad y no en mala calidad como la que se ve ahorita en mi blog. Te agradeceria mil veces si me ayudas potro!
ResponderEliminarY buen post, este slide tambien lo ponre en mi blog, me encanta eres un genio :D
att Ulisses
Este comentario ha sido eliminado por el autor.
ResponderEliminarNo se puede configurar el tamaño del Slider?
ResponderEliminarMCarlitooH2, esa de la raja no me la sabía, la agregaré al diccionario chileno :D
ResponderEliminarnEjO, dime dónde firmo la solicitud, porque ¡urge!
Make-up by Maryland, no, puedes agregar las imágenes que desees, no hay problema por eso ;)
ulises, el tamaño que tendrá será el que tengan tus imágenes, ahí se menciona cómo cambiar este tamaño de las imágenes.
Ya me contesto yo sola, he añadido el Slider en mi blog y de momento he añadido 5 imagenes, además he quitado el contador de tiempo y los puntitos que me incordiaban.
ResponderEliminarGracias una vez más por este gadget, es lo que andaba buscando desde hace mucho tiempo.
Es un kilómetro de códigos, pero vale la pena.
ResponderEliminarEs muy visual.
GRacias por compartirlo.
Muy bueno
ResponderEliminarla plantilla que he colocado para Curiosidades del Mundo esta muy bien, pero me causo problemas mientras la instale
por que no queria jalar hasta que encontre como
Oh eres un Divino!
ResponderEliminarMuchísimas Gracias por responder SIEMPRE!
Besitos ♥
Adrián J. Messina, pues también está la opción de usar los scripts alojándolos en un hosting pero sería más lento para el blog.
ResponderEliminarAlexG, estrenando plantilla ¡eh! Te ha quedado muy bien :)
¡Hola Potro, que tal!
ResponderEliminarDe nuevo estoy por aquí. Ya veo que no paras.
Este es un truco estupendo, creo que lo voy a poner.
Una preguntilla... ¿Se puede modificar la velocidad con que cambian las imágenes.
Venga hasta otra.
Un cordial saludo.
potro quisiera saber como se hace para poner una imagen de entrada en tu blog osea que cuando entren en tu blog aparesca una imagen como de bienbenida y vos la apretas y te mande a tu blog
ResponderEliminardesde ya GRAXX
Yo de Nuevo... =(
ResponderEliminarUn Problema Grande y aunque me digas que No, Blogger me ODIA! Lo que te pregunté en el Comentario 2 (soy yo obviamente) sólo me registra los días de vida....
Yo tengo un Gadget de los Últimos Comentarios... Eso puedo interferir con este Nuevo Gadget?
Porque la verdad, que mala onda Blogger que no me deja hacer esto... ¬¬
Besitos ♥
duque71, claro, en el primer código he agregado una línea en color azul, agrégasela a tu código, es ahí donde puedes controlar la velocidad de las imágenes, con un número más alto tardarán más las imágenes.
ResponderEliminarsomos todos menos algunos, no tengo una entrada sobre ese tema, en Oloblogger tienen una entrada sobre ello:
http://oloblogger.blogspot.com/2010/02/otra-pantalla-de-presentacion-facil.html
Miss Darcy, es posible que sí haya otro script que esté interfiriendo con este, pues acabo de probar el código que tienes y ha funcionado sin ningún problema :\
No es mi primera visita en ciudad blogger, pero si mi primer comentario, asi que me gustaria saber si el scrip se pone como siempre....
ResponderEliminarhaciendo un llamado en el html?
ey otra cosita potro como pusiste ese gadget del slider dentro de una entrada
ResponderEliminarPotro espectacular!!! Sin palabras!!! Muy pero muy bueno...
ResponderEliminarMuchas gracias ya lo tengo funcionando en un nuevo proyecto.
Abrazo
Hola Sergio Molina,
ResponderEliminarBienvenido pues a los comentarios :D
Si decides alojar el script en un hosting entonces el código sería como siempre:
<script src='URL del script' type='text/javascript' />
El ejemplo que he puesto es un iframe, no he probado cómo queda el gadget dentro de una entrada, supongo que igual debe funcionar aunque es posible que pueda no verse tan bien por aquello de los estilos de las entradas.
Hola Francisco,
ResponderEliminarIgual a mí me ha gustado mucho, me parece más atractivo que los otros que hemos visto.
Seguro te ha quedado muy bien en el blog :)
Abrazos.
Si de una, es mas llamativo!! Realmente queda muy bien, y a mi me quedó muy bien, cdo termine la página te aviso así te das una vuelta!
ResponderEliminarAbrazo
oh oh muuuuchas gracias potro llevaba tiempo buscando uno asi lo vi en muchas paginas de ayuda pro no m convencieron gracias esta genial
ResponderEliminargracias potro ya lo puse en el blog espero que lo veas gracias por la informacion.
ResponderEliminarPS: leo tus tutoriales a diarios son Geniales!!
:)
Potro y entonces para cada entrada que hago acumular elementos con las fotos¡¡
ResponderEliminarMichelle Jacqueline, qué bueno que ha sido de tu agrado :)
ResponderEliminarSergio Molina, te ha quedado muy bien, y gracias por leerme!
Javier, no he entendido :(
Buenas de nuevo, veras, al colocar el Slider se me ha anulado el efecto deslizante de las flechas "Ir arriba" e "Ir abajo" y al entrar en el blog se ven las 4 imágenes primero a lo largo, y cuando termina de cargar se pliegan en el slider, ¿esos es normal?
ResponderEliminarOye perdona si te molesto mucho, soy un poco tope.Sorry
Chao
No tardaré mucho en volver si no te importa.
Lo que sucede es que este slider trabaja con jQuery y esa librería de scripts es incompatible con Scriptaculous y Prototype que son las que se usan para el efecto deslizante.
ResponderEliminarRelamente este Slider me encanta no necesitas cambiar el tamaño de las imagenes; muchas gracias Potro
ResponderEliminarQué bueno que te ha gustado ;)
ResponderEliminarHola Potro por favor puedes ayudarme, no entiendo nada sbre esto..
ResponderEliminarGRACIAS AMIGO
¿Qué ayuda necesitas?
ResponderEliminarhttp://innerfade.blogspot.com/2010/10/orbit-slider-de-imagenes-con-jquery.html
ResponderEliminarNo me sale ??
¿Exactamente qué no te sale? ¿en cuál blog?
ResponderEliminarHola El Potro.
ResponderEliminarQuería agradecerle primero el haber creado esta sensacional página de ayuda, pues para gente como yo que recien empieza con los blogs es de inmensa ayuda, y segundo agradecerle que nos traiga este buen slider.
Sólo tengo una pequeña duda, ya he instalado el slider correctamente en el blog siguiendo al milímetro sus pasos, pero comparando el que acabo de instalar con el ejemplo de esta entrada me he dado cuenta de que en el ejemplo aparecen cuatro puntos y en el mio son ocho cuatro de azules y cuatro de negros, me refiero a los puntitos que marcan las entradas. Me gustaría saber si lo he instalado bien o por el contrário está mal, si entrara en mi blog lo podría ver mejor a que me refiero, espero haberme explicado bien, perdón por el párrafo tan largo y por la ignorancia y muchas gracias.
Potro@ Antes que nada felicitarte por el post. Hacía muchísimo que buscaba un slide que pudiera alojar en mi código y retocar a mi antojo, este me ha encantado.
ResponderEliminarEso sí tengo un problemilla que no se si es cuestión de el propio slide o de los hacks anteriores de mi plantilla.
El caso es que al abrir mi blog se ven todas las imágenes del slide una a continuación de la otra y casi al instante adoptan su aspecto "normal" (superpuestas), pero me gustaría saber si puede corregirse. ¿Tienes alguna idea de que podría ser? Te dejo el enlace por si tuvieras tiempo de echarle un vistazo al problema:
http://anothergames.blogspot.com/
Gracias por ayudarme a costruir un buen blog.
Bernardo Elías, parece que es por un conflicto con los estilos de la sidebar de tu plantilla. Si arrastras el gadget arriba de las entradas del blog verás que no tendrás ese problema. Gracias por tus amables comentarios :)
ResponderEliminarArk, es por el tiempo que tarda en cargar tu blog. Puedes poner el primer código después de <head> para que se lea más rápido. Saludos y gracias a ti por tu visita!
Que velocidad en contestar....
ResponderEliminarPues dicho y hecho, he subido el codigo por encima de head y si bien no soluciona el problema, hace que tarde menos tiempo.
Me ha gustado mucho este slide y creeme que hace tiempo que buscaba uno. Ahora ya solo tengo que tunearlo para que haga juego con el resto de la página.
No te lo digo por darte coba, yo me he esforzado mucho en el diseño del blog, pero sin ayuda no haría nada de nada.
GRACIAS.
Hola de nuevo El Potro, pues aunque tenga ese conflicto no es perjudicial para el blog si lo dejo en la sidebar ¿no? ¿es mejor si los elimino? y si los elimino ¿como puedo hacerlo? perdón por liarle tanto.
ResponderEliminarPues si deseas que no aparezca busca este código y elmina lo que está en negrita:
ResponderEliminar.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhLtWyUXI/AAAAAAAAAaU/8MQ8LP5flS8/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
Saludos.
Ark, estoy seguro que te quedará muy bien ;)
ResponderEliminarMe ha ido estupendamente, infinitas gracias El Potro. Sin abusar más de tú conocimiento si me permites que te tutee, me gustaría saber si puedo poner dos Sider más en el mismo blog, pués tengo vários blogs más y me gustaría poner en estos Slides imágenes que den enlace a sus rspectivas entradas. Gracias por tu paciencia para conmigo y por tu gran ayuda.
ResponderEliminarUn saludo.
Y pensar que tuve que "dar vuelta a la red" para conseguir una plantilla con Slider como la de Cyber jajajajajaja... Está fantástico Bro... ademas ese "contador" (punto azul) que muestra en que imagen se encuentra y ese "reloj" de arriba a la izquierda, le dan dan un aspecto muy profesional.
ResponderEliminarQue raro que en el mejor navegador del mundo no funcione bien... es raro... debe ser la primera vez que lo escucho XD
un abrazo!!
Un abrazo!!!
Bernardo Elías, de ser posible, es posible, pero es un poco trabajoso ya que tienes que cambiarle el nombre de todos los contenedores :\
ResponderEliminarbro, yo estoy más más sorprendido aun, es casi casi un shock para mí que IE no funcione bien XD
Sos grande!!! :) Lo he puesto en mi página web. Gracias a ti estoy haciendo cada día mejor mi blog! Deberías merecerte el nobel jeje.
ResponderEliminarUna pregunta; he puesto el slide en lugar de la cabecera...¿Cómo puedo hacer para centrarlo? Me gustaría probar y que el gadget saliera centrado y no a la izquierda...se puede hacer? Gracias!
GRACIAS...AL FIN LO ENCONTRÉ...LOS INVITO A VISITAR MI BLOG... www.culturaysociedad.tk
ResponderEliminarJaime Saga, trata encerrándolo entre <center> y </center>
ResponderEliminarA ver para cuando sacan un nobel en la categoría Blogger :P
Hola El Potro.
ResponderEliminarUff, pues si que se ve bien complicado, la verdad que me gustaría poner algo parecido que me hiciese esa función que te comentaba ¿sabes de algo parecido a un slide que me haga una función parecida? si no ya si que me conformaría, gracias por todo.
Un abrazo.
Antes que nada y sin importar si me vas a responder la pregunta o no, quiero felicitarte por la gran ayuda que nos das a los que no sabemos mucho de esto. Leo diariamente tus posts ya que esta en mi lector de feeds.
ResponderEliminarSegui al pie de la letra el tutorial y no me funciono. Lei los comentarios y a todos les ha ido bien.
Subi el codigo en mi blog, en la URL http://www.fabiansigona.com/2008/11/lorem-ipsum-dolor-sit-amet-consectetur.html y no me anda. Tengo el nuevo formato de templates de blogger.
El tuto lo segui al pie de la letra, igualmente te dejo los codigos que puse (pongo los tags con espacios porque sino no me deja publicar el comentario):
[*] Antes de ]]>: http://pastebin.com/KvmMfjZf
[*] Antes de : http://pastebin.com/iFhiD9TV
[*] Codigo en la entrada: http://pastebin.com/fjhtNBeH
Desde ya muchas gracias por tomarte el tiempo de leer mi inquietud!
Hola Bernardo Elías,
ResponderEliminarYa con un poco más de tiempo pude ver a detalle cómo podrías tener otro slider en el mismo blog sin tener que hacer muchos cambios.
Sólo busca esta parte del código:
<script type='text/javascript'>
$(window).load(function() {
$('#featured').orbit({
'bullets': true,
'timer' : true,
'animation' : 'horizontal-slide'
});
});
</script>
Y debajo agrega esto:
<script type='text/javascript'>
$(window).load(function() {
$('#featured2').orbit({
'bullets': true,
'timer' : true,
'animation' : 'horizontal-slide'
});
});
</script>
Ahora en el último código que es donde van las imágenes, en lugar de poner esta primera línea:
<div id='featured'>
Pondrás esta otra en el segundo slider que quieres:
<div id='featured2'>
Con eso podrás tener dos sliders distintos en el mismo blog.
Saludos.
Hola pcastagnaro,
ResponderEliminarPosiblemente es porque tienes otra versión de jQuery dentro de la misma plantilla, sino me equivoco es para un menú que quisiste instalar.
Dicho script y que debes eliminar es el siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>
Prueba eliminarlo y ver si con eso funciona.
Saludos y gracias por tus comentarios.
hola a todos por favor les agradeceria mucho su ayuda, a mi no me nada el slider. intente de todo ya no se que hacer cuando pongo el gadget me aparecen las imagenes pero no estan en slider ni ningun efecto. nose por que por favor ayudenme. este es mi blog http://disneydownload-hd.blogspot.com/
ResponderEliminara otra cosa no soy especialista en codigos y quiero saber cuando dice antes es debajo o arriva de? sorry mi ingnorancia. a y otra cosa tengo que expandir los artilugios? gracias espero su pronta respuestas
ResponderEliminarNo es necesario expandir artilugios. Veo que tienes puestos los dos primeros códigos pero no veo el último; necesitaría que lo tengas todo puesto para ver cuál podría ser el problema.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola El Potro, sólo decir tres palabras maestro de maestros. He eliminado dos comentarios porque instalando los slides he tenido una serie de problemillas y te pedía un poco de ayuda en ellos, uno de ellos era que los titulos de las imagenes que añadia no se mostraban porque se mostraban todos los del primer slide instalado, al final los he quitado porque me costaba deslizarme por la página una barbaridad, y bueno, me tendré que conformar con uno, que le vamos a hacer.
ResponderEliminarSi me he dado cuenta de que donde eliminé los puntitos que marcaban las entradas ahora han quedado otros más oscuritos que cuestan más de ver, pero que estan ahi, si me pudieses ayudar a eiminarlos sería todo.
Un abrazo.
Hola Potro. . . ya puse el codigo el problemas es que pongo la URL de las imaganes que van en la slider y luego cuando guerdo y veo no esta en slider ni nada no se que podria ser.
ResponderEliminarhola potrillo el mejor master en blogger, ya el slider se activo ya funciona bien solo que tardava en cargar pero ya esta bien mil gracias de verdad el mejor blog de la red.
ResponderEliminarno diculpa, el problema continua, por favor ve el blog y ayudame si por favor hace rato habia servido y ahora no y la verdad me gusta este slider
ResponderEliminarhttp://disneydownload-hd.blogspot.com/
Hola Bernardo Elías,
ResponderEliminarPrueba con esto, debajo de:
.orbit-bullets li {
Agrega esto:
list-style:none !important;
Saludos y gracias por tu comentario :)
Daniel Ramirez, pues es un poco extraño que a veces te funcione y otras veces no.
ResponderEliminar¿Recuerdas si hiciste una modificación antes de que dejara de funcionar de nuevo?
no solo poner cambiar los links de las imagenes, pero me funciono una ves y luego cabie las imagenes y no me funciono nose que pueda ser.
ResponderEliminarte dejo mi correo danielramirez12@hotmail.com aver si me ayudas en vivo claro si puedes.
ResponderEliminarMe ayudo un montón.
ResponderEliminarGracias
Daniel Ramirez, pues aparentemente está bien puesto, he usado los mismos códigos que tienes en la plantilla que usas y me anduvo bien, así que me hace pensar que podría tratarse de algún otro script. Quizá la barra de Wibiya podría ser la causante, ya otras veces (en otros menús) ese ha sido el problema.
ResponderEliminarJean Wolf , qué bueno que te ha servido :)
hola gracias por tu ayuda te lo agradesco un de los problemas estaba en el link de las imagenes, pero ya esta resuelto gracias
ResponderEliminarmuy buena aplicación! funciona genial en el blog, pero en una web que tengo con host propio no puedo modificarle el tiempo al cambiar los valores (y el que tengo en el blog si..) alguna idea de porqué puede ser??
ResponderEliminarAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA lo estube buscando desde hace años MUCHAS GRACIAS!!!!!!!!!!1
ResponderEliminarAdm, no sabría decirte, sólo lo he probado en Blogger, pero en teoría debería ser de la misma forma ya que de hecho está diseñado para páginas Web.
ResponderEliminarJane vulturi, qué bueno que al fin lo has encontrado :)
Hola Potro, como estas? Te hago uan consulta. He intentado incorporarlo en una entrada de mi blog (http://floresazuladas.blogspot.com/) y no ha resultado. Las imagenes aparecían una debajo de otra y me desaparecia el slider de la cabeza. La pregunta es si se puede utilzar en una entrada o que otro slider sirve para usar en una entrada especifica del blog, sin que se borre el de mi cabecera. ¿Sabés? Muchas gracias.
ResponderEliminarHola Pablo,
ResponderEliminarUsualmente casi todos los sliders son complicados de mostrarlos en las entradas de un blog, y en le caso de las plantillas nuevas del diseñador lo son más aun.
En mi experiencia personal sólo en la plantilla Mínima es en la que es más probable mostrar los sliders dentro de las entradas.
Saludos.
Quisiera saber si en blogger se puede hacer lo que esta en esta pagina http://www.crepusculo.tv/ en donde dice imagenes, gente blogs, chat videos etc... eso se veria genial en mi blog espero tu respuesta. bye
ResponderEliminarPues no conozco ese slider en particular pero no creo que sea imposible ponerlo, quizá sí requiera de mucho trabajo como es el caso de todos los sliders que son muy elaborados.
ResponderEliminarSi me encuentro uno parecido o ese mismo por la red lo publico :)
Ok muchas gracias si encuentras algo así, escribe que lo encontraste en el chat de mi blog http://crepusculosagamexicoamantedetaylor.blogspot.com/
ResponderEliminarTe agradeceria de verdad, aun así gracias por el truco
Bye
Hola no se si me pueden ayudar, como podria poner el Slider en el BOTTOM osea abajo del blog y no arriba??
ResponderEliminarSólo arrastra el elemento HTML/Javascript donde has puesto el slider y arrastralo hasta donde deseas.
ResponderEliminarpotro por que me aparece asi aqui mi blo0g
ResponderEliminarhttp://infinitubuntu.blogspot.com/
No veo que lo tengas puesto en ese blog.
ResponderEliminarHola Potro qué tal estamos por estos lares fenómeno... He probado este slide en uno de mis blogs y ha funcionado a la perfección, el problema es que mi plantilla tiene el borde automático que rodea a las imágenes y me gustaría que dicho borde no envolviese a este fantástico slide, pero solo lo uso en entradas...
ResponderEliminarEn definitiva, lo que querría saber es si se puede ocultar ese borde para este slide, o simplemente ocultarlo en las entradas individuales, gracias por adelantado catacrack.
Hola Joker,
ResponderEliminarSe podría eliminar el borde pero aplicaría para todas las imágenes de las entradas, aunque a veces es posible quitarlo sólo en el slide pero depende mucho de la plantilla.
En caso de que desees eso necesito saber en cuál entrada lo has puesto para poder decirte cuál es el procedimiento.
Saludos!
Que otra manera de que se descargue mas rapido hay?? porke al principio se traba un poco y se descargan todas las imagenes en columna y despues de unos segundos se conforma el reproductor.ya pegue el codigo antes que head y no lo soluciono. Gracias y saludos.
ResponderEliminarSi poniéndolo después de <head> no se solucionó entonces tiene que ver un poco con la carga de tu blog, quizá algún otro elemento hace que tarde un poco en cargar el blog y por lo tanto no permite que el resto cargue más rápido. Incluso las mismas fotos que se usan para el slider podrían ser las responsables de esa lentitud.
ResponderEliminarSaludos.
Potro gracias por tu pronta respuesta. He usado el condicional para que el estilo .post img solo se aplique en todos los lugares menos en las entradas individuales, de esta forma lo oculto en los posts. Ahora he quitado el condicional y una entrada con slide sería ésta, ahora puedes ver como se carga con ese molesto borde.... y si se puede ocultar sólo para el slide ya sabes jeje....Gracias de nuevo!
ResponderEliminarAsí como lo estabas haciendo está bien, sólo que lo que crees que es un borde no es un borde, sino un fondo con un padding. El código a usar sería este:
ResponderEliminar<b:if cond='data:blog.url == "http://fringefilia.blogspot.com/2010/11/fotos-del-rodaje-3x07-abducted.html"'>
<style>
.post img{padding:0 !important; border:0 !important;}
</style>
</b:if>
Saludos.
Gracias una vez más!, justo lo que andaba buscando, pondré el codigo en plantilla de entrada. Saludos!
ResponderEliminarPosiblemente había un código que estabas omitiendo y por eso te marcaba error. Si eliminas esa parte entonces no funcionará el slider, es básico y fundamental que esté puesto.
ResponderEliminarTodos los códigos que no sean texto en una entrada deben ponerse y editarse siempre en la pestaña Edición de HTML y no en la de Redactar.
Ahora que, en algunas plantillas los sliders no funcionan en las entradas, eso depende de cada plantilla y no hay mucho que pueda hacerse al respecto :\
Saludos.
Qué bueno que ya lo has solucionado :)
ResponderEliminarHola potro, quisiera hacer un pequeño aporte.
ResponderEliminarCon respecto a que a veces aparecen todas las imagenes (o textos en caso de que el slider sea de solo texto) durante unos cuantos segundos para despues adoptar su forma normal se puede arreglar añadiendo lo siguiente en los li
li style='display:none'
Si se le agrega style='display:none' no deberían volver a ver ese problema.
Hola Harry, probé tu sugerencia pero no tuve éxito :\
ResponderEliminarQue raro, a mi me funciono. El style='display:none' debe ponerse en todos los li. Por cierto, agregalo esto al final del código tambien: div style='clear: both;'/
ResponderEliminarpotro he intendado ponerlo de otro tamaño y no me deja y tambien e intentado centrarlo y nada :S donde debo cambiar el codigo HTML ??
ResponderEliminarPara cambiar su tamaño basta con cambiar el ancho (width) y alto (height) que tienen los códigos de las imágenes.
ResponderEliminarPara centrarlo prueba encerrando el último código entre <center> y </center>
Este comentario ha sido eliminado por el autor.
ResponderEliminarME MATASTE CON LO DE LOS IDENTIFICADORES. EN EL EJEMPLO: idFOTO 1 LO SUSTITUYO CON QUE? ... REPITO LA URL DE LA IMAGEN? AL IGUAL QUE EN REL=foto1, .... se me enredo la vida. ah ... de paso la animacion de slide no me sale, me sale es una imagen sobre otra estatica ... si de casualidad pasa lo mismo que con lo del efecto de la imagen que vibra (que me explicaste lo de la compativilidad) entonces no sigo intentandolo, para no perder tiempo ... bueno tu me entiendes.
ResponderEliminarNo lo sustituyes con nada, foto1 es un ID, puedes dejarlo así o ponerle otro nombre, sólo que siempre deberán ser el mismo nombre tanto para el ID como para el REL.
ResponderEliminarAhora bien, es posible que no te esté funcionando porque estás usando otra versión de jQuery (es la que usaste para el menú dock).
Puedes probar quitando el script más antiguo y dejar el más nuevo y así ver si funcionan ambos trucos.
Para eliminarlo sólo busca esta parte y quitala:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>
Hola Potro, gracia por tu aportes.
ResponderEliminarEstoy montado el slider en blog de 3 columnas. el mismo lo tengo en la columna central( M-W).
El Asunto es que quiero que el slider llegue hasta la Sidebar Izquierda.
Aca dejo un blog que tiene una imagen tal como quiero poner el slider.http://www.bloggerstyles.com/demo/?theme=1305
Se agradece tu ayuda o comentarios como siempre.
Hola O-S,
ResponderEliminarEso es un poco complicado porque tendrías que modificar bastante la plantilla, quizá sería un poco más sencillo si tuvieras las dos sidebar juntas así sólo agregarías una tercera sidebar arriba de ellas, pero aun así no podría conectarse con el contenedor de las entradas como está en el ejemplo que mencionas.
Lo más recomendable sería buscar una plantilla que ya tuviera un estilo parecido al que buscas y así no batallarías tanto.
Saludos.
Hola El Potro.
ResponderEliminarOtra duda, como puedo poner en la pagina principal
unas imagenes con links hacia otras entradas dentro del mismo blog.
Osea, un menu pero en imegenes.
gracias.
Sólo agrega en un elemento HTML/Javascript este código:
ResponderEliminar<a href="URL del enlace"><img src="URL de la imagen" /></a>
Ahí cambia la URL del enlace y la URL de la imagen donde si indica. Pon una línea como esa por cada imagen que quieras poner. Los códigos deberás ponerlos uno detrás del otro sin dar saltos de línea.
Saludos.
Hola potro, mira no me sale la imagen nada mas me sale un cuadrito chiquito en medio parece papel doblado xD.
ResponderEliminarEn fin... porque sera? hice todos los pasos
El slider está funcionando, el problema es que la URL de las imágenes no funciona, quizá ya no existen o están mal las direcciones.
ResponderEliminarLas acabo de subir! el mismo dia las subi
ResponderEliminarMiralas estan activas:
ResponderEliminarhttp://3.bp.blogspot.com/_WN6Ebuo5wJQ/TPF7dln-dOI/AAAAAAAAAIE/-ssXr1e-bOY/s1600/Dragon+Ball+Kai.jpg
http://3.bp.blogspot.com/_WN6Ebuo5wJQ/TPF3UtOMjAI/AAAAAAAAAIA/F7YY4W8nc54/s1600/dragon+ball+sd.jpg
El problema es que por alguna razón (no sé cuál sea), al momento de guardar los cambios la plantilla te está cambiando todos los caracteres de la URL en minúscula, y como ves, en la URL original hay letras minúsculas y mayúsculas.
ResponderEliminarEs necesario que las URL se muestren tal como deben ser respetando las mayúsculas y minúsculas, de lo contrario dejan de funcionar.
Intenta subiendo las imágenes a otro hosting donde la URL de la imagen esté toda en minúsculas.
Como cual? photobucket,tinypic, o cual?
ResponderEliminarPotro, he encontrado ahora si una forma de arreglar el problema con las imagenes.
ResponderEliminarAgregar esto al principio del css:
#featured { height: 1px; width: 1px; overflow: hidden; }
y al final del código css agregar esto:
#featured { height: 280px; width: 650px; }
Cambiando el height y el width por las medidas de las imagenes que hayan puesto.
GOKU, pues con cualquiera que te dé la URL en minúsculas, prueba unos cuantos para saber cuál de ellos te da las URLs de esa forma.
ResponderEliminarHarry, eso sí suena bastante lógico :D en cuanto tenga tiempo lo revisaré pero estoy casi seguro que así sí se solucionará el problema. Gracias nuevamente por tu interés en compartir.
Lo comenté porque estoy usando este slider en mi sitio y con eso solucioné el problema :)
ResponderEliminarhttp://www.cuerpoarmonioso.com --> ahí puedes hecharle un ojo.
lo mismo y puse el codigo
ResponderEliminarPotro de nuevo yo, para molestarte ahora con algo creo que complicado, ya puse el slider y me quedo muy bien; lo que quiero ahora es que quede como el anuncio flotante, es decir que el slider se vea siempre aunque bajen o suban en la pagina crees que se pueda, o algo parecido a eso, espero no molestarte tanto, gracias por todo DIOS te bendiga
ResponderEliminarGOKU, sigo viendo que estan alojadas en Blogger, y Blogger siempre te dara las URLs con mayusculas y minusculas.
ResponderEliminarEditor, no creo que funcione, pero podrias tratar cambiando donde dice position: relative; por position: fixed; pero te repite, es muy probable que no funcione del todo bien.
Potro gracias por la información pero yo quería hacerte una pregunta, que es vital para lo que quiero, ¿que cambios tendría que hacer, si en lugar de que el Slide muestre fotos que yo subí, me muestre las fotos de las entradas más recientes?
ResponderEliminarGracias
Buenas, he metido el slide dentro de una entrada pero tengo 2 pequeñas dudas.
ResponderEliminar¿Como puedo modificar el tamaño de la caja? Porque las fotos me salen deformadas y a veces dan la sensacion de superponerse.
Otra duda que tengo es como puedo quitar los números que aparecen en los circulos cuando van pasando als fotos, ya que solo con esos circulos me quedaría mejor de aspecto.
Un saludo.
Potro que crees, si funciona pero el resultado no es de lo mejor; es decir si se mueven con la pagina pero no se ve muy bien en cuestion de diseño porque es muy incomodo, nada recomendable hacer esto; de cualquier forma gracias por la ayuda y que bueno que ya estas de nuevo con nosotros
ResponderEliminarBueno potro una duda más ojala no te moleste, cual seria la manera para ponerlo en una entrada; ya sea ponerlo directo en el post o con un iframe. Espero y puedas ayudarme Gracias!!! DIOS te bendiga.
ResponderEliminarsaludos Potro excelente
ResponderEliminartus publicaciones yo creo que el 100% de blogger estan usando tus ideas jajajaj
yo tengo problemas con el mio aqui te dejo mi URL para que lo cheques http://pruebatd3000.blogspot.com/
saludos
mi msn es Carlosmq23@hotmail.es
¡Muchas gracias! Me viene muy bien para mi blog y funciona perfectamente.
ResponderEliminarEl problema de que se cambien las mayúsculas por minúsculas en las direcciones de las fotos es de blogger. En vez de meter la dirección en comillas simples, prueba a hacerlo con dobles comillas.
Así: src="URL de la imagen"
En vez de así: src='URL de la imagen'
Espero que te sirva. Un saludo!
El slider se me muestra todo desordenado cuando abro la pagina en Firefox, no entiendo porque será.
ResponderEliminarDaniel, de forma automática no se puede, pero funciona igual, en lugar de poner imágenes cualquiera agrega la imagen de tus entradas de forma manual.
ResponderEliminarj.velasco, agrega esto en el segundo código:
#featured {width:490px; height:238px;}
Editor, es igual, sólo que el último código lo agregas en una entrada en lugar de un elemento HTML/Javascript, pero muchas veces los resultados ahí no se ven muy bien.
ResponderEliminarCarlos Eduardo Martínez, ¿cuál es el problema? yo lo veo muy bien.
Aresil, gracias por compartir ese tip ;)
ResponderEliminarTangram, quizá tu plantilla no es compatible con ese navegador. Antes de elegir una siempre se debe probar en todos los navegadores para cerciorarte que se ve bien en todas partes.
Trémolo, mira esta entrada.
Hola potro disculpa tantas molestias, oye he intentado poner el slider en una pagina estatica pero solo se muestran las imagenes sin el efecto, una depues de la otra, no se a que se deba me puedes ayudar este lo he colocado en este blog mundowull.blogspot.com, como dato extra puse un menu deslizante tambien en este blog
ResponderEliminarPues al menos en esta página lo veo funcionando sin ningún problema:
ResponderEliminarhttp://mundowull.blogspot.com/p/pagina-de-fotos-prueba.html
Me ganastes no crei que contestaras tan rapido, apenas lo corregi tuve que quitar el menu con efecto deslizante porque generaba conflicto, de cualquier forma muchas gracias y que DIOS te bendiga para que nos sigas ayudando.
ResponderEliminarHola potro buen Post pero me quedo una duda x ejemplo ami no me gustaria poner todos los HTML y los codigos en mi platilla directamente, si los subo a un hosting entonces como los enlazo a la platilla osea q codigo pongo para unir el link de donde esta alojado los html y la platilla gracias..
ResponderEliminarEntonces descarga el script, subelo a un hosting y antes de </head> pega esto:
ResponderEliminar<script src='URL del script' type='text/javascript'/>
Pero ojo, hay partes que si irán de cualquier forma en la plantilla, por ejemplo las primeras 20 líneas que están en el primer código esas forzosamente deben ir en la plantilla.
También toma en consideración que siempre es mejor alojar los scripts en la plantilla por dos razones, para no depender de servicios externos y para aligerar la carga del blog.
Saludos.
Hola potro como se hace un Archivo en formato JS
ResponderEliminarEste hay un menu de una pagina y cuando ellos borran el menu osea el archivo js ami tambien se me borra quisiera saber como se hace el menu que es en formato js x ejemplo
http://esteeselmenucomosehace.js
+Como se hace?
Sólo pega el contenido del script en WordPad y guárdalo con la extensión .js
ResponderEliminarAl guardarlo te mostrará un mensaje de advertencia, sólo le das Aceptar y listo, verás que al guardarse el ícono del archivo que has creado ha cambiado.
Gracias Potro y Feliz Navidad
ResponderEliminarYA NO FUNCIONA PARECE ISE TODOS LOS PASOS I LOS ISE BIEN PERO AL MOMENTO DE AGREGAR LAS IMAGENES NO APARECEN
ResponderEliminar๖ۣۜCESAR๖ۣۜ™ (Cesar Jericho), ¡feliz Navidad igualmente!
ResponderEliminarFabian Gonzalez, ¿en cuál blog?
Que tal, realmente muy buen slider, estoy tratando sin exito de integrarlo, las pruebas las hago en este blog de pruebas:
ResponderEliminarpruebaao.blogspot.com
Leí los comentarios y veo que uno de los problemas comunes es la incompatibilidad con otras librerías, entoces eliminé las de prototype y scriptaculous... aún así no logro que funcione.
¿Que puede suceder?
Desde ya agradezco tu tiempo y muy buen blog!
Tienes tantos scripts que sería difícil saber cuál de ellos es el que causa el conflicto. Haz la prueba en otro blog donde no tengas tantos scripts para echarlo a andar.
ResponderEliminarSaludos.
hola potro xD estoy de post en post jaja.
ResponderEliminartengo un problema con la slide las imagenes me aparesen sueltas y el sin efecto
no entiendo pense que seria algo de javascrips pero no solo tengo ese jquery. desde ya grax por todo xD
perdona otra ves potro ejje pero ya lo soluciones grax =
ResponderEliminarVale, qué bueno que ya lo has resuelto :)
ResponderEliminarhola potro, hay alguna forma de poner a que las imágenes se muestren en forma aleatoria, osea que no tengan un orden para mostrarse que se muestren a azar. gracias.
ResponderEliminarNo, al menos el script no contiene la opción para que eso suceda :\
ResponderEliminarSaludos Potro si es que luego subi a un hosting que me las dira en minuscula y caso cerrado pero en mi blog original no me sale bien me sale a un lado usando los mismo html del de pruebaTD :( y la barra de descripcion me sale super larga que puedo acer :(
ResponderEliminar¿En cuál blog tienes el problema?
ResponderEliminarTaukaDeportes.blogspot.com pero no lo quiero poner hasta que este bien mi correo es carlosmq23@hotmail.es me mandas un mensaje
ResponderEliminary subo el menu y hay me dices cual es el problemas ok Saludos
En el correo no te puedo responder, sólo por aquí, y sí necesitaría verlo puesto para ver cuál es el problema :\
ResponderEliminarPues yo lo veo funcionando perfectamente, eso sí, tarda un poco en cargar pero eso es debido a que tienes demasiados elementos en el blog y eso hace que se tarde más de lo normal en mostrar las imágenes dentro del slider.
ResponderEliminarAyudenme por favor! segui todas las instrucciones pero mira como se ve: http://0987654321abc.blogspot.com/ ese es un blog que hice para hacer la prueba, pero tiene los url de las imagenes y las paginas.
ResponderEliminarse ven cuadros sin imagen separados uno encima de otro, no tengo ni idea que hice mal.
ResponderEliminarDe entrada veo dos problemas, uno es que no has puesto el primer código que es el script que hará que funcione.
ResponderEliminarY otro es que Blogger está teniendo problemas con las URLs pero aquí hay un modo de solucionarlo:
http://ciudadblogger.com/2010/12/las-mayusculas-y-las-minusculas-en-las.html
Ya listo, muchas gracias el problema fue mio por hacerlo rápido y no leer que era antes ]]> y no después jeje, como puedo hacer para centrarlo en la columna donde esta? Lo puedes ver acá http://movidavenezuela.blogspot.com/ muchas gracias de antemano.
ResponderEliminary lo ultimo es si existe la posibilidad de que solo salga en la pagina principal? y disculpa tanta molestia.
ResponderEliminarya he podido solucionarlo para que solo se muestre en la pagina principal, pero aun me queda la duda de si de pueda centrar o no, muchas gracias y disculpa la molestia potro.
ResponderEliminarPrueba encerrando el código que pusiste en el gadget entre <center> y </center>
ResponderEliminaroh perfecto, muchisimas gracias de verdad. Espero que el blog siga creciendo porque esta excelente
ResponderEliminarQ tal Potro. 1ro t doy mis felicitaciones ya q es un excelente blog. 2do q necesito ayuda para cargar este gadget pues no me aparecen las imagenes. T paso la dir de mi blog para q lo veas xfa.
ResponderEliminarhttp://quierestenisaquiestan.blogspot.com/
Oie ya logre resolverlo gracias a la respuesta q diste acerca d las mayusculas y minusculas con las ". Gracias.
ResponderEliminarPero otra duda, como le cambio el tamaño al recuadro donde se muestran las imagenes? Espero respuesta. Saludos.
De nueva cuenta he resuelto el problema pero eso sii, gracias a las indicaciones q das. Saludos.
ResponderEliminaroye potro por qe mi gadget cuando apenas esta cargando la página se ven las imagenes una debajo de otra y ya que cargo ya se ven bien http://www.choromaniaco.blogspot.com/
ResponderEliminarTnisMaster, qué bueno que ya lo has resuelto :)
ResponderEliminarHumbertoPeker, eso es porque el script no carga de inmediato y mientras carga las imágenes se muestran normal. Prueba con la solución que dan en el comentario #115 quizá eso te sirva.
Que tal amigo POTRO, muy bueno tu blog, tengo la misma duda que humberto, leo el comentario #115, pero no se en que parte colocarlo, no se cual es el css, muchas gracias de antemano
ResponderEliminarHola caricuaofoto,
ResponderEliminarEn el comentario #115 se refiere al código que has pegado antes de ]]></b:skin>
Buenas, amigo yo había dejado al blogger, pero ahora conseguí el tuyo y me anime a seguir, luego de como 3 años sin usarlo.
ResponderEliminarTengo en mente un blog para una fundación sin fines de lucro para rescatar gatos en situación de calle, en mi país Venezuela (específicamente en mi estado de residencia actual).
Use una plantilla que yo había modificado hace tiempo atrás (cambios normales nada del otro mundo)
Me gustaría que pasaras y vieras que errores ves en la plantilla, o contribuciones para un mejor estilo.
Cuando tengas tiempo claro.
Saludos
Felicitaciones por este blog.
NOTA: el primer y segundo blog, si vas y los ves me dices que ves de mal. Estoy usando tus trucos y mejoras. Mil gracias de verdad por dedicarle tiempo a esto.
iricky82.blogspot.com
http://fundacionapadrinaungatosinhogar.blogspot.com/
Esto es lo que busco, pero no me entero lo de la id de las fotos, como veo la id y podrías explicármelo, gracias
ResponderEliminariricky82, qué bueno que te animaste a regresar con tu blog. No creo que haya muchos cambios que se le tengan que hacer, la verdad así como está lo veo muy bien :)
ResponderEliminarMercedes España, la ID tú la agregas con el nombre que quieras, puede ser cualquier palabra sólo recuerda que el nombre que elijas para el ID de la foto deberá ser el mismo que coloques en donde dice rel=
Perdona mi torpeza, Potro ¿en que parte del código de la foto agrego la ID,,,y lo que tengo que añadir es así - rel=¨***¨" o id="***"
ResponderEliminarno me entero Potro lo siento
gracias
Buenas Potro lo estoy intentando, pero no consigo que se vean las imagenes
ResponderEliminarLas imágenes no tienen ID es por eso que tú debes ponérselo, el que quieras.
ResponderEliminarPor ejemplo, si le pones id="foto1" entonces donde dice rel= también debes poner el mismo nombre, o sea, rel="foto1"
Donde incluyo lo que me dices?
ResponderEliminaren que parte del html de la foto?
Y gracias de verdad por tu paciencia
Eso se agrega en la parte donde se indica en la entrada:
ResponderEliminar<a href='URL del enlace'><img rel='foto1' src='URL de la imagen' style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius augue sit amet magna condimentum dictum.</span>
En ese ejemplo a la ID le he puesto de nombre foto1 por lo tanto en rel= también le he puesto el mismo nombre, es decir foto1
Ok Potro muchas gracias, siempre tan atento y enseñando, muchas gracias
ResponderEliminarhola potro q tal la verdad primera ves q ingreso a tu blog y me parecio interesantisimo,..... sobre todo esto del slide, sabes ya copie todos los codigos HTML, y me salio bien enmi blo, pero no subi ninguna imagen ya q no entiendo de donde sacas estas cosas...'URL del enlace' y 'URL de la imagen', creo q usas el jQuery no?? podrias explicarme bien como usarr este programa ya q es lo unico q me falta para completar mi slide, gracias de antemano potro
ResponderEliminarHola Joseph,
ResponderEliminar¡Bienvenido a Ciudad Blogger!
La URL del enlace es la dirección web del sitio que quieres enlazar, por ejemplo, si quisieras que al dar click a la imagen te mandara a Google entonces como URL pondrías:
http://google.com
La URL de la imagen es igual la dirección web de una imagen. Te dejo un enlace del blog de Jaime que explica cómo conseguir la URL de una imagen:
http://elbalcondejaime.blogspot.com/2009/03/conseguir-la-direccion-o-url-de.html
hola potro soy de nuevo yo,... sabes en la ultima parte de este proceso hice esto....
ResponderEliminarDiseño | Elementos de la página | Añadir un gadget | HTML/Javascript pegue este codigo:
en la 'URL del enlace' pegue 'http://www.google.com' y en la 'URL de la imagen' pegue 'http://3.bp.blogspot.com/_rmcpxd3hzsq/skxvalwyp0i/aaaaaaaacda/fc-j4n7crzc/s400/cobresol.jpg'
asi como me lo explicaste ahi arriba y como me lo explico en el blog de jaime pero la verad no paso nada de nada
espero me puedas ayudar, ya q segun los comentarios eres el mejor, en esto de los blogger, gracias brother de antemano..........
No te preocupes que tiene solución. En realidad el problema es que por alguna extraña razón Blogger está cambiando las URLs en algunos blogs.
ResponderEliminarMira esta entrada para saber más al respecto.
Pero en resumen, la URL tanto del enlace como de la imagen no la encierres en comillas simples ( ' ) sino con comillas dobles ( " ), de esa forma no tendrás problema con la imagen y se mostrará sin problemas. Eso sí, carga una nueva imagen para que obtengas una URL sin problemas.
Saludos.
pucha potro era verdad lo que se comentaba eres un verdadero capo en esto de los trucos del blogger, jejeje, gracias a tus consejos me salio bien el slide,..... pero te hare un par de interrogantes , disculpa si abuso de tu amabilidad..ahi van
ResponderEliminarhay alguna manera de borrar esos desagradables puntos y numeros q aparecen en la parte superior izquierda del slide, si habria alguna manera te lo agradeceria, causa.....
Aca otra preguntita brother potro sabes yo tengo algunas imagenes que quiero subirlas a la web y darles una URL, me podrias explicarme eso?? como hacerle...sq deseo hacer un slide con esas imagenes, ..espero tu respuesta causa, eres el mejor sin duda
Hola Joseph,
ResponderEliminar¿En dónde lo has puesto para ver esos puntos y números que mencionas?
Para subir imágenes hay varios sitios, incluso puedes subir tus imágenes desde Blogger como si crearas una entrada, ahí verás que te da un código y dentro de ese código hay 2 URLs, la primera la puedes usar para lo que quieras.
Saludos
naa potro todos los codigos los puse como indicas en la parte aariba y la ultima parte lo puse ahi..
ResponderEliminarel código que mostrará las imágenes, así que en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript (tambien lo puse ahi como lo explicaste) y la verdad asi me quedo mira..
http://apasionadosporelcobre.blogspot.com/
a potro queria preguntarte tambien si este tipo de slide solo se puede poner una ves en un blog, porq la verdad quiese hacer la prueba y me salio asi como muetra en mi blogger q te escribi ahi arriba, espero tu respuesta amigo potro
Este comentario ha sido eliminado por el autor.
ResponderEliminarEsos puntos son por el tipo de tu plantilla. Mira el comentario #43
ResponderEliminarpara saber cómo eliminarlos.
Y sí, para que funcione bien sólo debe ponerse un slider por blog.
Saludos.
Me alegro que te haya sido útil :)
ResponderEliminarJustamente en la posdata que dejaste está la causa del problema.
ResponderEliminarEste slider trabaja con jQuery y esa librería no es compatible con Scriptaculous y Prototipe, por lo que cuando se agregan justos uno de ellos deja de funcionar :(
potro disculpa si soy tan molestoso, jejejje, por andandote preguntando esq recien estoy entrando a esto de los blogger,....sabes ya borre lo q me indicaste, y si es verdad q se borradon los puntos pero los numeros ahi arriba siguen apareciendo, tambien desearia borrar esos numeros como lo hago, porfavor.........
ResponderEliminaraca va otra interrogante, ya q me dijiste q no se puede poner mas de este tipo de slide en un blog, hummmmmm los otros tipos de slide, desearia ponerlños desde www.slide.com sabes ya logre colocar en otro blog este tipo de slide, pero queria saber si alguna forma pa q el slide se reproduzca automaticamente ni bien uno ingrese al blog,.........porfavor disculpame por tantas molestias
Esos números no sé que sean pues el slider no utiliza listas numeradas. De cualquier manera borra el otro gadget que tienes debajo, ese no andará así que fuera de ayudar podría afectar el funcionamiento del otro.
ResponderEliminarSobre los demás slides no lo sé, eso depende del sitio donde los hagas, ahí sabrás si tienen la opción de autoreproducción o no. Cada sitio es diferente y la verdad no los uso así que no sabría responderte esa pregunta.
Saludos.
Específicamente para ese slider o cualquier otro gadget no, pero puedes usar uno que se aplique para todo el blog:
ResponderEliminarhttp://ciudadblogger.com/2009/04/mostrar-la-barra-cargando-pagina.html
Hola Potro!
ResponderEliminarMuchas gracias por echar una mano con esto. Copié todo el código, configuré dos imágenes de prueba para ver si arrancaba la cosa... y no me muestra ninguna de las dos. Puedes ver cómo marcha el error al inicio de mi blog. Eso si, el slide funciona de lujo y la apariencia es genial. Dónde puedo estar errando?
Saludos! y gracias.
Hola Asuncion Macian Ruiz/Medusa,
ResponderEliminarNo pude ver puesto el slider pero creo suponer cuál podría ser el problema al que te refieres. Mira el comentario #184 seguramente eso te ayudará.
Saludos.
buena explicacion, pero... y si deseo colocar la descripcion en la parte superior? me ayudas por favor!
ResponderEliminarEn este slider no es posible dado que arriba se encuentra el reloj y el contador de imágenes, pero puedes usar S3slider, ahí sí puedes elegir la posición de la descripción.
ResponderEliminargracias por responder, saludos, sos muy gentil, pendiente de tus aportes
ResponderEliminarHola amigo, Oye amigo como le hago para cambiarle el tamano a la galeria ?
ResponderEliminarHola amigo buenos dias, Oye una pregunta como le hago Para cambiarle un el tamano al slider?
ResponderEliminarBuen día.
ResponderEliminarPara cambiar su tamaño basta con cambiar el ancho (width) y alto (height) que tienen los códigos de las imágenes.
lo unico malo es que no se pueden utilizar imagenes renderizadas =S
ResponderEliminarHola potro, desde Uruguay que sigo el blog...
ResponderEliminarTengo un problema con el Slider, sólo me corre la primera imagen, he leido hasta el comentario 90 y a nadie le paso lo que me pasa a mí, por lo que ví hay problemas con los menu, yo antes del slider puse el este menu http://ciudadblogger.com/2011/01/menu-deslizante-arriba-del-blog.html.
Espero que me digas si hay conflicto entre este menu y el slider.
Gracias
Hola Kapyvara,
ResponderEliminarLo que sucede es que aunque ambos usan jQuery, los dos usan versiones distintas del mismo script y nunca se debe tener dos librerías de jQuery de versiones distintas.
Puedes quitar uno de los dos scripts y con suerte ambos funcionen con uno solo, pero existe la posibilidad que uno de los dos no acepte la versión del script y no haya más remedio que olvidarnos de él.
Si quieres intentarlo busca y elimina esta línea:
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'></script>
Verifica si ambos trucos funcionan. Si nuevamente uno de los dos no funcionara entonces agrega de nuevo esa línea que quitaste y en su lugar elimina esta otra:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
Si funciona pues ya la hiciste, sino, pues no habrá más remedio que decidirte cuál de los dos trucos usar.
Saludos.
Hola potro no se si sigues contestando este post pero tengo un problema cuando carga a slider se muestran las imagenes apiladas y luego se posisionan en su lugar (el proble es que tardan mucho en haserlo) grax desde ya
ResponderEliminaryo otra ves :o
ResponderEliminarpotro, me preguntaba si vos editaste el codigo del slider para ponerlo en blogger o ya lo habias encontrado asi, porque salio una version nueva y mas bonita, pero no logro adaptarla al blog =S
me podrias dar una idea de como hacerlo?
Dex/Jcs, mira el comentario #115, quizás eso te sirva.
ResponderEliminarNehuy, son los mismos códigos que ofrece el autor en su sitio, no sé a cuál versión te refieras :/
version 1.2 o 1.2.1
ResponderEliminarhttp://www.zurb.com/playground/orbit-jquery-image-slider
no encuentro los codigos =S
o si es que son esos cortitos, no se como adaptarlos bien o donde ponerlos. ademas hay 3 secciones (quick setup, etc) y no se cuales tendria que usar.