Widget scorrevole verso l'alto per Blogger che mostra titoli e snippet degli Ultimi Articoli.

Giusto ieri ho pubblicato un gadget che mostra i titoli degli Ultimi Articoli con uno scorrimento orizzontale. Il widget che mi accingo a presentare oggi ha invece uno scorrimento verticale con i titoli dei post che salgono dal basso verso l'alto. Il gadget non ha una larghezza predefinita e può essere installato in una sidebar di qualsiasi dimensione. Lo si può inserire anche in una pagina statica stando ben attenti a pubblicare da HTML e a incollare nuovamente il codice qualora si decidesse di modificare qualcosa. Si può invece configurare la sua altezza e quando si passerà sopra a un titolo con il cursore si bloccherà lo scorrimento di titoli e riassunti.

Per questo gadget oltre al javascript si utilizza il tag <marquee> che è stato deprecato dal W3C ma che è sempre supportato da tutti i browser. Non ci sono librerie aggiuntive e neppure file caricati su hosting esterni in modo da renderlo sempre funzionante. L'unica condizione è che si siano attivati i Feed del blog.

Widget scorrevole orizzontale degli Ultimi Post per Blogger.

A seguito di un commento appena ricevuto su un widget di 5 anni fa che non funziona più ho deciso di riproporre una nuova versione dello stesso gadget per Blogger. Si tratta di un tipo di widget che probabilmente avrete già visto in molti siti.

Soprattutto nei portali di notizie nella parte alta della pagina si vedono spesso gli ultimi highlights che scorrono in orizzontale per essere mostrati ai lettori. Mi viene in mente tra l'altro il sito dell'Ansa. Per poter creare un widget di questo genere occorre che il sito abbia consentito i feed. Non occorre che siano abilitati i feed completi ma basta anche solo quelli brevi.

Il gadget è utilizzabile solo per Blogger. Se avete intenzione di mostrare un widget di notizie di altri siti si possono convertire i feed in widget con un servizio esterno. L'installazione non presenta nessuna difficoltà visto che non occorre neppure modificare il modello.

Mostrare il titolo del blog scorrevole nella scheda del browser.

Cercare di colpire i lettori fin dalla prima volta che arrivano sul nostro sito è uno dei sistemi più validi per poterli fidelizzare. Naturalmente per farlo la cosa migliore è cercare di offrire informazioni valide e dei contenuti emozionanti e pieni di aspettativa ma si può anche agire sul design del sito rendendolo più originale. Più che slideshow fantasmagorici o widget straordinari possono fare la differenza dei piccoli accorgimenti in grado di stupire il navigatore quel tanto che basta per farlo diventare un nostro lettore abituale.

Abbiamo già visto come inserire dei Ticker scorrevole di notizie e, seguendo la falsariga dello slide, in questo post vediamo come si possa mostrare nella scheda del browser il titolo del sito o qualunque altro testo in modo scorrevole. Questa personalizzazione funzionerà su tutti i principali browser desktop mentre non si può dire nulla di certo per il mobile. L'immagine animata seguente è stata presa con Firefox

 

Come far scorrere un widget di Blogger insieme alla pagina.

Il layout tipico di un blog prevede sulla destra, sulla sinistra o da entrambe le parti la presenza una sidebar in cui sono inseriti dei widget da mostrare ai lettori. Tra questi gadget ce ne potrebbe essere uno che riteniamo particolarmente importante tanto da decidere di tenerlo sempre visibile anche allo scorrere della pagina. Un  tale widget dovrebbe preferibilmente essere posizionato alla fine della sidebar perché altrimenti spingerebbe verso il basso i gadget posizionati sotto di esso.

Ricordo di aver già presentato un tutorial per mostrare un widget sempre in primo piano che si basava su un javascript così come l'hack che vado a presentare. Il metodo già proposto può essere usato anche per widget posizionati nella parte iniziale della sidebar che però potranno nascondere gli altri widget durante lo scroll della pagina. La scelta tra uno dei due sistemi potrà essere fatta dopo averli testati entrambi. Per prima cosa dovremo scoprire quale sia l'ID del widget che vogliamo rendere scorrevole. Se utilizziamo un browser quale Firefox o Chrome si potrà cliccare sulla icona del cacciavite e della chiave inglese per aprire la sua finestra di configurazione. Nel caso non sia possibile usare questo sistema si può andare su Layout e cliccare su Modifica del gadget in questione

Widget scorrevole con gli avatar di chi ci segue su Facebook, Twitter e Google+.

Come probabilmente saprete Twitter ha modificato le sue API rendendo inutilizzabili tutti i widget che avevamo creato per questo social network probabilmente con l'intento di promuovere i suoi widget ufficiali. Per questa ragione hanno anche smesso di funzionare per quello che riguarda la parte di Twitter anche i widget misti che mostravano bottoni o Fanbox dei vari social. 

Ieri ho presentato il FanBox di Twitter utilizzando l'applicazione creata da uno sviluppatore. Usando questo stesso codice possiamo quindi creare un gadget molto funzionale e anche esteticamente validissimo che mostra in modo compatto gli avatar di chi ha cliccato su Mi Piace della nostra pagina Facebook, di chi ci ha inserito nelle sue Cerchie di Google+ e appunto di chi è nostro follower su Twitter

Come mostrare in Blogger una barra flottante con gli ultimi post o commenti scorrevoli.

Mi ricordo di aver illustrato qualche mese fa la procedura per installare gli Ultimi Articoli e gli Ultimi Commenti scorrevoli in una barra orizzontale. Vediamo adesso come fare un ulteriore passo e mostrare questo widget in modo flottante tanto da lasciarlo visibile anche quando si scorre la pagina verso il basso. Inoltre sarà inserita una icona di chiusura per dare la possibilità al lettore di nasconderlo nel caso gli desse fastidio.

Il widget può essere installato nel modello scegliendo il punto di visualizzazione o attraverso un gadget HTML/Javascript per posizionarlo nel Layout compresa la sidebar. È inoltre possibile configurare il numero dei post visualizzati, la velocità dello scorrimento e anche il verso di quest'ultimo.

Mostrerò solo come inserire il widget nel modello visto che per utilizzare un gadget basta andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare il codice in Sezioni del sito.

Come mostrare delle scritte o delle immagini scorrevoli.

Le scritte che scorrono sono un arricchimento dei contenuti in quanto li evidenziano catturando lo sguardo dei lettori. Possono essere usate per dei widget o anche per semplici annunci di testo. Tutti i browser supportano il tag marquee che è quello specifico per creare questi effetti. Si tratta di un elemento che è stato deprecato dal W3C come non conforme e obsoleto ma l'importante è che i lettori riescano a visualizzare gli effetti che produce. Ho già presentato dei widget che utilizzano questo tag come quello sugli Ultimi Post e i Commenti Recenti Scorrevoli. Adesso analizziamo questa personalizzazione in modo più generale da usare per degli avvisi ai lettori, per ricordare un evento, per una festività, per un augurio di compleanno o per far muovere una immagine.

Widget scorrevoli degli Ultimi Post e dei Commenti Recenti.

Con questo post faccio seguito alla richiesta di un particolare widget fattami in un gruppo di cui faccio parte che mostri i titoli degli ultimi articoli in modo scorrevole da inserire in un elemento del blog. I titoli scorreranno da destra verso sinistra e ci si potrà cliccare sopra per aprire il post a cui fanno riferimento. Avevo già pubblicato un gadget con queste caratteristiche ma ha cessato di funzionare.

I contenuti saranno ovviamente dati dai feed del sito e si potrà scegliere di mostrare quelli del nostro blog ma anche i titoli delle ultime pubblicazioni di un sito online. L'unica limitazione è che la risorsa a cui si attinge per i titoli abbia abilitato i feed. L'aspetto del widget sarà completamente personalizzabile e i colori che ho proposto vanno bene per un blog con fondo scuro ma possono essere facilmente modificati

Come creare un Ticker di notizie scorrevoli su Blogger.

Vi ricorderete certamente quando Facebook introdusse il Ticker scorrevole per visualizzare in tempo reale tutta l'attività degli amici. Per la piattaforma Blogger sono già disponibili dei widget scorrevoli verticali e orizzontali che mostrano gli ultimi post. Con questo articolo voglio introdurre una nuova opzione che permette di visualizzare appunto in un ticker scorrevole le ultime notizie che volete inserirvi. Ciascun elemento sarà composto da un titolo, un testo e un link con colori e sfondo completamente personalizzabili.

Ciascuna notizia resterà immobile per qualche attimo prima che venga mostrata la successiva. Se si passa con il mouse sopra al box, se ne blocca lo scorrimento e se ne può aprire il link

Come inserire un cursore di scorrimento nei widget di Blogger.

I blogger si trovano molto spesso ad affrontare questioni di spazio nella gestione del layout. Si devono sempre cercare dei compromessi tra far vedere al visitatore il più possibile e la mancanza di spazio sufficiente per poterlo fare.

Sono sicuro che questo semplicissimo tutorial risolverà dei problemi a molti di voi. Come tutte le cose particolarmente efficienti è di una immediatezza disarmante e può essere usato per tutti i widget di Blogger o di altre piattaforme che vengano installati mediante codice HTML/Javascript.

L'idea è quella di inserire un cursore nel widget in modo da ridurne drasticamente l'altezza ma non la possibilità di consultarlo. Vi faccio un esempio pratico. Se volete mostrare il widget degli articoli recenti relativamente agli ultimi 25 post, questo avrebbe una altezza decisamente troppo elevata e comprometterebbe gli equilibri estetici del layout. Se invece poniamo che debba essere alto solo 150 pixel e inseriamo un cursore ecco che tutto viene risolto

Come inserire la neve e la stella cadente nel blog per le Feste di Natale.

Ho già presentato degli effetti che mostrano la neve che cade nel blog. Si trattava però di javascript che potevano non funzionare su alcuni modelli. Ricordo l'Effetto Nevicata che pubblicai circa un anno fa e l'Effetto di Oggetti Natalizi che cadono pubblicato da poco. Vediamo come si possano creare delle suggestive nevicate, ma non solo, utilizzando il tag <marquee> che ho già usato per presentare le scritte scorrevoli. Consideriamo per esempio questo codice

<marquee behavior="scroll" direction="down" style="position: absolute; left: 150px; top: 0px; width: 14px; height: 800px;" scrollamount="5"><span style="color: #ffffff;">*</span></marquee>

Si tratta di un fiocco di neve che cade. Il fiocco di neve è rappresentato da un asterisco ( * ), la direzione di caduta è data da down, la posizione da cui cade il fiocco è in alto (top: 0px;) spostata di 150px sulla sinistra, tutta la caduta dura 800 pixel e la velocità è data da scrollamount="5" (a numeri più alti corrisponde una maggiore velocità). Al posto del fiocco di colore bianco (color: #ffffff;) ci possiamo mettere una immagine in modo tale che il codice diventi

Come inserire avvisi o messaggi scorrevoli in Blogger.

Questa la possiamo considerare come la settimana dedicata agli avvisi e ai messaggi. Ho infatti già pubblicato un post su come inserire messaggi scorrevoli dentro una textarea e un altro per mostrare un avviso nella home del blog. Continuando su questa falsariga passo a illustrare un metodo per mostrare del testo scorrevole in un widget del blog con una prerogativa importante che lo differenzia da quelli classici che sfruttano il tag marquee.

• Demo di avvisi scorrevoli postati nel blog -

All'inizio vedrete la scritta MESSAGGI IMPORTANTI che lampeggerà varie volte prima di sparire. Ricomparirà solo quando si ricaricherà la pagina. Successivamente si visualizzerà un testo con vari messaggi che scorreranno vero sinistra e che continueranno a farlo indefinitamente. Tali avvisi possono essere personalizzati come più ci pare.

Per l'installazione di questo widget, occorre andare su Design > Modifica HTML e salvare il modello completo per un eventuale backup di ripristino. Bisogna quindi cercare la riga </head> e, immediatamente sopra, incollare questo codice

Come inserire messaggi scorrevoli digitati automaticamente all'interno di una textarea.

La textarea è un tag HTML che viene in genere viene utilizzato per mostrare ai lettori un codice da copiare per inserire in un blog per esempio un antipixel. Vediamo come sia possibile creare una textarea animata in cui inserire un numero indefinito di messaggi che si visualizzeranno automaticamente con un effetto che ricorda la digitazione su uno schermo.

Questi messaggi possono essere inseriti in un widget del blog, in un articolo o in una pagina statica. Per metterli in un post si va semplicemente in Modalità HTML o in Origine se si usa Windows Live Writer. Stessa procedura per l'inserimento in una pagina statica. Se si opta per un widget occorre andare su Design > Aggiungi un gadget > HTML/Javascript e incollare questo codice

Inserire il Like Box di Facebook in modo scorrevole su Blogger.

Si può dire che quasi tutti i blog hanno una loro pagina fan su Facebook e che in quasi tutti i siti che hanno una FanPage è presente anche il widget del Like Box (o FanBox) per mostrare il numero dei sottoscrittori e gli avatar di alcuni di loro. Vediamo come rendere questo gadget più originale. Si tratta di fare in modo che rimanga sempre nella stessa posizione del layout allo scorrere  della pagina e di mostrare solo una linguetta in modo da poterlo aprire passandoci sopra con il mouse. Ho pubblicato sul web una

• Demo del FanBox di Facebook scorrevole -

Se andate sulla destra e passate il mouse sopra alla linguetta si aprirà il LikeBox

Slideshow verticale dei Post più Popolari di Blogger.

Sulla falsariga del widget che presenta lo slideshow verticale degli Ultimi Post ecco come lo stesso javascript possa essere applicato anche al gadget dei Post più Popolari che è nativo su Blogger ma che indubbiamente è un po' scarso esteticamente. La prima cosa da fare è quella di installarlo nel blog. Se non lo avete ancora fatto, andate su Design > Aggiungi un gadget > Post più popolari

Widget scorrevole dei titoli degli Ultimi Post per Blogger.

Avrete certamente visto dei siti di notizie che fanno scorrere i titoli degli Ultimi Post nella parte alta del layout. Usando il tag <marquee> già impiegato nella realizzazione di scritte scorrevoli, vediamo come sia possibile realizzare un gadget che mostra i titoli delle ultime entry che scorrono da destra verso sinistra. Per avere una idea del funzionamento di questo widget che si basa sui feed del blog, aprite questa

• Demo degli Ultimi Titoli dei Post in versione scorrevole -

L'aspetto sarà simile a questo

e si potrà personalizzare nei bordi, nei colori e nella velocità di scorrimento. Il procedimento di installazione è oltremodo semplice. Si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice

Widget orizzontale scorrevole per Blogger con miniature degli Ultimi Post.

Ho recentemente pubblicato un articolo riguardo a uno Slideshow degli ultimi post con miniature in orizzontale che ha avuto un certo successo. In un paio di commenti mi è stato fatto presente che sarebbe stato meglio poter selezionare la velocità di scorrimento del widget per adattarlo alle singole esigenze. Ne posto quindi un'altra versione che viene incontro a questa richiesta. Ho postato in rete una

• Demo del widget orizzontale scorrevole con miniature -

Come vedete è molto più lento visto ciascuna schermata rimane per 10 secondi invece dei 5 del precedente slideshow. Ho anche modificato il numero dei post visualizzati che adesso sono cinque invece di sei. Per l'installazione di questo widget non occorre modificare il modello, si va semplicemente su Design > Aggiungi un gadget > HTML/Javascript e si incolla questo codice HTML

Top Slide Menù per avere anche Facebook, Twitter, Feed e Newsletter insieme al menù.

Ho presentato Menù di tutti i tipi ma questo è veramente originale perché riunisce in un solo slide, oltre alle voci classiche del Menù, anche le icone per accedere alla pagina fan di Facebook, all'account Twitter o per sottoscrivere i feed del blog. C'è anche il modulo per iscriversi alla Newsletter a cura di FeedBurner. Come è mia abitudine, ho pubblicato in rete una

• Demo del Top Slide Menù -

Perché il menù abbia una buona resa estetica è necessario nascondere la navbar che può essere fatto anche al momento incollando questo codice

#navbar-iframe { display: none !important; }

immediatamente sopra alla riga ]]></b:skin> e salvando il modello. Il menù ha questo aspetto

Effetto immagini animate da inserire in un blog.

Illustrerò questo effetto per un blog su Blogger ma il codice potrà essere utilizzato anche su altre piattaforme visto che si basa su una libreria JQuery supportata da tutti i browser. Il concetto è quello di mostrare una immagine sotto a un'altra che appaia tramite scorrimento della prima quando ci si passa sopra con il mouse. Prima di procedere con il procedimento di installazione, vi invito a visualizzare l'effetto che ho creato in un post di prova

• Demo Effetto Immagini Animate Sovrapposte -

Per ottenerlo occorre andare su Design > Modifica HTML e salvare il modello completo. Cercare la riga </head> e, immediatamente sopra incollare questo codice

Come inserire uno slideshow di foto con link a articoli o blog.

Se avete un blog su piattaforma Blogger e siete molto attenti alla grafica, vi consiglio il widget dello Slideshow con miniature degli Ultimi Post che è uno dei più belli mai realizzati per Blogger. Vediamo come sia possibile realizzare uno slideshow corredato da miniature degli articoli che riteniamo più interessanti per proporli in un modo accattivante ai visitatori del nostro blog.

Per la realizzazione si usa lo stesso codice impiegato per la scritta scorrevole che è stata ripresa su molti siti. Il nostro obbiettivo è quello di sostituire il testo con delle miniature di immagini. Sarà anche possibile personalizzare il bordo e perfino il background del widget oltre alla velocità di scorrimento. Passo subito a presentare il codice, successivamente parlerò delle possibili personalizzazioni