Slideshow degli ultimi 80 articoli per Blogger.

Slideshow dei titoli degli ultimi post pubblicati su Blogger mostrati con pulsanti di navigazione e numerazione delle pagine.

Nei siti che vengono aggiornati con continuità c'è l'esigenza di mostrare ai lettori abituali e a quelli occasionali le ultime pubblicazioni con widget quali quello degli ultimi articoli. Chi cura particolarmente l'estetica del sito opta per delle soluzioni di maggior impatto visivo quale quella dello slideshow delle miniature degli ultimi post. Il gadget che vado a presentare mostra uno slide degli ultimi 80 post pubblicati che vengono visualizzati quattro per quattro per un totale di 20 pagine.

Il widget è ottenuto utilizzando JQuery e TinyCarousel e invece di mostrare quattro post per ogni schermata si potrebbe decidere di mostrarne solo tre per un numero di pagine inferiore. In questo caso bisogna diminuire la larghezza del widget e variare i parametri. Sotto ai titoli dei post è presente il link Leggi tutto per aprirlo e sono anche visibili le frecce di navigazione e i numeri di pagina. E' anche possibile personalizzare tutti i colori mentre quelli dei link vengono ereditati dallo stile del blog

Il widget può essere installato in una pagina statica in modalità HTML oppure in un elemento pagina. In questo caso si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il codice in Sezioni del sito. Non occorre modificare il modello. Il codice sia per il widget sia per la pagina è il seguente

<style type="text/css">
.blog-post-slider {
height: 1%;
overflow: hidden;
padding: 0 0 10 2px;
}
.blog-post-slider .viewport {
float: left;
width: 680px;
height: 180px;
overflow: hidden;
position: relative;
}
.blog-post-slider .buttons {
display: block;
margin: 30px 10px 0 0;
background-position: 0 -38px;
text-indent: -999em;
float: left;
width: 50px;
height: 50px;
overflow: hidden;
position: relative;
}
.blog-post-slider .next {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ivlIn9MChKU5FqNF0yxJAebn_3sn30UBaUf01pUh5s3bQ_l4mZf7A1-CEGKjw6k9vue4UuWkqGcqkC9zLXlms0GfQ09O91t2UjDwqFz7mg2XRWsNZKHOySag2Lsuj-bmlpKZUOH1b_Q/s48/nextarrow.png) no-repeat scroll 0 0 transparent;
background-repeat:no-repeat;
background-position: 0 0;
margin: 30px 0 0 0px;
}
.blog-post-slider .prev {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNN2OJ_OSiics8qrqlAgKmwdw9NJUxdmGGw5uVa-fu9bKwJA_C1wpT3JQu-9ehztpAss0V3ur3wW3oKlGhhyphenhyphenrL1t5Pz4pjRyD0GInfVP2tRJZbVvobUkAYOCSI_Ik1NV5irxGJqTl2P3U/s48/prevarrow.png);
background-repeat:no-repeat;
background-position: 0 0;
margin: 30px 0 0 0px;
}
.log-post-slider .disable {
visibility: hidden;
}
.blog-post-slider .overview {
list-style-type: none !important;
position: absolute;
padding: 0;
margin: 0;
width: 240px;
}
.blog-post-slider .overview li.post {
float: left;
margin: 0 20px 0 0;
padding: 2px;
height: 170px;
width:150px;
}
.blog-post-slider .post {
height: 175px;
list-style-type: none !important;
padding: 12px;
    border-radius: 12px 12px 12px 12px;
    background: #000;
}
.blog-post-slider .post-title {
border: none !important;
list-style-type: none !important;
}
.post-title {
color: white;
font-style: italic;
font-weight: bold;
font-size:14px;
}
.post-author {
color: white;
font-style: inherit;
font-size:11px;
}
.post-link {
color:#fff;
float: right;
    font-size: 14px;
    text-decoration: none;
    position: absolute;
    bottom:4px;
    padding-left:40px;
}
.post-published {
color: yellow;
font-size:11px;
}
.blog-post-slider .pager {
    clear: both;
    height: 1%;
    list-style: none outside none;
    margin: 0 0 10px;
    overflow: hidden;
}
.blog-post-slider .pager li {
    float: left;
}
.blog-post-slider .pagenum {
    color: #555555;
    display: block;
    font-size: 14px;
    font-weight: bold;
    padding:6px;
    text-align:center;   
    text-decoration: none;
}
.blog-post-slider .active {
    color: brown;
    border:1px solid brown;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js' type='text/javascript'/> </script>
<script>
(function(a){a.tiny=a.tiny||{};a.tiny.carousel={options:{start:1,display:1,axis:"x",controls:true,pager:false,interval:false,intervaltime:3000,rewind:false,animation:true,duration:1000,callback:null}};a.fn.tinycarousel_start=function(){a(this).data("tcl").start()};a.fn.tinycarousel_stop=function(){a(this).data("tcl").stop()};a.fn.tinycarousel_move=function(c){a(this).data("tcl").move(c-1,true)};function b(q,e){var i=this,h=a(".viewport:first",q),g=a(".overview:first",q),k=g.children(),f=a(".next:first",q),d=a(".prev:first",q),l=a(".pager:first",q),w=0,u=0,p=0,j=undefined,o=false,n=true,s=e.axis==="x";function m(){if(e.controls){d.toggleClass("disable",p<=0);f.toggleClass("disable",!(p+1<u))}if(e.pager){var x=a(".pagenum",l);x.removeClass("active");a(x[p]).addClass("active")}}function v(x){if(a(this).hasClass("pagenum")){i.move(parseInt(this.rel,10),true)}return false}function t(){if(e.interval&&!o){clearTimeout(j);j=setTimeout(function(){p=p+1===u?-1:p;n=p+1===u?false:p===0?true:n;i.move(n?1:-1)},e.intervaltime)}}function r(){if(e.controls&&d.length>0&&f.length>0){d.click(function(){i.move(-1);return false});f.click(function(){i.move(1);return false})}if(e.interval){q.hover(i.stop,i.start)}if(e.pager&&l.length>0){a("a",l).click(v)}}this.stop=function(){clearTimeout(j);o=true};this.start=function(){o=false;t()};this.move=function(y,z){p=z?y:p+=y;if(p>-1&&p<u){var x={};x[s?"left":"top"]=-(p*(w*e.display));g.animate(x,{queue:false,duration:e.animation?e.duration:0,complete:function(){if(typeof e.callback==="function"){e.callback.call(this,k[p],p)}}});m();t()}};function c(){w=s?a(k[0]).outerWidth(true):a(k[0]).outerHeight(true);var x=Math.ceil(((s?h.outerWidth():h.outerHeight())/(w*e.display))-1);u=Math.max(1,Math.ceil(k.length/e.display)-x);p=Math.min(u,Math.max(1,e.start))-2;g.css(s?"width":"height",(w*k.length));i.move(1);r();return i}return c()}a.fn.tinycarousel=function(d){var c=a.extend({},a.tiny.carousel.options,d);this.each(function(){a(this).data("tcl",new b(a(this),c))});return this}}(jQuery));
$(document).ready(function(){
var urlofmyBlog ="http://www.ideepercomputeredinternet.com/feeds/posts/default?alt=json-in-script&max-results=80&callback=?",
  ajaxToPost = $.ajax({url:urlofmyBlog, dataType: "jsonp",type: 'get'}), 
  successHandler = function(data){ 
   var entries = data.feed.entry, author, title, publishDate,published, link,   
    carouselContent = $(".blog-post-slider .overview"),   
    paginationElement = $(".pager"),   
    markup = new Array(),   
    pagerMarkup = new Array(), postLength = parseInt(entries.length, 10);  
   $.each( entries, function( key, aPost ) {   
    author = aPost.author[0].name.$t;   
    title = (aPost.title.type == 'html') ? escape(aPost.title.$t) : aPost.title.$t;   
    published = new Date((aPost.published.type == 'html') ? escape(aPost.published.$t) : aPost.published.$t);   
    link = aPost.link[4].href;   
          publishDate = published.getDate() + "-" + published.getMonth() + "-" + published.getFullYear();   
    markup.push("<li class='post'>");   
    markup.push("<div class='post-title'>"+title+"</div>");               
    markup.push("<div class='post-link'><a href = '"+link+"'>Leggi tutto</a></div>");   
    markup.push("</li>");   
   });  
   $(carouselContent).html(markup.join(""));  
   /*Si mostrano 4 post per ogni schermata per un totale di 80/4 = 20 pagine*/  
   for(count =0;count < postLength/4; count++){   
    pagerMarkup.push("<li><a rel='"+count+"' class='pagenum' href='#'>"+(count+1)+"</a></li>");
   }  
   $(paginationElement).html(pagerMarkup.join(""))  
   $('#blog-post-slider').tinycarousel({ pager: true, interval: true, display: 4   });  
  },
  errorHandler = function(){ 
   alert("Error in Ajax Call");
  };
  ajaxToPost.done(successHandler),
  ajaxToPost.fail(errorHandler); 
});
</script>
<div id="blog-post-slider" class="blog-post-slider">
    <a class="buttons prev" href="#">left</a>
    <div class="viewport">
        <ul class="overview">
            <li class="blogger-post">
            </li>
        </ul>
    </div>
    <a class="buttons next" href="#">right</a>
    <ul class="pager">
    </ul>
</div>

Si salva e si visualizza il risultato

I parametri più importanti da modificare sono stati colorati di rosso. Il background è nero (#000) mentre il colore del testo è bianco (white). Ricordo ai meno esperti di leggersi il post sui codici dei colori. Occorre naturalmente sostituire l'URL del vostro sito a quello di questo blog. Chi ha già JQuery nel modello può tralasciare di incollare le righe evidenziate di giallo. Si possono modificare anche le frecce di navigazione cambiando il loro URL.