Tutorial: Cómo crear un slider automático con imágenes en Blogger

webbber · 2012-08-28T14:30:35-0500

En la red hemos encontrado muchos themes para blogger donde aparecen sliders que se deben de crear y actualizar de forma manual a traves de una gadget en HTML. Lo que vengo a compartir con ustedes es un interesante recurso que encontre en ingles sobre Como crear un slider automatico basado en una etiqueta.

Que lograremos?
Lo que se lograra es que nuestro slider se actualizara por si solo a medida que actualicemos las entradas de una categoria.
Enlace eliminado
COmo pueden ver en la imagen, el slider es horizontal y muestra las x entradas de la etiqueta labelx que configuremos en el sistema.

Instalando el Slider
Lo primero que debemos de hacer es ir a la edicion HTML de nuestro theme y seleccionamos la casilla Expandir plantillas de artilugios, buscamos este codigo:

]]></b:skin>:

y pegamos antes este codigo:

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(Enlace eliminado) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(Enlace eliminado) center;z-index:100;cursor😛ointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(Enlace eliminado) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(Enlace eliminado) center;z-index:100;cursor😛ointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(Enlace eliminado) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(Enlace eliminado) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

COmo pueden ver, este es el css que dara el estilo a nuestro slider o carusel, por tal razon podemos cambiar los valores para ajustarlo a nuestras necesidades, lo que he marcado en rojo

ahora buscamos el cierre de head:

</head>

y agregamos ANTES este codigo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "news";

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s.indexOf(">")!=-1){
s = s.substring(s.indexOf(">")+1,s.length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry;
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

Para configurar el nombre de la etiqueta con la cual se mostraran las entradas, buscamos la variable: label1 = "news"; donde nos indica que news es el nombre de la label que esta usando el sistema. Solo debemos de cambiar el nombre de nuestra etiqueta, por ejemplo: Videos. De modo que quedara asi:

label1 = "Videos";

Hacer clic para expandir...

Hasta ahora no hemos hecho que el slider aparezca en el blog, unicamente hemos agregado el estilo en el css y el codigo de configuracion de la etiqueta con sus imagenes o miniaturas y los tiempos que se mostrara cada post.

Ahora vamos a buscar este codigo:

<div id='main-wrapper'>

Hacer clic para expandir...

Y pegamos el siguiente codigo abajo, esto hara que el slider o carusel se muestre en el index del blog y no en todas y cada entrada:

<b:if cond='data:blog.pageType != "item"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>&quot😉;
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#carousel .container&quot😉.jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 5,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>
</b:if>

Hacer clic para expandir...

Listo! tenemos ahora en nuestro blog un slider que se actualiza de forma automatica.
Ver Demo

Carlos Arreola · 2 Sep 2012

Tutorial aprobado y agregado al listado de tutoriales, buen aporte.

lordalexander · 10 Oct 2012

hola chicos, supuestamente este codigo json es el que alimenta el slider no?

Insertar CODE, HTML o PHP:

<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=publis hed&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt; \/script&gt;&quot;
</script>

y si quisiera alimentar el slider con imagenes de otro lado, por ejemplo ... si tengo imagenes guardadas en un dropbox o en photobucket como deberia hacer? deberia cambiar ese script?
o como deberia proceder?o que parte del codigo deberia cambiar y/o eliminar?
me pueden ayudar? :fatigue:

fullpablo · 10 Oct 2012

Justo estaba buscando algo asi hace unos dias, el fin de semana lo pruebo para ver que tal queda en uno de mis blogs, gracias por tl tutorial webber, saludos! :encouragement:

sneijder · 28 Oct 2012

lo he probado pero al darle clic en la flecha de siguente no da ningun efecto :/

webbber · 14 Nov 2012

seguro es por la carita, debes de reemplazar el codigo correspondiente

spambauer · 14 Nov 2012

lo voy a probar , buen aporte

mateopereira · 17 Ene 2013

Ya lo probé en 3 blogs diferentes y nada :grumpy:

Radick · 17 Ene 2013

Muy buen tutorial pero un lugar de tener el codigo

Insertar CODE, HTML o PHP:

Asi

Tiene el codigo

Asi

Lo que hace que falle. Espero lo corrijan porque no corre. Saludos.

ultrox23 · 17 Ene 2013

Gracias por el aporte, lo pondré en práctica

mateopereira · 18 Ene 2013

Creo que el problema es el script. Checalo y vuelvelo a subir, este es un gran post, y va a ser mucho mejor si haces que funcione 🙁

webbber · 18 Ene 2013

cuando lo probe en blogger me funciono, por eso lo comparti. No he probado mostrar imagenes alojadas en otros servicios que no sean de blogspot

mateopereira · 18 Ene 2013

webbber dijo:
cuando lo probe en blogger me funciono, por eso lo comparti. No he probado mostrar imagenes alojadas en otros servicios que no sean de blogspot

¿Entonces aseguras que ese sea el problema?

webbber · 18 Ene 2013

se supone que asi como lo subi debe funcionar.

mateopereira dijo:
¿Entonces aseguras que ese sea el problema?

Liliru · 28 Feb 2013

Buen aporte, voy a probarlo ahora...:encouragement:

JuanDRomero · 28 Feb 2013

Hola, puedes colocar algun demo para ver como queda?

tested cars · 5 Mar 2013

webbber dijo:
En la red hemos encontrado muchos themes para blogger donde aparecen sliders que se deben de crear y actualizar de forma manual a traves de una gadget en HTML. Lo que vengo a compartir con ustedes es un interesante recurso que encontre en ingles sobre Como crear un slider automatico basado en una etiqueta.

Que lograremos?
Lo que se lograra es que nuestro slider se actualizara por si solo a medida que actualicemos las entradas de una categoria.

COmo pueden ver en la imagen, el slider es horizontal y muestra las x entradas de la etiqueta labelx que configuremos en el sistema.

Instalando el Slider
Lo primero que debemos de hacer es ir a la edicion HTML de nuestro theme y seleccionamos la casilla Expandir plantillas de artilugios, buscamos este codigo:

y pegamos antes este codigo:

COmo pueden ver, este es el css que dara el estilo a nuestro slider o carusel, por tal razon podemos cambiar los valores para ajustarlo a nuestras necesidades, lo que he marcado en rojo

ahora buscamos el cierre de head:

y agregamos ANTES este codigo:

Para configurar el nombre de la etiqueta con la cual se mostraran las entradas, buscamos la variable: label1 = "news"; donde nos indica que news es el nombre de la label que esta usando el sistema. Solo debemos de cambiar el nombre de nuestra etiqueta, por ejemplo: Videos. De modo que quedara asi:

Hasta ahora no hemos hecho que el slider aparezca en el blog, unicamente hemos agregado el estilo en el css y el codigo de configuracion de la etiqueta con sus imagenes o miniaturas y los tiempos que se mostrara cada post.

Ahora vamos a buscar este codigo:

Y pegamos el siguiente codigo abajo, esto hara que el slider o carusel se muestre en el index del blog y no en todas y cada entrada:

Listo! tenemos ahora en nuestro blog un slider que se actualiza de forma automatica.
Ver Demo

Si no me aparece en mi plantilla la etiqueta <div id='main-wrapper'> donde pego el ultimo código???

Saludos!!!

maccerhua · 19 Mar 2013

No me funciona

webbber · 19 Mar 2013

aqui esta el demo > Johny Darkstore

AlexxxBcN · 20 Mar 2013

Buen aporte!!! no me funcionó!! pero lo encontre en otro sitio y si me funciono
gracias!!!!

Tutorial: Cómo crear un slider automático con imágenes en Blogger

webbber

Carlos Arreola

lordalexander

fullpablo

sneijder

webbber

spambauer

mateopereira

Radick

ultrox23

mateopereira

webbber

mateopereira

webbber

Liliru

JuanDRomero

tested cars

maccerhua

webbber

AlexxxBcN

Temas similares