Pubblicato il 12/03/11 - aggiornato il  | 10 commenti :

Widget degli Ultimi Post di Blogger in un box scorrevole.

Widget scorrevole in verticale degli ultimi post per Blogger
Continuo nella presentazione di widget per abbellire il nostro blog su Blogger e per renderlo più usabile da parte dei visitatori. E' innegabile che mostrare gli Ultimi Articoli che si sono pubblicati serve per invogliare il lettore a leggeri e quindi a farlo rimanere più a lungo sul nostro sito. Ho presentato diversi gadget che mostrano i post più recenti che si sono pubblicati con un aspetto minimalista o estremamente suggestivo.
Questo che vado a illustrarvi ha sicuramente il pregio di essere originale e certamente sono pochissimi i blog che ne hanno uno simile. Si tratta infatti di un widget che mostra i titoli degli ultimi post in un rettangolo scorrevole. Si possono mostrare anche i riassunti e scegliere il numero di post che si vogliono vedere scorrere; si possono anche modificare a piacere la velocità dello scorrimento e l'altezza del widget.
Si può anche configurare il colore di sfondo del rettangolo che assumerà automaticamente la larghezza della sidebar in cui sarà installato. Li widget interromperà lo scorrimento se ci si passerà sopra con il mouse per riprenderlo quando si toglierà.
ultimi articoli scorrevoli per blogger
Sotto a ogni articolo si visualizzerà il link per poterlo aprire. Si può installare senza modificare il modello andando su Design > Aggiungi un gadget > HTML/Javascript e incollando questo codice in Sezioni del Sito dopo aver inserito un titolo a piacere
<div id="widgclass" style="text-align:center;"><script
src="https://sites.google.com/site/scriptperilblog/javascript-2/ultimi-post-slidebox.js"></script>
<script language="javascript">
var numeropost = 8;
var speed = 2;
var sommario = true;
var numerocaratteri = 100;
var widalt = 250;
var IPCEIart = false;
</script>
<script src="http://www.ideepercomputeredinternet.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts">
</script></div>
<style>.titolo{font-weight:bold;margin-top:12px;}.more{margin-bottom:10px;padding:12px;}.data{}.contenuto{}#widgclass{padding-bottom:2px; background-color:#DDEEFF;
padding:4px;border:1px solid #003366;}</style>
Le personalizzazioni riguardano i seguenti elementi:
  1. In numeropost = 8; si seleziona il numero di articoli che intendiamo vedere scorrere nel widget 
  2. In speed = 2; si configura la velocità di scorrimento. A numero più alto corrisponde velocità più alta
  3. var sommario = true; per mostrare anche il riassunto dei post. Se non lo si vuole vedere, si sostituisce true con false.
  4. In numerocaratteri = 100; si imposta il numero dei caratteri del sommario se è stato impostato con true.
  5. Al posto dell'URL di questo blog va inserito quello del vostro.
  6. Si può anche scaricare il file javascript, modificarlo con Notepad++, caricarlo su Google Sites con la modalità Schedario o su DropBox per poi ottenerne l'hotlink da sostituire a quello del codice. Si possono così modificare l'espressione Leggi tutto>> e altri parametri
  7. Si possono calibrare le distanze all'interno dell'elemento modificando i margini e il padding 
  8. In widalt = 250; si inserisce l'altezza del widget
  9. background-color:#DDEEFF; rappresenta il colore di background del widget (#FFFFFF; per avere sfondo bianco)
  10. border:1px solid #003366; contiene i parametri che determinano lo stile del bordo
  11. Se si cambia il feed di tutto il blog con quello degli ultimi articoli per una singola etichetta che sarà di questo tipo
    www.ideepercomputeredinternet.com/feeds/posts/default/-/etichetta?…
    si potrà visualizzare lo scorrimento degli ultimi post riferiti a una singola categoria.
Dopo aver salvato l'elemento HTML, si può posizionare a piacere con il mouse


10 commenti :

  1. Ciao Parsifal, davvero molto interessante questo widget..fra le personalizzazioni non è possibile magari in orientamento orizzontale? Vorrei piazzarlo sotto il menu orizzontale. ;)

    RispondiElimina
  2. @CalcioNapoli365.com
    L'orientamento orizzontale si potrebbe anche fare, basta sostituire up con left ma allora i titoli vengono attaccati gli uni agli altri e non sarebbe esteticamente valido.

    RispondiElimina
  3. @parsifal32

    Per intenderci, nel sito ufficiale del Napoli Calcio sotto alla testata è presente una barra di scorrimento orizzontale delle news, pensi non sia possibile implementarla con questo o con qualche altro metodo?

    Ti ringrazio in anticipo per la tua proverbiale disponibilità.

    RispondiElimina
  4. @CalcioNapoli365.com
    A parte che non credo sarebbe legale a meno di non avere il consenso di chi gestisce il sito, però questo widget è così. Tutto quello che si poteva personalizzare, o quasi, l'ho indicato nel post.

    RispondiElimina
  5. @parsifal32

    Forse mi sono spiegato male, vorrei implementare una barra orizzontale come quella o simile a quella di quel sito ma che al suo interno visualizzi i miei posts.

    RispondiElimina
  6. @CalcioNapoli365.com
    Widget orizzontale c'è solo questo per Blogger
    http://www.ideepercomputeredinternet.com/2009/06/come-inserire-il-widget-degli-ultimi_06.html

    RispondiElimina
  7. @parsifal32

    Soltanto fisso e non con testo scorrevole quindi, ti ringrazio tanto Parsifal, è sempre un piacere scambiare 2 chiacchiere con te.
    In bocca al lupo per la tua viola!

    RispondiElimina
  8. Ciao Parsifal, io ho inserito quello che tu definisci suggestivo e funziona benissimo. Questo l'ho provato, seguendo i tuoi consigli, ma non lo si vede.Io uso Firefox
    Ciaoo e grazie degli ottimi consigli che ci dai.
    Buona domenica
    Erika

    RispondiElimina
  9. @Erika
    Funziona benissimo anche con Firefox quindi il problema sta nel tuo modello o nel fatto che hai copiato male il codice.

    RispondiElimina
  10. Questo commento è stato eliminato dall'autore.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy