TOOLBOXBLOG: Slider Carrusel "últimas entradas"

Slider Carrusel "últimas entradas" para Blogger

http://www.amorsevillista.com/2012/12/slider-carrusel-ultimas-entradas-para.html

(FUNCIONA)

Este es un slider creado por Maskolis y adaptado ha mostrar las últimas entradas por etiquetas. He modificado un poco el slider, no mucho en realidad, sólo he cambiado la forma como se muestran los resúmenes de las entradas y que muestre las últimas entradas en lugar de por etiquetas.

La demostración la tenéis en la portada de este mismo blog un poco modificado.

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{
margin:auto;
width:898px; /*--Ancho completo del carrusel--*/
height:200px;/*--Alto completo del carrusel--*/
border:1px solid #fff;
position:relative;
display:block;
background:#CCC; /*--Color del fondo del carrusel--*/
}
#carousel .container{
position:absolute;
left:25px;
width:815px;/*--Ancho del carrusel Interior--*/
height:200px;/*--Alto del carrusel Interior--*/
overflow:hidden
}
#carousel #previous_button{
position:absolute;
width:25px;height:200px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgllPdseIEHI1CslHoorphZTgvzqRS2H7ui5ZEKU1MomQltZU9qReK3i-aaMgA5kZ99PvWklCUpaXooeQXC68ettFHJEqEeqYbv-BWzxZlkuji8EDlupR4Kag7Kq6olTLHCIxrVEmmaY0I/s1600/prev.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:25px;height:200px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFLpP7dDUUgs4Q194S4_8q6YQG6401a9tk4j6SR3rTfjPNYIuLBMKYjVWx7XEcyXXYQqMv4NL65jP1RuwJaiA03jEo5vPP0n1sifwZNWRfBjEtmJ2mH96HtfEdZzP3lQOLd-uuVH4RLaM/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel #previous_button:hover,#carousel ul li:hover{filter:alpha(opacity=80);opacity:.8}
#carousel ul{width:100000px;position:relative;margin-top:10px;}
#carousel ul li{background:#fff ;display:inline;float:left;text-align:center;font-weight:600;line-height:1.1em;width:185px;height:165px;margin:0 1px 10px 12px; padding:6px}
#carousel ul li a.slider_title{color:#242424;display:block;margin-top:0px;}/*--color texto--*/
#carousel ul li a.slider_title:hover{color:#9B0606;}/*--color texto al pasar cursor--*/

El siguiente paso es colocar el script, introduzca el siguiente código encima del código </ head>: SCRIPT: ver código

//<![CDATA[

(function($) {

// Compliant with jquery.noConflict()

$.fn.jCarouselLite = function(o) {

o = $.extend({

btnPrev: null,

btnNext: null,

btnGo: null,

mouseWheel: false,

auto: null,

speed: 200,

easing: null,

vertical: false,

circular: true,

visible: 3,

start: 0,

scroll: 1,

beforeStart: null,

afterEnd: null

}

, o || {

}

);

return this.each(function() {

// Returns the element collection. Chainable.

var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";

var div = $(this), ul = $("ul:first", div), tLi = $(".car", ul), tl = tLi.size(), v = o.visible;

if(o.circular) {

ul.prepend(tLi.slice(tl-v-1+1).clone())

.append(tLi.slice(0,v).clone());

o.start += v;

}

var li = $(".car", ul), itemLength = li.size(), curr = o.start;

div.css("visibility", "visible");

li.css({

overflow: "hidden", float: o.vertical ? "none" : "left"}

);

ul.css({

padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"}

);

//div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "29px"});

div.css({

overflow: "hidden", "z-index": "2"}

);

var liSize = o.vertical ? height(li) : width(li);

// Full li size(incl margin)-Used for animation

var ulSize = liSize * itemLength;

// size of full ul(total length, not just for the visible items)

var divSize = liSize * v;

// size of entire div(total length for just the visible items)

li.css({

width: li.width()}

);

ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));

div.css(sizeCss, divSize+"px");

// Width of the DIV. length of visible images

if(o.btnPrev)

$(o.btnPrev).click(function() {

return go(curr-o.scroll);

}

);

if(o.btnNext)

$(o.btnNext).click(function() {

return go(curr+o.scroll);

}

);

if(o.btnGo)

$.each(o.btnGo, function(i, val) {

$(val).click(function() {

return go(o.circular ? o.visible+i : i);

}

);

}

);

if(o.mouseWheel && div.mousewheel)

div.mousewheel(function(e, d) {

return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);

}

);

if(o.auto)

setInterval(function() {

go(curr+o.scroll);

}

, o.auto+o.speed);

function vis() {

return li.slice(curr).slice(0,v);

};

function go(to) {

if(!running) {

if(o.beforeStart)

o.beforeStart.call(this, vis());

if(o.circular) {

// If circular we are in first or last, then goto the other end

if(to<=o.start-v-1) {

// If first, then goto last

ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");

// If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.

curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;

}

else if(to>=itemLength-v+1) {

// If last, then goto first

ul.css(animCss, -( (v) * liSize ) + "px" );

// If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.

curr = to==itemLength-v+1 ? v+1 : v+o.scroll;

}

else curr = to;

}

else {

// If non-circular and to points to first or last, we just return.

if(to<0 || to>itemLength-v) return;

else curr = to;

}

// If neither overrides it, the curr will still be "to" and we can proceed.

running = true;

ul.animate(

animCss == "left" ? {

left: -(curr*liSize) }

: {

top: -(curr*liSize) }

, o.speed, o.easing,

function() {

if(o.afterEnd)

o.afterEnd.call(this, vis());

running = false;

}

);

// Disable buttons when the carousel reaches the last/first, and enable when not

if(!o.circular) {

$(o.btnPrev + "," + o.btnNext).removeClass("disabled");

$( (curr-o.scroll<0 && o.btnPrev)

(curr+o.scroll > itemLength-v && o.btnNext)

[]

).addClass("disabled");

}

return false;

};

}

);

};

function css(el, prop) {

return parseInt($.css(el[0], prop)) || 0;

};

function width(el) {

return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');

};

function height(el) {

return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');

};

}

)(jQuery);

//]]></script>

//<![CDATA[

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielfZJpoZuVIrO7ZutSoDTsOuN1UorDC8W4pjXHsWzV56gf_KunmXkmbXWu_Q0wqMM_7fte5givzv6gC-GHw0hrhHwJJACUT7yTUt4wTn5YchOaxkK2ZgKVQdrEo8ZNhJe9EdAg5BZflQ/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 140;

summaryTitle = 25;

numposts1 = 15;

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 = ["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="190" height="120" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);

j++;

}

document.write('</ul>');

}

//]]>

</script>



Si en la plantilla ya existe un Query.min.js , el primer código de arriba,  no es necesario que lo instales.



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:   ver código



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

NOTAZA: Este carrusel aparece por defecto en todo el blog, pero en el caso que se pretenda que aparezca o no en sitios concretos se deben utilizar los condicionales encerrando los siguientes scripts:
1: Colocar el condicional <b:if cond='data:blog.url != data:blog.homepageUrl'> delante del primer script (que es el segundo código que he puesto en esta entrada) y se cierra.
Ejemplo:
<b:if cond='data:blog.url != data:blog.homepageUrl'> <script type='text/javascript'>
        //<![CDATA[
        (function($) {
          // Compliant with jquery.noConflict()
          $.fn.jCarouselLite = function(o) {.....
...................... (poner todo el código)

j++;

}

document.write('</ul>');

}

//]]>

</script></b:if>

2:colocar el mismo condicional también delante del segundo script (que es el tercer código que he puesto en esta entrada).

Ejemplo:

<b:if cond='data:blog.url != data:blog.homepageUrl'><div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default?max-results="+numposts1+" .... (RESTO DEL CÓDIGO)

});

        })})(jQuery)

</script></b:if>

En este ejemplo he utilizado un condicional para que no aparezca en la pagina de inicio o pagina principal ya que en este blog tengo otro slider de entradas alojado en la misma cabecera de la página principal y no conviene cargar la vista. Pero puede interesar otro tipo de condicional, por lo tanto aconsejo visitar la entrada de dichos códigos para poner exactamente el que se precisa.
http://toolboxxblog.blogspot.com.es/2014/11/condicionales-de-blogger.html

Páginas

martes, 4 de noviembre de 2014

Slider Carrusel "últimas entradas"

Slider Carrusel "últimas entradas" para Blogger

No hay comentarios:

Publicar un comentario

flecha