Widget scorrevole degli ultimi articoli per Blogger

Nel precedente post abbiamo visto le proprietà del tag che, benché deprecato, si rivela molto utile per creare testi e immagini in movimento. In questo articolo vedremo una applicazione di questo tag che ci servirà per creare un widget da installare nella sidebar di un blog su Blogger o, alternativamente, di pubblicarlo anche in una pagina statica.

Con tale gadget saranno mostrati i titoli degli ultimi post pubblicati e lo snippet degli incipit degli stessi. Si possono personalizzare anche i colori, il numero dei post da mostrare e altri parametri. Dico subito di non fare troppa attenzione ai colori scelti da me, perché ho messo i codici dei colori quasi a caso, tanto per mostrare che si può personalizzare anche questo aspetto del layout.

Si può anche scegliere l'altezza del widget e la velocità dello scorrimento che sarà con direzione dal basso verso l'alto. Si tratta di un gadget che può essere installato con grande semplicità, senza modificare il codice del Tema, ma aggiungendolo dalla scheda Layout mediante un elemento pagina HTML/Javascript.

Nel javascript con il tag ho inserito anche gli attributi per bloccare lo scorrimento quando un lettore passa con il cursore sopra un elemento del widget, e per farlo riprendere, quando toglie il mouse da quest'ultimo. I colori dei link aperti, puntati e visitati saranno quelli ereditati dal vostro sito.






Il gadget avrà questo aspetto con i colori dello sfondo e del bordo personalizzabili

widget-scorrevole-blogger

Si va su Layout -> Aggiungi un gadget -> HTML/Javascript. Si digita un titolo a piacere nel campo relativo, quindi, in Sezioni del sito, si incolla questo codice




Si va poi su Salva e si posiziona il widget quindi si clicca su Salva Disposizione. Come vedete nel codice è presente l'apertura e la chiusura del tag con al suo interno i contenuti che debbono scorrere. La direzione è stata scelta come up, ovvero dal basso verso l'alto, che è la più adatta a un gadget di questo tipo. La prima parte del codice, tra i tag , serve per personalizzare l'aspetto del widget in alcuni elementi.





Questo codice può anche essere incollato in modalità HTML in una pagina di Blogger con questo risultato.

widget-scorrevole-pagina-blogger

Come vedremo alla fine del post, invece di mostrare i titoli degli ultimi post, possiamo mostrare solo i titoli degli articoli che abbiano una data etichetta. Qui di seguito si può vedere la Demo del widget in una sidebar.


Come detto non fate troppo caso ai colori che ho scelto perché possono essere tutti personalizzati.





PERSONALIZZAZIONI DEL WIDGET SCORREVOLE PER BLOGGER

  1. Si sostituisce l'URL del vostro sito a https://www.ideepercomputeredinternet.com ricordandosi di mettere http o https a seconda che si sia o meno abilitata la connessione protetta HTTPS.
  2. font-size:16px; imposta la dimensione dei caratteri del titolo
  3. font-size:14px; imposta la dimensione dei caratteri del Leggi tutto>>
  4. border:1px solid #f00; imposta lo stile del bordo del widget. Si può eliminare la riga per togliere il bordo.
  5. background-color:#FED; per impostare il colore di sfondo del titolo
  6. border:1px solid #036; per impostare lo stile del bordo del rettangolo del titolo
  7. background-color:#DEF; imposta il colore di sfondo dello snippet
  8. var numeropost = 12;  per scegliere il numero dei post da mostrare
  9. var speed = 4; per la velocità di scorrimento; si aumenta con numeri più grandi
  10. var sommario = true; per mostrare lo snippet. Si sostituisce true con false per nasconderlo
  11. var numerocaratteri = 120; per impostare il numero di caratteri dello snippet
  12. Si possono modificare le distanze all'interno dell'elemento modificando i valori dei tag margin e padding riferiti a top (alto), bottom (basso)
  13. var widalt = 400; per impostare l'altezza del widget di 400 pixel
  14. Leggi tutto>> è il testo del link posto alla fine dello snippet per aprire il post e può essere modificato
  15. Possiamo sostituire i feed di tutto il sito, con quelli relativi a una singola etichetta. La stringa diventa
    https://www.ideepercomputeredinternet.com/feeds/posts/default/-/nome-etichetta?…
    dove va inserita il nome della etichetta di cui si vuole mostrare gli ultimi post.

Posta un commento

Comments (0)

Nuova Vecchia