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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2JiqqqfWXdgC6bS0u_MLDuCgpafGFjn-FjeJGZ-jMoxdRffHnoAQMktEYKOt6LTF28ssYyYzChLDB0br2mfu0bDEleRXsx-fa3Q6JB4fQjpIFH5JXmEPGD1jtDalbA5Gja3gW-AeW-WI/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("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#carousel .container").jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 4,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(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.
