Pubblicato il 13/05/13e aggiornato il

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://lh3.googleusercontent.com/-51gtfKREcbo/UZCZ2sdUplI/AAAAAAAAhsg/pNwtANpjEVk/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://lh6.googleusercontent.com/-_18kP582g5g/UZCZ4_Oip8I/AAAAAAAAhso/EmHSK3LHjV4/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. 




9 commenti :

  1. Caro Ernesto, io vedo solo le due frecce di navigazione (neanche nella stessa riga orizzontale). Dove sbaglio?

    RispondiElimina
    Risposte
    1. @# Nella Demo è tutto OK. Ho testato con Chrome, Firefox e IE in navigazione anonima. Prova a incollare il codice così com'è per vedere se ti funziona quindi passa alle modifiche. SE non funziona vedi se dipende dalla presenza di più versioni di JQuery
      http://www.ideepercomputeredinternet.com/2011/10/aggiornare-jquery-per-rendere.html

      Elimina
  2. Aggiornato Jquery. Mi da questa segnalazione: "error in ajax call"

    RispondiElimina
  3. Fatta ulteriore prova. Con il tuo blog funziona. Se metto il mio o altro indirizzo non funziona più

    RispondiElimina
    Risposte
    1. @# Nell'URL hai messo il dominio canonico .com e non quello locale .it?

      Elimina
  4. Ho messo il canonico. Domanda: potrebbe essere il jquery che ho messo nel mio blog (versione 2.0.0) a creare problemi?

    RispondiElimina
    Risposte
    1. @# Togli il 2.0.0 ancora non funziona. Metti 1.9.2

      Elimina
    2. @# Potrebbe anche essere la presenza di un altro widget con gli ultimi articoli e quindi con lo stesso URL JSON

      Elimina
  5. Grazie lo stesso. Sei sempre gentilissimo.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.