09 febrero 2013

Carrusel manual para entradas, etiquetas, imágenes en Blogger.

El Script ha dejado de funcionar

Anteriormente vimos como colocar un carrusel con las últimas entradas, automáticamente en este post,  y ahora os lo traigo de forma manual, para colocar lo que mejor creáis conveniente.
Este es también un slider creado por Maskolis  para mostrar cualquier entrada, etiqueta o imagenes del blog. He modificado un poco el slider, no mucho en realidad, sólo he cambiado el tamaño y color.


Colocación:
Acceder a Blogger con tu cuenta
Después de que seleccione el blog que quiere agregar este control deslizante.
Vaya a >> Editar plantilla HTML, a continuación, comprobar expandir plantillas de artilugios
Como medida de precaución para evitar futuros errores de edición, primera copia de seguridad de tu plantilla.
Después de todos los pasos anteriores, pon el siguiente código encima de  ]]> </ b: skin>:

CSS:
#slidearea{
height:150px;
overflow:hidden;margin:-20px 0px 0 2px;
position:relative;
width:920px;
background:#fff url(http://3.bp.blogspot.com/_JUg9QsmKp5s/TMti6qq0QxI/AAAAAAAAAYs/85Em1FsewNI/s000/header-background.png) repeat-x;
border:5px ridge #052844;
}
#gallerycover{
overflow:hidden;
margin:9px 20px 0 32px;
width:850px;
}
.mygallery{
overflow:hidden;
position:relative;
}
.mytext img{
float:left;
}
.mytext{
position:relative;
margin:0 5px 0 5px;
width:160px;
height:210px;
display:inline;
float:left;
color:#c4c4c4;
}
.inpost{
position:absolute;
top:0;
left:0;
width:250px;
background:#fff;
}
.mytext {
padding:5px 0;
color:#000;
width:160px;
font-size:12px;
font-weight:bold;
}
.mytext h4 a:link,.mytext h4 a:visited{
color:#000;
text-shadow: 0px 1px 0px #efefef;
}
.mytext p{
padding:0 0;
color:#555;
font-size:12px;
line-height:20px;
width:160px;
text-shadow:1px 1px 0 #f6f6f6;
}
.prevb{
float:left;
width:24px;
height:24px;
z-index:200;
background:url(http://2.bp.blogspot.com/_jeu1dUw9AK4/TSXBUU5bgII/AAAAAAAAANc/p4oSpglWP_k/s1600/back+demomaskolis.gif);
position:absolute;
left:5px;bottom:65px;
}
.nextb{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(http://1.bp.blogspot.com/_jeu1dUw9AK4/TSXBWqhgrxI/AAAAAAAAANg/cXq1QUt15h8/s1600/prev+demomaskolis.gif);
position:absolute;
right:5px;
bottom:65px;
display:block;
}

El siguiente paso es colocar el script, introduzca el siguiente código encima del código </ head>:
SCRIPT:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

//<![CDATA[

/*
* jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
*
* Uses the built in easing capabilities added in jQuery 1.1
* to offer multiple easing options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/

jQuery.easing = {
easein: function(x, t, b, c, d) {
return c*(t/=d)*t + b; // in
},
easeinout: function(x, t, b, c, d) {
if (t < d/2) return 2*c*t*t/(d*d) + b;
var ts = t - d/2;
return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;
},
easeout: function(x, t, b, c, d) {
return -c*t*t/(d*d) + 2*c*t/d + b;
},
expoin: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
return flip * (Math.exp(Math.log(c)/d * t)) + b;
},
expoout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
return flip * (-Math.exp(-Math.log(c)/d * (t-d)) + c + 1) + b;
},
expoinout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
if (t < d/2) return flip * (Math.exp(Math.log(c/2)/(d/2) * t)) + b;
return flip * (-Math.exp(-2*Math.log(c/2)/d * (t-d)) + c + 1) + b;
},
bouncein: function(x, t, b, c, d) {
return c - jQuery.easing['bounceout'](x, d-t, 0, c, d) + b;
},
bounceout: function(x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
bounceinout: function(x, t, b, c, d) {
if (t < d/2) return jQuery.easing['bouncein'] (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing['bounceout'] (x, t*2-d,0, c, d) * .5 + c*.5 + b;
},
elasin: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasinout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
backin: function(x, t, b, c, d) {
var s=1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backout: function(x, t, b, c, d) {
var s=1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backinout: function(x, t, b, c, d) {
var s=1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
linear: function(x, t, b, c, d) {
return c*t/d + b; //linear
}
};

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(6($){$.1g.1w=6(o){o=$.1f({r:n,x:n,N:n,17:q,J:n,L:1a,16:n,y:q,u:12,H:3,B:0,k:1,K:n,I:n},o||{});8 G.R(6(){p b=q,A=o.y?"15":"w",P=o.y?"t":"s";p c=$(G),9=$("9",c),E=$("10",9),W=E.Y(),v=o.H;7(o.u){9.1h(E.D(W-v-1+1).V()).1d(E.D(0,v).V());o.B+=v}p f=$("10",9),l=f.Y(),4=o.B;c.5("1c","H");f.5({U:"T",1b:o.y?"S":"w"});9.5({19:"0",18:"0",Q:"13","1v-1s-1r":"S","z-14":"1"});c.5({U:"T",Q:"13","z-14":"2",w:"1q"});p g=o.y?t(f):s(f);p h=g*l;p j=g*v;f.5({s:f.s(),t:f.t()});9.5(P,h+"C").5(A,-(4*g));c.5(P,j+"C");7(o.r)$(o.r).O(6(){8 m(4-o.k)});7(o.x)$(o.x).O(6(){8 m(4+o.k)});7(o.N)$.R(o.N,6(i,a){$(a).O(6(){8 m(o.u?o.H+i:i)})});7(o.17&&c.11)c.11(6(e,d){8 d>0?m(4-o.k):m(4+o.k)});7(o.J)1p(6(){m(4+o.k)},o.J+o.L);6 M(){8 f.D(4).D(0,v)};6 m(a){7(!b){7(o.K)o.K.Z(G,M());7(o.u){7(a<=o.B-v-1){9.5(A,-((l-(v*2))*g)+"C");4=a==o.B-v-1?l-(v*2)-1:l-(v*2)-o.k}F 7(a>=l-v+1){9.5(A,-((v)*g)+"C");4=a==l-v+1?v+1:v+o.k}F 4=a}F{7(a<0||a>l-v)8;F 4=a}b=12;9.1o(A=="w"?{w:-(4*g)}:{15:-(4*g)},o.L,o.16,6(){7(o.I)o.I.Z(G,M());b=q});7(!o.u){$(o.r+","+o.x).1n("X");$((4-o.k<0&&o.r)||(4+o.k>l-v&&o.x)||[]).1m("X")}}8 q}})};6 5(a,b){8 1l($.5(a[0],b))||0};6 s(a){8 a[0].1k+5(a,\'1j\')+5(a,\'1i\')};6 t(a){8 a[0].1t+5(a,\'1u\')+5(a,\'1e\')}})(1x);',62,96,'||||curr|css|function|if|return|ul|||||||||||scroll|itemLength|go|null||var|false|btnPrev|width|height|circular||left|btnNext|vertical||animCss|start|px|slice|tLi|else|this|visible|afterEnd|auto|beforeStart|speed|vis|btnGo|click|sizeCss|position|each|none|hidden|overflow|clone|tl|disabled|size|call|li|mousewheel|true|relative|index|top|easing|mouseWheel|padding|margin|200|float|visibility|append|marginBottom|extend|fn|prepend|marginRight|marginLeft|offsetWidth|parseInt|addClass|removeClass|animate|setInterval|0px|type|style|offsetHeight|marginTop|list|jCarouselLite|jQuery'.split('|'),0,{}))
//]]>
</script>

Si en la plantilla ya existe un Query.min.js , el primer código de arriba,  no es necesario que lo instales.

El siguiente paso es llamar al slider para que aparezca en nuestro blog.
Esta quizás sea la parte más complicada para instalar porque cada plantilla es un mundo y un mismo código en una plantilla varía respecto a otra.
De todas formas y a modo de referencia sería:

En plantillas nuevas buscaríamos el código: <div class='region-inner tabs-inner'> y justamente después colocamos el  código de abajo:
En plantillas antiguas y a modo de referencia, buscaríamos <div id='main-wrapper'> y justamente antes colocamos el código de abajo:

HTML:
<div id='slidearea'>
<div id='gallerycover'>
<div class='mygallery'>
<ul>
<li>
<div class='mytext'>
<a href='link de la entrada 1'>
<img class='sidim' height=' 100' src='http://3.bp.blogspot.com/-T0-4XQkGWzw/UQ6oYjuCHdI/AAAAAAAAJMY/QCFMgnQPCGs/s120-c/36574.jpg' width=' 160'/>
</a>
<div class='clear'/>
<p align='center'><a href='link de la entrada 1'>Con Emery seis de seis...</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='link de la entrada 2'>
<img class='sidim' height=' 100' src='http://4.bp.blogspot.com/-ij-kelRbJU4/UQwWB5pqKTI/AAAAAAAAIy4/ZBXobgMVK9k/s120-c/alvaro%2Bnegredo.jpg' width=' 160'/>
</a>
<div class='clear'/>
<p align='center'><a href='link de la entrada 2'>Dando la cara</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='link de la entrada 3'>
<img class='sidim' height=' 100' src='http://3.bp.blogspot.com/-UvjAi9F3oU8/UPsDPUhmyLI/AAAAAAAAA8g/TnhRcd9tngw/s120-c/1358522957_extras_noticia_foton_4_1.jpg' width=' 160'/>
</a>
<div class='clear'/>
<p align='center'><a href='link de la entrada 3'>Tanto monta, monta tanto</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='link de la entrada 4'>
<img class='sidim' height=' 100' src='http://4.bp.blogspot.com/-SdNqwlUJyd4/UPcJHFbcMuI/AAAAAAAAA8M/uC6ZaTaNwrI/s120-c/1358276410_extras_portadilla_0.jpg' width=' 160'/>
</a>
<div class='clear'/>
<p align='center'><a href='link de la entrada 4'>Triste y aburrido</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='link de la entrada 5'>
<img class='sidim' height=' 100' src='http://3.bp.blogspot.com/-YNh9LMU5h3c/UPRlx54U19I/AAAAAAAAA74/91Z7ZiUW_Lc/s120-c/36045.jpg' width=' 160'/>
</a>
<div class='clear'/>
<p align='center'><a href='link de la entrada 5'>Embargo de Sevillismo</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='link de la entrada 6'>
<img class='sidim' height=' 100' src='http://3.bp.blogspot.com/-UCortpmjStM/UPKFdmThE8I/AAAAAAAAA7o/upgQB8HXuUk/s120-c/35991.jpg' width=' 160'/>
</a>
<div class='clear'/>
<p align='center'><a href='link de la entrada 6'>De Risa...</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='link de la entrada 7'>
<img class='sidim' height=' 100' src='http://3.bp.blogspot.com/-V8Y5MfxUwII/UNYZh7JQ0VI/AAAAAAAAA7M/Jkynm-QpI5M/s120-c/398715_556742104355960_132589448_n.jpg' width=' 160'/></a>
<div class='clear'/>
<p align='center'><a href='link de la entrada 7'>Me nombran y los Saludo</a></p>Norah Jones adalah penyanyi jazz terkenal yang sudah banyak memperoleh penghargaan.....
</div>
</li>
</ul>
<div class='clear'/>
</div>
</div>
<a class='prevb' href='#'/>
<a class='nextb' href='#'/>
</div>

<div style='height:20px;width:100%;overflow:hidden;'/>
<script type='text/javascript'>
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
visible: 5,
speed: 1000,
easing: "backout"
});
});
</script>


El paso final, sería ver en vista previa y observar los resultados, si todo está bien guardar. Si sigues los pasos anteriores correctamente,el slider carrusel aparecerá en su blog.

Si todavía no está claro por favor deja un mensaje en el cuadro de comentarios en la parte inferior.

20 comentarios

Excenete... justo lo que necesitaba. Graciassssss!!!!!

He probado con este slider porque creo que se asemeja más a lo que estaba buscando.. me gustaría un carrusel en el que yo pusiera imágenes y al pinchar en cada una de las imágenes fuese a una etiqueta diferente.

Borré lo que me dijiste, es decir, el anterior slider que probé pero al dar vista previa no me salen las flechas laterales para que avance o retroceda el slider.. y se me monta encima de la cabecera.. además de que salen entraas de tu blog en lugar de mías.. jajaj

Soy un patán para esto xDD.

Yo quería algo así: http://ciudadblogger.com/2011/10/carrusel-de-imagenes-con-scriptaculous.html

Pero es que tampoco hay manera..

Me podrías ayudar? no me importaría hacerte administrador, te estaría eternamente agradecido jaja

Un abrazo!

Tex como bien dices este si puede valer para lo que pides.
Hazme admin y veo cual es el problema.
Saludos

Gracias! Ya te he enviado la invitación:)

Tex ya está instalado pero !Ojo! es manual, te he colocado las últimas entradas, pero tu puedes colocar lo que quieras.
Aparte te he colocado solo visibles en la portada 7 entradas antes tenías 15 y tardaba mucho en cargar el blog.

Te explico para que tu mismo cambies los enlaces e imágenes del carrusel:
Entra en plantilla-editar-expandir plantillas-busca-<a href='link de la entrada 1'> y a partir de esto veras la url de la imagen-url de la entrada y título de la entrada.
Cambias por lo que quieras y así sucesivamente hasta las 7 entradas que hay en el carrusel.

Si tienes alguna duda ya sabes.....!comenta!

PD: Me he eliminado de autor.

Muchísimas gracias, de verdad!

Me gusta mucho! Pero no se si es problema mío o no se.. pero las flechitas a los extremos de carrusel no se me ven y aparecen estáticas 5 entradas, supongo que eso no se puede arreglar ni será a lo mejor compatible con mi plantilla..


Muchas gracias de nuevo! Eres un crack:).

Tex lo he comprobado en todos los navegadores y en todos se ve perfectamente.
En cuanto ha estáticas ya te lo comenté, es manual hay que pasar las imágenes con el ratón.

De todas formas limpia los cookies de tu navegador, haber que tal.

Saludos.

Gracias amigo!

Pues en el mozilla si se me ve genial, no entiendo porque en el google chrome se me ve así:
http://i.imgur.com/S0xDdMr.png

He probado a borrar las cookies pero sigue igual, que cosa más rara:S, a lo mejor tengo desactualizado el chrome o algo desactivado:S, lo raro es que en el resto de blogs, como el tuyo si que se me ven las flechas con el google chrome.

Con estáticas me refería a que no deslizaba el slider, se veían 5 en lugar de 7 que hay jeje.

Ya lo solucioné! De verdad eres un máquina, gracias por todo! Te haré promo y guardado en favoritos!

Hola, lo primero, muchas gracias por el aporte.
una pregunta, se puede hacer que se mueva automáticamente?

gracias de nuevo

Nacho, lo siento pero de momento es manual, habría que pensar en crearlo automático.
Quizás en una próxima entrada lo haga..

De todas formas gracias por tu visita.

Un Cordial Saludo:

Amor Sevillista enhorabuena por este fantástico slider, pero me gustaría preguntarte, si se podría poner en vertical, mejor dicho en la sidebar. Muchas gracias

Atentamente

Este script ha dejado de funcionar, pero puedes ver esta entrada o o esta otra

Hola Antonio: creo que esto es lo que me está fallando (es lo que te pregunté ayer). Voy a probarlo. Gracias.

Pues ahora no estoy segura de que sea el slider que yo tengo, que creo que es dinámico... ay...

Pues ahora no estoy segura de que sea el slider que yo tengo, que creo que es dinámico... ay...

Olga debes buscar y eliminar esta url: http://sevillporelmundo.webcindario.com/carousellite.js
y en su lugar colocar esta: https://2cd2e6bd6df053a80ac331ad9c3223fc430652d4.googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/carouselite.js

con esto debería funcionar.

¿Este cambio valdría tanto para el carrusel manual como para el dinámico?

Olga este script ha dejado de funcionar el que funciona bien es el del automático.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"