Slider de entradas publicadas recientemente

Hoy vamos a publicar un Slider realizado con Jquery para que se muestren las entradas publicadas recientemente.

Para publicarlas en nuestro blog, tenemos que modificar nuestra plantilla.
Como siempre digo antes de modificar cualquier parte de nuestra plantilla es tener una copia de seguridad guardada en nuestro disco duro por si algo no nos sale bien.
Para ello puedes ver este post que mostramos como hacer nuestra copia de seguridad paso a paso.



Un vez tengamos nuestra copia de seguridad nos tenemos que ir a :
Plantilla > HTML-
Y buscamos ]]></b:skin>. Justo antes pegamos este codigo:

        /* Easy Slider (Automático)

        -------------------------------------------------------------------- */

        #slide-container {

        width:480px;

        height:320px;

        position:relative;

        }

        #slider {

        width:480px;

        height:320px;

        left:25px;

        overflow-x:hidden;

        overflow-y:hidden;

        position:relative;

        }

        .slide-desc {

        background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuwVgVL96Jqn7bX9w7JMzJyjz2OzJScykqdeiPQaPc2Al7snTLLkt60TUEltsArRsdoqDMDGdtYhGm40NkppxHOPLaf_M4tm8_U0oHvpHqfTSp1yZvZGa3sxh4aEnSuJBoP0wIPUUG0KU/s30/bgtransparent.png) repeat scroll 0 0;

        color:#FFFFFF;

        padding:10px;

        position:absolute;

        text-align:left;

        bottom:0;

        width:100%;

        z-index:99999;

        }

        .slide-desc h2{

        display:block;

        color:#f2f2f2;

        font-size:14px;

        }

        .crosscol .widget-content {position:relative;}

        #slider ul, #slider li {

        margin:0;

        padding:0;

        list-style:none;

        }

        #slider li {

        width:480px;

        height:320px;

        overflow:hidden;

        }

        #prevBtn, #nextBtn {

        display:block;

        width:30px;

        height:77px;

        position:absolute;

        left:-30px;

        text-indent:-9999px;

        top:71px;

        z-index:1000;

        }

        #nextBtn {

        left:500px !important;

        }

        #prevBtn, #nextBtn {

        display:block;

        left:0;

        position:absolute;

        top:132px;

        width:30px;

        height:77px;

        z-index:1000;

        }

        #prevBtn a, #nextBtn a {

        display:block;

        position:relative;

        width:30px;

        height:77px;

        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBrs4bvCoNeTK_kqoK1Jj1RcWSA5Q27qH9Dx6CI3p303Z2vClVqV3rlK8Ce72M2VjZeky9MmzEm_WEw67btYwD6JarDf5JLtMQhAvkr8DACellsFQHHDDY3uEw1BjxYAsdhopJAWUv5us/s77/flecha-prev.png) no-repeat 0 0;

        }

        #nextBtn a {

        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJhIKqWMCa5DvTlYcrj4wlDuWDR8Vp2BqhDxzXDEaAV87YBGalCQHIy-NGppqVd9BIBo0wr_eFVVP3KLQR0U3KCgMXrV7seOShXGb9UBKVyJwZTKXzsMlTh8PLEBaOwwCq7wWOxQ9tx0M/s77/flecha-next.png) no-repeat 0 0;

        }

        /* Estilos de los números */

        ol#controls{

        margin:8px 25px;

        padding:0;

        height:28px;

        }

        ol#controls li{

        margin:0 4px 0 0;

        padding:0;

        float:left;

        list-style:none;

        height:28px;

        line-height:28px;

        }

        ol#controls li a{

        float:left;

        height:28px;

        line-height:28px;

        border:1px solid #000; /* Borde de los números */

        background:#0B243B; /* Color de fondo de los números */

        color:#fff; /* Color de los números */

        padding:0 10px;

        text-decoration:none;

        }

        ol#controls li.current a{

        background:#5DC9E1; /* Color de fondo del número activo */

        color:#fff; /* Color del número activo */

        }

        ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

Ahora buscamos </head>  y antes agregamos este script:

        <script>
        //<![CDATA[
        var showpostthumbnails_gal = true;
        var showpostsummary_gal = true;
        var random_posts = false;
        var numchars_gal = 150;
        var numposts_gal = 10;
        function showgalleryposts(json) {
        var numPosts = json.feed.openSearch$totalResults.$t;
        var indexPosts = new Array();
        document.write('<ul>');
        for (var i = 0; i < numPosts; ++i) {
        indexPosts[i] = i;
        }
        if (random_posts == true){
        indexPosts.sort(function() {return 0.5 - Math.random()});
        }
        if (numposts_gal > numPosts) {
        numposts_gal = numPosts;
        }
        for (i = 0; i < numposts_gal; ++i) {
        var entry_gal = json.feed.entry[indexPosts[i]];
        var posttitle_gal = entry_gal.title.$t;
        for (var k = 0; k < entry_gal.link.length; k++) {
        if ( entry_gal.link[k].rel == 'alternate') {
        posturl_gal = entry_gal.link[k].href;
        break;
        }
        }
        if ("content" in entry_gal) {
        var postcontent_gal = entry_gal.content.$t
        }
        s = postcontent_gal;
        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 != "")) {
        var thumburl_gal = d
        } else var thumburl_gal = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcvyv-5B4R2PCph1IEx-14ZL8FE164PAPz1kAPukIU6NGuXOlNMBBW2qWp9ApakIIjbtQf9z0FH_2Mm0BHhno_PSLd2WdIHxCMKP23NgHjSoH6t5bcOlgOPCk_kVplkHV4frGgrKXLico/s0/sin-imagen.png';
        document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');
        document.write(posttitle_gal + '</h2>');
        var re = /<\S[^>]*>/g;
        postcontent_gal = postcontent_gal.replace(re, "");
        if (showpostsummary_gal == true) {
        if (postcontent_gal.length < numchars_gal) {
        document.write(postcontent_gal);
        document.write('</span>')
        } else {
        postcontent_gal = postcontent_gal.substring(0, numchars_gal);
        var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
        postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
        document.write(postcontent_gal + '...');
        document.write('</span>')
        }
        }
        document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="480px" height="320"/></a></div>');
        document.write('</li>');
        }
        document.write('</ul>');
        }
        //]]>
        </script>

Lo siguiente será pegar antes de </body> este script:

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

        <script type='text/javascript'>
        //<![CDATA[
        /*
        * Easy Slider 2.2.2 - jQuery plugin
        * written by Alen Grakalic
        * http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
        * Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
        */
        (function($){$.fn.easySlider=function(options){var defaults={prevId:'prevBtn',prevText:'Previous',nextId:'nextBtn',nextText:'Next',controlsShow:true,controlsBefore:'',controlsAfter:'',controlsFade:true,firstId:'firstBtn',firstText:'First',firstShow:false,lastId:'lastBtn',lastText:'Last',lastShow:false,vertical:false,speed:800,auto:false,pause:5000,continuous:false,numeric:false,numericId:'controls'};var options=$.extend(defaults,options);this.each(function(){var obj=$(this);var s=$("li",obj).length;var w=$("li",obj).width();var h=$("li",obj).height();var clickable=true;obj.width(w);obj.height(h);obj.css("overflow","hidden");var ts=s-1;var t=0;$("ul",obj).css('width',s*w);if(options.continuous){$("ul",obj).prepend($("ul li:last-child",obj).clone().css("margin-left","-"+w+"px"));$("ul",obj).append($("ul li:nth-child(2)",obj).clone());$("ul",obj).css('width',(s+1)*w)};if(!options.vertical)$("li",obj).css('float','left');if(options.controlsShow){var html=options.controlsBefore;if(options.numeric){html+='<ol id="'+options.numericId+'"></ol>'}else{if(options.firstShow)html+='<span id="'+options.firstId+'"><a href=\"javascript:void(0);\">'+options.firstText+'</a></span>';html+=' <span id="'+options.prevId+'"><a href=\"javascript:void(0);\">'+options.prevText+'</a></span>';html+=' <span id="'+options.nextId+'"><a href=\"javascript:void(0);\">'+options.nextText+'</a></span>';if(options.lastShow)html+=' <span id="'+options.lastId+'"><a href=\"javascript:void(0);\">'+options.lastText+'</a></span>'};html+=options.controlsAfter;$(obj).after(html)};if(options.numeric){for(var i=0;i<s;i++){$(document.createElement("li")).attr('id',options.numericId+(i+1)).html('<a rel='+i+' href=\"javascript:void(0);\">'+(i+1)+'</a>').appendTo($("#"+options.numericId)).click(function(){animate($("a",$(this)).attr('rel'),true)})}}else{$("a","#"+options.nextId).click(function(){animate("next",true)});$("a","#"+options.prevId).click(function(){animate("prev",true)});$("a","#"+options.firstId).click(function(){animate("first",true)});$("a","#"+options.lastId).click(function(){animate("last",true)})};function setCurrent(i){i=parseInt(i)+1;$("li","#"+options.numericId).removeClass("current");$("li#"+options.numericId+i).addClass("current")};function adjust(){if(t>ts)t=0;if(t<0)t=ts;if(!options.vertical){$("ul",obj).css("margin-left",(t*w*-1))}else{$("ul",obj).css("margin-left",(t*h*-1))}clickable=true;if(options.numeric)setCurrent(t)};function animate(dir,clicked){if(clickable){clickable=false;var ot=t;switch(dir){case"next":t=(ot>=ts)?(options.continuous?t+1:ts):t+1;break;case"prev":t=(t<=0)?(options.continuous?t-1:0):t-1;break;case"first":t=0;break;case"last":t=ts;break;default:t=dir;break};var diff=Math.abs(ot-t);var speed=diff*options.speed;if(!options.vertical){p=(t*w*-1);$("ul",obj).animate({marginLeft:p},{queue:false,duration:speed,complete:adjust})}else{p=(t*h*-1);$("ul",obj).animate({marginTop:p},{queue:false,duration:speed,complete:adjust})};if(!options.continuous&&options.controlsFade){if(t==ts){$("a","#"+options.nextId).hide();$("a","#"+options.lastId).hide()}else{$("a","#"+options.nextId).show();$("a","#"+options.lastId).show()};if(t==0){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}else{$("a","#"+options.prevId).show();$("a","#"+options.firstId).show()}};if(clicked)clearTimeout(timeout);if(options.auto&&dir=="next"&&!clicked){;timeout=setTimeout(function(){animate("next",false)},diff*options.speed+options.pause)}}};var timeout;if(options.auto){;timeout=setTimeout(function(){animate("next",false)},options.pause)};if(options.numeric)setCurrent(0);if(!options.continuous&&options.controlsFade){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}})}})(jQuery);

        $(document).ready(function(){
        $("#slider").easySlider({
        auto: true,
        continuous: true,
        numeric: false // Cambiar a true si se quiere mostrar la paginación de números
        });
        });
        //]]>
        </script>

Por último entra en la sección de Diseño y agrega un elemento HTML/Javascript, ahí pega esto:

        <div id="slider">
        <script style="text/javascript">
        var numposts_gal = 10; // Número de entradas a mostrar        var numchars_gal = 150; // Número de caracteres en el resumen        var random_posts = false; // Cambiar por true si se quieren aleatorios        </script>
        <script src="http://nombre-de-mi-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
        </div>

Cambia el nombre de tu blog donde se indica y listo.

En color naranja puedes ver algunas variantes, una de ellas es que con numeric podemos hacer desaparecer las flechas y en su lugar mostrar una paginación con números para poder navegar por las entradas del slider.
En el último código podrás ver dónde configurar el número de entradas a mostrar, el número de caracteres en el resumen, y si se desea que las entradas aparezcan de forma aleatoria.

Si deseas cambiar las medidas del slider cambia todos los width:480px; y height:320px; que encuentres.
Las flechas son imágenes, así que si deseas modificarlas en color o forma tendrás que cambiar las URLs que se encuentran en el primer código.

Como puedes ver, es un slider con muchas ventajas, la principal es que muestra el contenido de forma automática, sin necesidad de estar agregando entrada por entrada; pero además, la posibilidad de elegir la paginación y las entradas de forma aleatoria le dan un extra.

Indice
HTML
Plantillas