15 enero 2013

Slider automático de últimas entradas para Blogger



Este slider lo he extraido de la plantilla Johny Crottmag, es un slider hecho con jQuery, y que con su adaptación lo ha hecho automático de manera que muestre las últimas entradas del blog, tal como el carrusel automático V2 que vimos anteayer  o el otro carrusel automático que vimos hace unas semanas, es decir, que el slider mostrará las últimas entradas del blog de forma automática, sin necesidad de agregar manualmente las entradas.

1.- Para poner este slider en tu blog entra en la Edición HTML, y antes de ]]></b:skin>agrega los estilos:

#featuredContent{float:left;width:500px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:500px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:500px;min-height:30px;height:auto!important;background:url(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:475px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:70px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}

2.- Ahora antes de </head> agrega este script que es un poco largo:
Importante: Si tienes instalado en tu plantilla un /jquery.min.js, elimina la primera línea del código, concretamente esta: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/222517121138/contentslider.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 = 100;
summaryTitle = 25;
numposts3 = 6;
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts3(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts3; i++) {
var entry = json.feed.entry[i];
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[i] = 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[i] = 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 = '<div class="contentdiv"><a href="'+posturl+'"><img width="500" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}
}
function showrecentposts4(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts3; i++) {
var entry = json.feed.entry[i];
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[i] = 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[i] = 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><a class="toc" href="#"><img width="70" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
document.write(trtd);
j++;
}
}
//]]>
</script>

3.- Guarda cambios y por último entra en la sección de Diseño y agrega un elemento HTML/Javascript, ahí pega esto:

<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
<div class='clear'></div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider",
contentsource: ["inline", ""],
toc: "markup",
nextprev: ["", ""],
revealtype: "mouseover",
enablefade: [true, 0.4],
autorotate: [true, 5000],
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>

Una vez agregado y guardado el elemento HTML/Javascript, colócalo encima de entradas de blog.

Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

26 comentarios

Se ve interesante, habrá que probarlo....Gracias

Les agradezco bastante por la información,me sirvió muchísimo!
un beso grande

¿Como puedo hacer para que no se mueva automático?

Fácil, busca en el gadget HTML este trozo: autoplay: true, y cambia true por false.
Saludos.

Hola Antonio: gracias por este post que me resulta facil pero me pierdo un poco en las modificaciones en el CSS. ¿que valores tiene tu blog para hacerme una idea?, ¿los colores yya vienen por defecto o se pueden modificar en el CSS? #slideshowThumb #slideshowContent por ejemplo antes en los codigos script venia justo debajo el valor; color: #CCCCC pero aqui no se localiza ¿se pueden modificar? gracias ,

Está todo explicado en la entrada pero con el CSS puedes modificar todo lo que desees, por ejemplo el fondo ahora mismo es gris, puedes cambiarlo en #featuredContent {background:#eee cambiando eee por el color que desees.

Puedes ver los colores en tabla de colores

como puedes justificar el texto del slider

Hacia los lados el texto se justifica solo, aunque disminuyas el tamaño de la imagen.

Ahora si lo que quieres es subir o bajar el texto, debes buscar esta parte:
#slideshowContent .featuredPost .featuredPostContent {padding: 0px; } e ir aumentando el padding que ahora está a 0 y colócale 5px, 10px, etc...

Tengo una plantilla con Jquery, elimine la primera linea pero no me funciono
.

M. Cabrera, si no me dejas la dirección de tu blog no puedo ayudarte.

A mi tampoco me funcionó... :(
No me sale la imagen grande ni se mueve el invento.
Soy novata en esto y lo he probado de todas las maneras que dices y no hay forma.
Este es mi blog:
http://mamastiempocompleto.blogspot.com.es/
Un saludo.

Mamás a tiempo completo, exacto! había un problema en el script, ya está solucionado aunque he cambiado un poco el diseño.

Saludos.

No se si tendré mal la configuración de explorer, pero ahí no funciona, en cambio,en firefox si.....misterios de la informática.....

Comprobado en Mozilla Firefox, Crhome y Explorer y en todos resultados satisfactorios.

Gracias!, será problema de mi configuración del explorer....ya cacharrearé.
Un saludo.

Hola Antonio!!

Instale el codigo y si me salio el slider, pero un poco diferente a como se muestra en el DEMO.. visita mi Blog para que lo veas, por favor este es mi blog http://futboluniversal2013.blogspot.mx/

Gracias espero tu respuesta para modificarlo :)

Raúl tienes el(primer código)CSS, mal colocado.

Debe ir antes de ]]></b:skin> en la plantilla.

hola que tal, quisiera que el titulo de la entrada no quedara tan separado de la descripción, ya intente de todas formas pero al parecer no encuentro la correcta.

Mi blogger es: www.pasionachivas.blogspot.mx

Luis, busca este trozo de código #featured-slider .sliderPostInfo h2 y añadele al final después de padding:0 5px este otro código : ;top:10px y ve aumentando o disminuyendo según tus necesidades.

Hola muchas gracias por tus trucos y astucias, están geniales. Pero cuando pulso ctrl +f no me salia el ]]> y ahora no me sale el < /head > a que cree que se debe? Gracias de antemano por su ayuda.

Este comentario ha sido eliminado por el autor.

Cristhian, te lo vas a encontrar en la primera flechita al lado de la numeración que te sale en la plantilla en modo edición.

Sí tienes razón, ahora lo puedo encontrar, por mi poca experiencia en esto es que pensé que capaz lo había borrado por error colocando otros códigos, ahora que intento colocar en el buscador no puedo encontrar este ] ] > < / b : s k i n > que es para empezar a instalar vuestro slider. Saludos y gracias por responder

Sí, es correcto, lo encontré. Probando intenté cambiarlo por como estaba antes y parece ya no cambia, al parecer he hecho un lío con tantos códigos. Jejej Gracias veré si puedo arreglarlo del todo y así me funcionen correctamente todo :)


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"