Un ticker , propriamente detto, è il codice con cui le diverse società quotate in borsa vengono identificate con poche lettere abbreviate. Un ticker
è anche noto come un pannello che visualizza le diverse quotazioni in un formato carosello in uno spazio ridotto, ovvero mostrando tutti i valori in sequenza, spostando quelli visualizzati più di recente a quelli precedenti. Questo formato può essere utile per visualizzare informazioni sul nostro sito web quando vogliamo ridurre lo spazio a loro dedicato. In questo caso, lo useremo per visualizzare i titoli degli articoli più recenti del nostro blog (o di un altro), che otterremo tramite il suo feed.
Il gadget è realizzato con JavaScript, ma a differenza di altri casi, non richiede librerie aggiuntive (ad esempio, non è necessario jQuery).
Ho già pubblicato e spiegato codice simile per altre cose, quindi, poiché questo è già predisposto per essere semplicemente copiato e incollato in un gadget, mi limiterò a spiegare quanto basta.
Potete vedere una funzione chiamata rssticker , a cui inviamo l'indirizzo di un feed tramite una callback . Questa funzione legge il contenuto del feed e salva ciò di cui abbiamo bisogno in un array : il titolo e il link degli ultimi post. Quindi, questi dati vengono inviati a startrssticker , che, sebbene sia una funzione un po' più lunga (e ricorsiva), non fa altro che visualizzare i caratteri di ciascun titolo uno alla volta, e fa quasi la stessa cosa visualizzando un solo titolo alla volta. Questo è ciò che potete vedere nella gif animata qui sopra e nella demo alla fine di questo post. Questo sarebbe il codice completo, anche se potreste includere JavaScript e CSS nel template e solo la callback nel gadget. Ho evidenziato i parametri configurabili con un colore diverso, insieme a un commento sulla loro utilità e, come sempre, il CSS può essere modificato per adattarlo al formato del tuo sito.
<script style='text/javascript'>
funzione rssticker(t){for(var a=0;a<numberposts;a++){entries=t.feed.entry[a],titulosposts[a]=entries.title.$t;for(var e=0;e<entries.link.length;e++)if("alternate"==entries.link[e].rel){linkposts[a]=entries.link[e].href;break}}startrssticker()}funzione startrssticker(){currentpost=-1,currentlength=0,links=document.getElementById("link"),runticker()}funzione runticker(){var t;0==currentlength&&(currentpost++,currentpost%=numberposts,title=posttitles[currentpost].replace(/"/g,'"'),link=linkposts[currentpost],links.href=link),enl aces.innerHTML=title.substring(0,currentlength),currentlength!=title.length?(currentlength++,t=characterdelay):(currentlength=0,t=postdelay),setTimeout("runticker()",t)}
var numberposts = 6 ; //Voci da visualizzare
var characterdelay = 30 ; //Data tra i caratteri var
postdelay = 4000 ; //Data tra i post var titles = new Array ( ; new Array() var linkposts =
); <a id='link'></a> <!-- Ecco l'indirizzo del feed --> <script src='http:// INDIRIZZO_BLOG /feeds/posts/default?alt=json-in-script&callback=rssticker' style='text/javascript'></script> </div> <style> .rssticker{posizione:relativa!importante;larghezza:100%;altezza:40px;overflow:nascosto;spazio bianco: nowrap;overflow del testo: ellipsis;margine:10px auto;colore:#fff;sfondo:#333;dimensione carattere:14px;famiglia di caratteri:Arial;altezza della riga:40px;} .header{display:inline-block;margine:0 10px 0 0;imbottitura:0 10px;altezza della riga:40px;sfondo:#cd2122;dimensione del box:bordo-box;} .rssticker a{colore:#fff;decorazione del testo:nessuno;} .rssticker a:hover{decorazione-testo:none;colore:#ccc;} </style>
Non dimenticare di modificare BLOG_ADDRESS con l'indirizzo del blog che desideri visualizzare.
Se vuoi visualizzare l'indirizzo di un blog diverso dal tuo, non c'è problema, e se vuoi visualizzare solo i post di un tag specifico, per Blogger l'indirizzo sarà simile a http:// BLOG_ADDRESS /feeds/posts/default/-/ TAG_NAME
Commenti
Posta un commento