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

webbber Seguir

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

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:pointer;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:pointer;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:
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
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Excelente comerciante!
Suscripción a IA
Desde
6 Abr 2009
Mensajes
11.327
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

1
Kappa
Verificación en dos pasos activada
Suscripción a IA
Desde
17 Mar 2010
Mensajes
2.561
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:
 

webbber

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

spambauer

Beta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
5 Ago 2010
Mensajes
82
lo voy a probar , buen aporte
 

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.478
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
 

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.
2up2zol.gif

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!!!
 

AlexxxBcN

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

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba