Tutorial: Cómo crear un slider automático basado en etiquetas

webbber

Préstamo
Xi
Redactor
Verificación en dos pasos desactivada
Desde
5 Jul 2010
Mensajes
4.483
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:

#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(http://2.bp.blogspot.com/-i9rfuXWNIjo/T5LAemTP3XI/AAAAAAAAArY/r7FcfxzgZpk/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(http://3.bp.blogspot.com/-APGScJbAlLM/T5LDZ9LDgkI/AAAAAAAAAr4/vGy7EquPGME/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(http://3.bp.blogspot.com/-4wNqeM6eRvY/T5LGCrdA9iI/AAAAAAAAAsE/4rjwULz47WU/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(http://1.bp.blogspot.com/-pSHFy8ff1R0/T5LDZHkHIzI/AAAAAAAAArw/PCfZ762nK3E/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(http://2.bp.blogspot.com/-vSaPjyDhEMI/T5LGB-g1_lI/AAAAAAAAAsA/wyUPBLWY15E/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(http://3.bp.blogspot.com/-NsKF7TyEX7I/T418sIGTo7I/AAAAAAAAAnc/OdQmhV73piY/s1600/main.png) 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:
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";

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

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

Carlos Arreola

Admin
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
4.358
Tutorial aprobado y agregado al listado de tutoriales, buen aporte.
 
L

lordalexander

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

Kappa
Verificación en dos pasos desactivada
Desde
17 Mar 2010
Mensajes
2.540
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

Beta
Verificación en dos pasos desactivada
Desde
8 Sep 2011
Mensajes
46
lo he probado pero al darle clic en la flecha de siguente no da ningun efecto :/
 

webbber

Préstamo
Xi
Redactor
Verificación en dos pasos desactivada
Desde
5 Jul 2010
Mensajes
4.483
seguro es por la carita, debes de reemplazar el codigo correspondiente
 

spambauer

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
5 Ago 2010
Mensajes
79
lo voy a probar , buen aporte
 

mateopereira

Beta
Verificación en dos pasos desactivada
Desde
29 Dic 2012
Mensajes
98
Ya lo probé en 3 blogs diferentes y nada :grumpy:
 

Radick

Mi
Redactor
Verificación en dos pasos desactivada
Desde
29 Abr 2010
Mensajes
3.032
Muy buen tutorial pero un lugar de tener el codigo
Insertar CODE, HTML o PHP:
Asi
Tiene el codigo
Lo que hace que falle. Espero lo corrijan porque no corre. Saludos.
 

ultrox23

Beta
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
6 Dic 2012
Mensajes
112
Gracias por el aporte, lo pondré en práctica
 

mateopereira

Beta
Verificación en dos pasos desactivada
Desde
29 Dic 2012
Mensajes
98
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

Préstamo
Xi
Redactor
Verificación en dos pasos desactivada
Desde
5 Jul 2010
Mensajes
4.483
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
 

Liliru

Beta
Verificación en dos pasos desactivada
Desde
3 Feb 2012
Mensajes
51
Buen aporte, voy a probarlo ahora...:encouragement:
 

JuanDRomero

Eta
SEO
Verificación en dos pasos desactivada
Desde
14 Ago 2011
Mensajes
1.461
Hola, puedes colocar algun demo para ver como queda?
 

tested cars

Beta
Verificación en dos pasos desactivada
Desde
11 Oct 2012
Mensajes
53
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

Zeta
Diseñador
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Ene 2012
Mensajes
1.533
No me funciona
 

AlexxxBcN

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
18 Feb 2013
Mensajes
408
Buen aporte!!! no me funcionó!! pero lo encontre en otro sitio y si me funciono
gracias!!!!
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba