13 agosto 2011

Widget degli Articoli Recenti con Effetto RoundAbout.

La presenza del widget che mostra gli Ultimi Articoli è un must per tutti i blog. Serve per mostrare in modo efficace quelle che sono state le ultime pubblicazioni per cercare di trattenere il visitatore nel nostro sito il più possibile. Si può scegliere uno stile minimalista, come è stato fatto al momento in questo blog, oppure optare per gadget con suggestivi effetti speciali. Ricordo solo gli ultimi due che ho avuto modo di presentare:
Oggi ne presento un altro che è veramente sorprendente. Ne ho testato il funzionamento con tutti i principali browser con risultati positivi. Ricordo però che ogni modello è un entità a sé stante che potrebbe già avere nel suo codice dei javascript incompatibili con quelli di questo widget.
Il funzionamento del gadget è tale da  mostrare, in evidenza posizione centrale, l'immagine estratta dell'ultimo post mentre le altre sono ai suoi lati. Il link all'articolo è presente solo nella miniatura al centro mentre, se si clicca su quelle laterali, si agisce come se fossero degli strumenti di navigazione. Senza nessuna interazione da parte del mouse, ci sarà uno scorrimento naturale delle immagini degli ultimi articoli
round-about-ultimi-post
Passiamo alle istruzioni per l'installazione di Round About. Si va su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Non occorre espandere i modelli widget. Si cerca la riga ]]></b:skin> che indica la fine dei fogli di stile e, subito sopra, si incolla il codice
in cui i più esperti possono variare alcuni parametri a partire dalle dimensioni delle immagini. Adesso si cerca la riga </body> e subito sopra si incolla il 
Si salva il modello. Dobbiamo adesso andare su Design > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, incollare quest'ultimo codice
<script style="text/javascript" src="https://sites.google.com/site/scriptperilblog/widget-1/roundabout.js"></script><script style="text/javascript">
var numposts_gal = 8;
var random_posts = false;
</script>
<script src=http://demo-blogger-widget.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts></script>
Si clicca su Salva e si posiziona con il mouse. Si devono inserire il numero di post da visualizzare e la homepage del blog. Se in un articolo non è presente alcuna immagine, nel widget sarà visualizzata questa miniatura che ho postato su Picasa. Se volete modificarla, aprite il file 
https://sites.google.com/site/scriptperilblog/widget-1/roundabout.js
con Notepad++, sostituite l'URL con quello di un'altra immagine, salvate e caricate lo script su Google Sites mediante l'opzione Schedario quindi ottenetene l'indirizzo che metterete in questo ultimo codice al posto di quello originale. Nel sito dell'autore di RoundAbout si possono trovare anche le istruzioni per ulteriori personalizzazioni di questo celebre effetto.
Se il widget non vi funziona con Internet Explorer, dovete scaricare il file javascript presente nel codice caricato su Google Documenti e l'altro evidenziato di viola in quest'ultimo blocco. Vanno caricati nella cartella Public di DropBox per acquisirne il link diretto da sostituire nel codice. Non posso inserire questi URL, perché altrimenti un numero eccessivo di installazioni del widget, mi esaurirebbe la banda che ho a disposizione su DropBox.  
Fonte | FredHQ RoundAbout



17 commenti :

  1. Questo effetto mi piace moltissimo, se non avessi paura di far pasticci lo metterei, magari in alto.
    Grazie per le belle idee.

    RispondiElimina
  2. @LaDamaBianca
    Guarda che è semplice e poi, se salvi il modello, puoi sempre tornare alla situazione precedente con click.

    RispondiElimina
  3. Questo effetto mi piace moltissimo, ho inserito in modifica htlm i due codici, salvati e poi quando vado ad inserire il codice in widget mi appaiono le tue foto, una sopra l'altra pur avendo sostituito http del mio blog, dove sbaglio?
    Scusami e ti ringrazio moltissimo per quanto metti a nostra disposizione!
    Buon w.e.

    RispondiElimina
  4. Ora appaiono le foto del mio blog ma non l'effetto a slide, appaiono sempre una sotto l'altra in verticale.
    Scusami del doppio commento!!

    RispondiElimina
  5. si può fare con mouse over invece che col click? grazie per questo widget!

    RispondiElimina
  6. si può fare con mouse over invece che col click? grazie per questo widget!

    RispondiElimina
  7. @Mary47
    Se l'aspetto del widget non è corretto come ho scritto anche nel post dipende dagli altri javascript presenti nel modello. Non parlo solo dei widget ce ne possono anche essere di nativi. Quindi c'è poco da fare.

    @Giorgiogal
    Ho aperto il file dell'autore dell'effetto e non è presente l'evento onclick per eventualmente trasformarlo in onmouseover. Anche dando uno sguardo (veloce) nella documentazione non ho trovato nulla al riguardo ma può darsi che ci sia perché sono istruzioni molto dettagliate.

    RispondiElimina
  8. Ti ringrazio Ernesto, ho messo il primo!!
    Buona continuazione di giornata!!

    RispondiElimina
  9. Dopo una settimana a pensarci oggi ci ho provato e...ci sono riuscita :-) grazie di cuore Ernesto.

    RispondiElimina
  10. Forse è chiedere troppo... ma è possibile fare la stessa cosa con uno slider tipo quello del template Linedy (non inserisco il link perchè il commento non finisca nella spam, comunque c'è scritto che usa il jQuery Cycle Plugin; ha un effetto dissolvenza, ed una breve descrizione...che non mi importa più di tanto, ma almeno il titolo sarebbe bello averlo), usando i feed di una determinata etichetta invece che quelli di tutto il blog?

    RispondiElimina
  11. @Thea
    I link si possono incollare, non si può inserirne di attivi. Non conosco il template a cui fai riferimento, d'altra parte sono migliaia e mi sono occupato solo di quelli ufficiali perché tutti gli altri fanno storia a sè.
    Se sei interessata a quel modello puoi provare a chiedere al suo autore nel suo sito o via email.

    RispondiElimina
  12. Già chiesto =). Ti ringrazio della risposta, alla fine cercando sul tuo sito ho visto l'easy slider, però ancora non sono riuscita a metterlo... sicuramente sarà una domanda stupida visto la mia ignoranza in materia, ma che differenza passa tra gli slider come roundabout e easy slider che prendono automaticamente le immagini dai feed del blog, ed invece gli slider tipo nivo in cui bisogna inserire tutto manualmente?

    RispondiElimina
  13. @Thea
    La differenza sta nel fatto che se si inserisce automaticamente lo slide mostra gli ultimi post senza che tu debba perdere tempo a modificarli di continuo. E' preferibile la prima ipotesi solo se si vogliono avere in primo piano costantemente gli stessi articoli.

    RispondiElimina
  14. Quello lo intuivo=); comunque grazie, se non fosse stato per il tuo blog non avrei mai trovato uno slide che prende il contenuto direttamente dai post, è un secolo che ne cercavo uno, da qualche parte ho letto che si chiamano content slider mentre gli altri sono image slider... ma in realtà cercando su google anche come content slider avevo trovato solo quelli tipo nivo.
    Su un blog di prova son riuscita a mettere l'easy slider trovato qui, ne ho cambiato un po' l'aspetto ma ancora non ho capito perchè nel mio template i pulsanti danno qualche problema di "impaginazione" se così si può dire... quando avrò un po' più di tempo magari ci penserò, grazie per tutte le istruzioni che hai pubblicato, son capitata sul tuo sito da poco ma è stata una gran scoperta=)

    RispondiElimina
  15. @Thea
    Guarda che ci sono dei tutorial anche per acquisire i contenuti automaticamente con Nivo Slider. Non li ho mai pubblicati perché non funzionano molto bene con Internet Explorer. Eccone uno qui per esempio
    http://www.abu-farhan.com/2011/07/automatic-content-slider-for-blogger-using-nivo-slider-part-1/

    RispondiElimina
  16. appena inserito! troppo bello!!! grazie!

    RispondiElimina

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