13 enero 2013

Carrusel automático "Últimas Entradas" V.2

Este es otro tipo de slider creado por Maskolis y adaptado ha mostrar las últimas entradas por etiquetas. Como en el anterior SLIDER  también he modificado un poco este, no mucho en realidad, sólo he cambiado el tamaño y colocado la fecha en español, aparte para que muestre  las últimas entradas en lugar de por etiquetas.

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:
#carousel{width:900px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#424242;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:880px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(http://i17.servimg.com/u/f17/13/20/23/83/previo10.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(http://i17.servimg.com/u/f17/13/20/23/83/next10.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 12px Arial;border:0px solid #ccc;width:192px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#carousel a img{display:block;background:#fff;margin-top:0}

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 src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/carousellite.js' type='text/javascript'></script>
<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 = 12;

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 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[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 = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
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="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';

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

Si en la plantilla ya existe un SCRIPT Query.min.js , el primer script del código de este segundo paso, no es necesario que lo instales, lo que sería:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

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='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?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: 4,
start: 0,
circular: true,
btnPrev: &quot;#previous_button&quot;,
btnNext: &quot;#next_button&quot;
});
})})(jQuery)
</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.



Escrito por:

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

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

19 comentarios

gracias me funciono perfecto segui los pasos gracias amigo....

les agradeceré que visiten mi blog
http://todofullprogramasjuegos.blogspot.com/

Juegos PC
Programas Full
Series Animadas
Películas Anime
Películas Infantiles
Sistemas Operativos
Gracias los que me visiten

Amor Sevillista tengo un problema hace unos dias el carrusel-automatico-ultimas-entradas-v2. me esta fallando detalles del problema
1.cuando entras la primera vez al Blogt,,,,http://todofullprogramasjuegos.blogspot.com/ cargar perfectamente corre bien todo

2.......Cuando lo vuelves a regargar ese mismo instante ya no me corre el carrusel-automatico-ultimas-entradas-v2. este problema esta hace como dos semanas amorsevillista espero tu ayuda gracias por tus tutoriales

Luis llevas razón, todo es debido al hosting donde alojaba los script, lo han cerrado y ahora estoy cambiando los script de hosting.

Cambia esta url: http://sevillporelmundo.webcindario.com/carousellite.js por esta otra y ya te debería funcionar: https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/carousellite.js

Muchas Gracias Lo Probare Le Aviso Si Me Funciona Gracias Por Tu Respuesta

Gracias Me Funciono Sin Tu Ayuda Mi Blogt. estaría Fatal sin el carrusel-automatico-ultimas-entradas-v2 gracias por tu tiempo y tus Tutoriales.. eres Grande Amor Sevillista

Hola sevillista, gracias por compartir tus conocimientos!
Solo una pregunta, sabes a que puede ser debido que no cargue imagenes en las miniaturas del carrusel?
Gracias

Iñaki, si no carga las imágenes es porque no hay imagen o está mal editada la entrada.

hola profesor se me ve muy mal ala hora de cargar que debo hacer?

Delmiro, mal en que sentido, yo lo veo bien lo que ocurre es que muestra 12 entradas y si no las tienes debes modificar las entradas a mostrar en: numposts1 = 12; y colocar las que desees.

sigue igual no me hace ningun efecto cambie eso valores y se ven como pasan los post pero despues no se ven nada y eh publicado barias veces nada..

Delmiro, tienes dos códigos iguales solo lo has cambiado en uno, observalo verás como tienes otro numposts1 = 12 ese es el bueno el otro no te vale para nada.
Tienes instalado dos veces el script del carrusel.

gracias .no se que debio pasar? te doy un 10 de evaluacion

Delmiro, elimina este código de tu blog que no sirve para nada y te ralentiza la velocidad del blog.
<script src='http://sevillporelmundo.webcindario.com/tabview.js' type='text/javascript'></script>

hola estimado amigo, tu slider esta muy elegante, lo tengo instalado en mi BLOG, pefectamente, el unico problema que tengo, es que me gustaria ocultarlo en la version movil de mi blog si se puede... http://matte23.blogspot.com/

Me aparece y desaparece las imagenes del slider ?

Fernando este slider no es responsive como tu plantilla y te quedaría muy mal.
Busca en la red un slider o carrusel responsive que se adapte a tu plantilla.


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"