A tal proposito ci dovrebbe essere una pagina proprio sul sito di Blogger se non ricordo male.

In ogni caso, sfruttando questo protocollo opensearch e json è possibile recuperare gli articoli che corrispondono a una certa o più parole chiave (tags) e visualizzarli con un semplice slideshow.

In questo tutorial si vedranno due fasi: la prima quella di realizzo del plugin, sicuramente per molti di voi molto banale e la seconda quella di applicazione sul proprio blogger.

Ok, iniziamo: l'idea di base è quella di non dover gestire cosa metterci dentro in maniera statica... questo ha dei vantaggi, primo fra tutti l'auto aggiornamento in base a cosa scriviamo. In pratica pensandoci quasi tutti i blog (quasi certo) hanno una particolarità .. ossia una immagine (a volte anche abbastanza grande) dentro al post e le prime righe solitamente sono una sorta di cappello all'articolo che segue, quasi a invogliare a leggere.

Se avete questi requisiti lo script che vedremo da adesso dovrà avere davvero poche modifiche, nel caso chiedete e vedremo come applicarlo alla vostra situazione.

Ho intenzione di inserire una demo in fondo a questo articolo quindi per chi volesse vederlo in azione, scorra la pagina.. ma tornate poi a leggere da qui mi raccomando!!

Premesse: Di query ho usato soprattutto gli effetti, il metodo id selezione davvero veloce e la sua grande caratteristica di chaining ossia l'incatenamento dei metodi.. fai questo quando finisci questa azione etc all'infinito. Di javascript ho usato il DOM per recuperare l'element e quello per gestire il timeout (non l'interval per paura che per qualche motivo non si interrompesse e anzi iniziassero a esserci n chiamate contemporanee).

Codice script jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript'>

var fadeInTime = 1000;
var fadeOutTime = 2000;
var showInTime = 2500;
var showOutTime = 1000;
var intervalTime = 6000;
var numchars = 250;

var cur;
var cur2;
var intid;

function cstfade(direction) {

    clearTimeout(intid);
    if (cur) {

            if (direction == 'right') {
                
                cur2.hide();
                if ( cur2.attr('class') == 'last' ) cur2 = $('#ppt2 li:first');
                else cur2 = cur2.next();
                cur2.show();
            } 
            else {
            
                cur2.hide();
                if ( cur2.attr('class') == 'first' ) cur2 = $('#ppt2 li:last');
                else cur2 = cur2.prev();
                cur2.show();
            }
        $('#ppt2').animate({"z-index": 1, "opacity":1 }, showInTime, "linear", function() {});
        

        //fadeOut
        cur.slideUp(fadeOutTime, function () {

            if (direction == 'right') {

                if ( cur.attr('class') == 'last' ) cur = $('#ppt li:first');
                else cur = cur.next();
                //fadeIn
                cur.slideDown(fadeInTime, function() { intid = setTimeout( "right()", intervalTime ); });
            } 
            else {
            
                if ( cur.attr('class') == 'first' ) cur = $('#ppt li:last');
                else cur = cur.prev();
                //fadeIn
                cur.slideDown(fadeInTime, function() { intid = setTimeout( "left()", intervalTime ); });
            }
            
            $('#ppt2').animate({"z-index": 0, "opacity":0 }, showOutTime, "linear", function() {});

        });
    }
}

function right() { cstfade('right'); }
function left()  { cstfade('left');  }

function slidenews(json)
{
var divppt = document.getElementById('ppt');
divppt.innerHTML = '';

var divppt2 = document.getElementById('ppt2');
divppt2.innerHTML = '';


for (var i = 0; i < json.feed.entry.length; i++)
    {
    var entry = json.feed.entry[i];
    var link = '';
    for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
        link = entry.link[k].href;
        break; } }

    divppt.innerHTML = divppt.innerHTML + '<li><span>' + entry.title.$t + '</span><br/>'
        + '<br/>'+ entry.content.$t.replace(/(<([^>]+)>)/ig,"").substr(0,numchars)+'..'
        + '&nbsp;&nbsp;<a class="linkart" href="'+link+'">continua a leggere</a>'
        + '</li>';
    
    //find "src=blabla" and store everything after it (up to a space)
    var geturl = new RegExp(/src=([^ ]+)/i);
    //run the regex on z and return the stored result
    var url = geturl.exec(entry.content.$t)[1];

    // remove domain
    //url = url.replace(/http:\/\/[^\/]+/i,"");

    divppt2.innerHTML = divppt2.innerHTML + '<li><img src='+url+'></li>';
    }

$('#ppt li:gt(0)').hide();
$('#ppt li:last').addClass('last');

cur = $('#ppt li:first');
cur.addClass('first');

$('#ppt2 li:gt(0)').hide();
$('#ppt2 li:last').addClass('last');

cur2 = $('#ppt2 li:first');
cur2.addClass('first');

clearTimeout(intid);
intid = setTimeout( "right()", intervalTime );
}

</script>

Dando uno sguardo veloce sicuramente avrete notato due metodi importanti:

• cstfade: che si occupa dell'aspetto grafico viene chiamato in modo ciclico, ossia ogni volta che viene cambiato articolo o che viene premuto su avanti o indietro.
• slidenews: che viene richiamato quando vengono recuperati gli articoli da visualizzare, naturalmente tramite json come dicevamo e opensearch. Attenzione che viene richiamato solitamente una sola volta.

Bene, dentro slidenews viene attivato il setTimeout e cstfade viene richiamato dopo l'intervallo impostato. Ovviamente al termine di cstfade (ossia dell'effetto grafico) viene richiamato nuovamente il setTimeout (se si stava già aspettando viene terminato per evitare sovrapposizioni). Tutti i tempi sono modificabili e sono le variabili:

• fadeInTime: apparizione dell'articolo nuovo (default 1000 ms)
• fadeOutTime: dissolvenza dell'articolo a video (default 2000 ms )
• showInTime: tempo di apparizione immagine (default 2500 ms )
• showOutTime: tempo di dissolvenza immagine (default 1000 ms )
• intervalTime: intervallo fra un articolo e l'altro (default 6000 ms )

Il resto dello script è da modificare per esigenze particolari o correzioni (ovviamente).
Bene questa era la parte difficile, davvero!!
Passiamo al blocco HTML: per far funzionare il tutto, ovviamente, abbiamo bisogno dei vari elementi.. ossia di queste 7 righe.

<div id="news">
<a id="lefta" href="javascript:left();"></a>
<a id="righta" href="javascript:right();"></a>
    <ul id="ppt"></ul>
    <ul id="ppt2"></ul>
</div>
<script src='http://ondare.blogspot.com/feeds/posts/default/-/jQuery?alt=json-in-script&amp;callback=slidenews&amp;max-results=4' type='text/javascript'></script>

Come si vede, c'è un div news contenitore, due anchors lefta e righta (ossia per andare avanti e indietro), e due elementi ul che conterranno la lista di articoli e immagini da alternare.
La riga script ovviamente identifica la chiamata (opensearch / json) e deve essere posizionata dopo il blocco div news.

Se volete modificare il numero di articoli che visualizza dovete cambiare il numero che segue a max-results nella riga script precedente. Di default è max-results=4.

Bene ora non resta che impostare il blocco CSS così da concludere questa prima parte di realizzo:

<style type="text/css">
div#news { /* box padre */

    border:1px solid #D38561;background-color:white;width:370px;height:160px;
    padding:0;margin:0;overflow:hidden;position:relative;
}
ul#ppt { /* box articolo */

    width:290px;height:160px;background-color:white;padding:0;margin:0;overflow:hidden;
    float:right;position;absolute;top:0;left:40px;z-index:1;
}
#ppt li { /* corpo articolo */

    list-style-type: none;font-size:12px;width:100%;height:100%;padding:0;color:#333333;
    background-color:white;position;absolute;top:0;left:40px;
}
#ppt2 li { /* corpo articolo */

    list-style-type: none;font-size:12px;width:100%;height:100%;padding:0;margin:auto;
    color:#333333;background-color:white;position;absolute;top:0;left:40px;
}
#ppt li span { /* titolo articolo */
    
    position;absolute;top:0;left:40px;font-weight:bold;font-size:14px;color:#D38561;
}
#ppt2 {
    
    /*z-index:2;*/ position:absolute;top:0;left:40px;width:290px;height:160px;padding:0;
    margin:0; /*float:right;*/ overflow:hidden;filter:alpha(opacity=25);-moz-opacity:.0;
    opacity:.0;background-color:white;/* background-image:url(sfondo.png); */
}
#ppt2 img {

    display:block; /*allows the element to take auto margins*/ 
    margin:0 auto; /*centers in compliant browsers*/ 
    text-align:center; /*centers in old versions of IE*/ 
}
#lefta { /* pulsante sx */

    float:left;width:35px;height:160px;border:0;margin:0;padding:0;background-image:url(left.png);
}
#lefta:hover { background-image:url(lefta.png); }

#righta { /* pulsante dx */

    float:right;width:35px;height:160px;border:0;margin:0;padding:0;background-image:url(right.png);
}
#righta:hover { background-image:url(righta.png); }

.linkart { color:#D38561; }
</style>

Ok, di questo ultimo blocco possiamo cambiare tutte le parti grafiche. Background, border, margin, dimensioni, facendo attenzione a non toccare i vari float e i position (a meno di non voler cambiare il flusso degli oggetti, nel caso sperimentate pure).

Per i più smanettoni che vogliono mettere subito le mani in pasta a tutto qui c'è tutto html+script+css (ossia i pezzi precedenti) ovviamente mancano le immagini.

<html>
<head>

<style type="text/css">
div#news { /* box padre */

    border:1px solid #D38561;background-color:white;width:370px;height:160px;
    padding:0;margin:0;overflow:hidden;position:relative;
}
ul#ppt { /* box articolo */

    width:290px;height:160px;background-color:white;padding:0;margin:0;overflow:hidden;
    float:right;position;absolute;top:0;left:40px;z-index:1;
}
#ppt li { /* corpo articolo */

    list-style-type: none;font-size:12px;width:100%;height:100%;padding:0;color:#333333;
    background-color:white;position;absolute;top:0;left:40px;
}
#ppt2 li { /* corpo articolo */

    list-style-type: none;font-size:12px;width:100%;height:100%;padding:0;margin:auto;
    color:#333333;background-color:white;position;absolute;top:0;left:40px;
}
#ppt li span { /* titolo articolo */
    
    position;absolute;top:0;left:40px;font-weight:bold;font-size:14px;color:#D38561;
}
#ppt2 {
    
    /*z-index:2;*/ position:absolute;top:0;left:40px;width:290px;height:160px;padding:0;
    margin:0; /*float:right;*/ overflow:hidden;filter:alpha(opacity=25);-moz-opacity:.0;
    opacity:.0;background-color:white;/* background-image:url(sfondo.png); */
}
#ppt2 img {

    display:block; /*allows the element to take auto margins*/ 
    margin:0 auto; /*centers in compliant browsers*/ 
    text-align:center; /*centers in old versions of IE*/ 
}
#lefta { /* pulsante sx */

    float:left;width:35px;height:160px;border:0;margin:0;padding:0;background-image:url(left.png);
}
#lefta:hover { background-image:url(lefta.png); }

#righta { /* pulsante dx */

    float:right;width:35px;height:160px;border:0;margin:0;padding:0;background-image:url(right.png);
}
#righta:hover { background-image:url(righta.png); }

.linkart { color:#D38561; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript'>

var fadeInTime = 1000;
var fadeOutTime = 2000;
var showInTime = 2500;
var showOutTime = 1000;
var intervalTime = 6000;
var numchars = 250;

var cur;
var cur2;
var intid;

function cstfade(direction) {

    clearTimeout(intid);
    if (cur) {

            if (direction == 'right') {
                
                cur2.hide();
                if ( cur2.attr('class') == 'last' ) cur2 = $('#ppt2 li:first');
                else cur2 = cur2.next();
                cur2.show();
            } 
            else {
            
                cur2.hide();
                if ( cur2.attr('class') == 'first' ) cur2 = $('#ppt2 li:last');
                else cur2 = cur2.prev();
                cur2.show();
            }
        $('#ppt2').animate({"z-index": 1, "opacity":1 }, showInTime, "linear", function() {});
        

        //fadeOut
        cur.slideUp(fadeOutTime, function () {

            if (direction == 'right') {

                if ( cur.attr('class') == 'last' ) cur = $('#ppt li:first');
                else cur = cur.next();
                //fadeIn
                cur.slideDown(fadeInTime, function() { intid = setTimeout( "right()", intervalTime ); });
            } 
            else {
            
                if ( cur.attr('class') == 'first' ) cur = $('#ppt li:last');
                else cur = cur.prev();
                //fadeIn
                cur.slideDown(fadeInTime, function() { intid = setTimeout( "left()", intervalTime ); });
            }
            
            $('#ppt2').animate({"z-index": 0, "opacity":0 }, showOutTime, "linear", function() {});

        });
    }
}

function right() { cstfade('right'); }
function left()  { cstfade('left');  }

function slidenews(json)
{
var divppt = document.getElementById('ppt');
divppt.innerHTML = '';

var divppt2 = document.getElementById('ppt2');
divppt2.innerHTML = '';


for (var i = 0; i < json.feed.entry.length; i++)
    {
    var entry = json.feed.entry[i];
    var link = '';
    for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
        link = entry.link[k].href;
        break; } }

    divppt.innerHTML = divppt.innerHTML + '<li><span>' + entry.title.$t + '</span><br/>'
        + '<br/>'+ entry.content.$t.replace(/(<([^>]+)>)/ig,"").substr(0,numchars)+'..'
        + '&nbsp;&nbsp;<a class="linkart" href="'+link+'">continua a leggere</a>'
        + '</li>';
    
    //find "src=blabla" and store everything after it (up to a space)
    var geturl = new RegExp(/src=([^ ]+)/i);
    //run the regex on z and return the stored result
    var url = geturl.exec(entry.content.$t)[1];

    // remove domain
    //url = url.replace(/http:\/\/[^\/]+/i,"");

    divppt2.innerHTML = divppt2.innerHTML + '<li><img src='+url+'></li>';
    }

$('#ppt li:gt(0)').hide();
$('#ppt li:last').addClass('last');

cur = $('#ppt li:first');
cur.addClass('first');

$('#ppt2 li:gt(0)').hide();
$('#ppt2 li:last').addClass('last');

cur2 = $('#ppt2 li:first');
cur2.addClass('first');

clearTimeout(intid);
intid = setTimeout( "right()", intervalTime );
}

</script>

</head>
<body>

<div id="news">
<a id="lefta" href="javascript:left();"></a>
<a id="righta" href="javascript:right();"></a>
    <ul id="ppt"><!--- NOTHING HERE, VOID ---></ul>
    <ul id="ppt2"><!--- NOTHING HERE, VOID ---></ul>
</div>
<script src='http://ondare.blogspot.com/feeds/posts/default/-/jQuery?alt=json-in-script&amp;callback=slidenews&amp;max-results=4' type='text/javascript'></script>

<!--
<script src='http://keytrading.blogspot.com/feeds/posts/default/-/broker+online?alt=json-in-script&amp;callback=slidenews&amp;max-results=4' type='text/javascript'></script>
-->

</body>
</html>

Bene, ora per chi volesse integrarlo in posti diverso da blogger o comunque in modo proprio l'articolo è finito qui, per gli altri che come me hanno blogger bisogna fare ancora un'ultimo sforzo.

Integrazione in blogger: ovviamente per integrarlo ci saranno da fare gli stessi passi che avevo descritto nell'articolo jQuery - lightBox e Blogger anche in galleria.

Per evitarvi lo sforzo però vi elenco i passi da fare, per fortuna sono semplici ma bisogna fare attenzione! Valgono le avvertenze di salvare tutto (commenti, stili, colonna, parti custom, posts, js etc etc giusto per evitarmi grane).

Prendete il codice che c'è in Codice script jQuery e copiatelo o in testa all'articolo se volete metterlo solo in una pagina o dentro il layout in modo che si carichi subito. Nel secondo caso andate su draft Blogger > Layout > Modifica HTML, una volta qui spuntate la voce "Espandi i modelli widget" e copiate il contenuto in un editor di testo (esempio notepad).

Cercate nella parte di head dove ci sono altri script e copiatelo subito dopo.
Ora fate lo stesso con il blocco CSS copiandolo nell'elemento:

<b:skin><![CDATA[/*

....

]]></b:skin>

Dove ci sono i puntini ovvimanete avrete il codice e proprio lì dentro facendo attenzione a non metterlo a casaccio copierete le righe del blocco.
Bene, questa era la parte più delicata.

Ora prendete il blocco HTML e copiatelo dovunque vogliate, ad esempio in un elemento della colonna (sempre tramite draft Blogger > Layout > Elementi) ossia aggiungendo un gadget HTML/JavaScript. Oppure in uno o più articoli etc. Ok il tutto è pronto e se abbiamo cambiato i percorsi delle immagini e la stringa di chiamata JSON a questo punto è tutto pronto.

Complimenti, anche voi avrete uno slideshow su blogger proprio come questo che segue:



Collegamenti esterni: jQuery