Installare in Blogger un bottone per tornare a inizio pagina.

Nelle pagine web più lunghe gli webmaster sono soliti mostrare a fondo pagina un bottone per tornare rapidamente all'inizio. Talvolta ci sono anche pulsanti per andare anche a fondo pagina magari accoppiati. Questa funzionalità è disponibile pure per la piattaforma Blogger con la possibilità di scegliere anche lo stile dei bottoni da visualizzare a scelta sulla sinistra o sulla destra del layout.

Per uno spostamento meno repentino dal basso all'alto della pagina occorre usare la libreria jQuery. Con questo javascript si mostrerà il bottone solo dopo che ci sia stato un consistente e personalizzabile scroll della pagina verso il basso. L'immagine del pulsante potrà essere scelta dal lettore. A tale scopo si può consultare il post sulle risorse per trovare icone gratis nel web.

Come mostrare un pulsante per tornare a inizio pagina.

In un articolo precedente abbiamo visto come inserire due icone per spostarsi in alto e in basso della pagina web che si sta visitando. Se due icone sempre visibili paiono troppo invasive si può optare per una soltanto per tornare a inizio pagina che si inizia a vedere solo quando si è fatto già un certo scroll della pagina.

Lo script che andrò a presentare utilizza la libreria jQuery e l'ho preso da Dynamic Drive. Lo spostamento non è repentino e si può configurare anche il punto della pagina in cui riportare il lettore che clicca sopra alla icona. Inoltre ho preparato anche tutta una serie di icone adatte ai diversi layout. Per la installazione mi riferirò a un blog su Blogger ma lo script è funzionante in qualsiasi pagina web in cui si possa editare l'HTML.

Come mostrare dei bottoni per spostarsi in alto e in basso di una pagina di Blogger.

Nei siti che siano soliti pubblicare articoli piuttosto lunghi non è raro visualizzare sulla destra o sulla sinistra due bottoni per facilitare lo spostamento in basso e in alto della pagina. Tale spostamento può essere repentino oppure molto più morbido. La prima soluzione sfrutta un semplice javascript e può essere installata nel sito seguendo le istruzioni del post su come inserire bottoni per spostarsi verticalmente nella pagina.

Per avere uno spostamento meno violento si deve invece utilizzare una libreria javascript come potrebbe essere quella jQuery. Tale libreria può essere già installata nel vostro template oppure dovrà essere fatto sul momento. Come icone ho usato due immagini floreali molto adatte a blog femminili che possono però essere sostituite da altre immagini in tema con il contenuto del sito oppure scegliere semplicemente delle icone a forma di freccia.

Come condividere su Twitter il testo selezionato su Blogger.

La condivisione sui social network è uno dei modi più efficaci per rendere virale i contenuti del nostro sito. Google Plus è in forte ribasso dopo che la casa madre ha deciso di non investirci più quindi rimangono Facebook e Twitter i luoghi di destinazione più importanti delle condivisioni.

I lettori possono usare i classici bottoni di condivisione per twittare i titoli dei post ma non sempre questi sono attraenti perché sono rivolti essenzialmente ai motori di ricerca. In questo modo si possono perdere delle potenziali condivisioni. Infatti se un navigatore volesse condividere una frase presente nel post dovrebbe selezionarla, copiarla quindi aprire il proprio account Twitter, incollarla e inviarla ai follower.

Come evitare i conflitti tra le librerie jQuery, Prototype, Scriptaculous e Mootools.

Attraverso il linguaggio javascript sono state implementate nelle pagine web delle funzionalità che le rendono dinamiche. Quando vedete uno slideshow di immagini o un widget scorrevole da inserire nel vostro sito immancabilmente c'è una libreria javascript che svolge il compito principale.

Alcune di queste librerie sono diventati degli standard e vengono utilizzate per gli effetti più svariati. La più conosciuta e utilizzata è probabilmente jQuery che viene aggiornata periodicamente. Non è però la sola visto che ce ne sono altre molto usate dagli sviluppatori che creano temi per Wordpress e modelli per Blogger. Ricordo Prototype e Scriptaculous  che vengono spesso utilizzate contemporaneamente ma anche Mootools ha molti estimatori. 

Come aggiungere un link della pagina quando ci copiano del testo o delle immagini del blog.

Chi ha un blog che crea contenuti originali si sarà certo scontrato con la piaga dei "colleghi" che copiano i post immagini comprese. Mi sono già occupato diverse volte di come comportarsi quando qualcuno copia i nostri articoli e di come disabilitare le opzioni per copiare le immagini sempre nell'ottica che si tratta comunque di una battaglia lunga e difficile in cui le armi che si possiedono sono spesso spuntate.

Vi sarà probabilmente anche capitato di copiare un paragrafo di un sito e dopo averlo incollato di visualizzare un testo con l'URL della pagina da cui proviene. Questo non è certo fondamentale per fermare i copiatori ma può servire da deterrente e qualche volta le informazioni aggiunte al testo copiato rimangono.

Tynt è un sito che offre un servizio di questo tipo. Basta andare sul bottone Get CopyPaste e riempire il modulo con indirizzo email, URL del sito con .com, e non con il localizzato .it, e con la password

Come nascondere la parte finale di una recensione di un libro o di un film.

I blog che si occupano di prime cinematografiche o che pubblicano recensioni su libri di narrativa devono operare la scelta non semplice di rivelare o meno al lettore come andrà a finire il film o come si concluderà il romanzo. Nei siti specializzati si usa internazionalmente un avviso denominato spoiler per lasciare la decisione al lettore se leggere la trama fino alla fine o se contentarsi solo della prima parte per non perdersi l'effetto sorpresa. Tale avvertimento è ovviamente destinato solo a che non abbia ancora letto il libro o non abbia ancora visto il film.

Usando gli strumenti del web si può rafforzare questa attenzione nei confronti dei lettori lasciando nascosta l'ultima parte della recensione e mostrando un bottone su cui il navigatore può cliccare nel caso volesse leggerla per intero. Passo a illustrare tre metodi con cui si possono nascondere dei contenuti. Non è detto che si possa farlo solo del testo formattato ma si possono nascondere anche le immagini, dei video o altri oggetti che siano suscettibili di essere postati con l'HTML

Come mostrare o nascondere i widget HTML con JQuery.

Se siete utenti di Blogger e se avete già provato a personalizzare il vostro modello avrete certamente sentito parlare dei tag condizionali che servono per mostrare gadget o elementi solo in determinate pagine oppure ovunque escluso una tipologia di pagine. Si tratta di uno strumento potentissimo per organizzare meglio il layout. Qualche volta però non è sufficiente e si sente l'esigenza di ottimizzare ulteriormente lo spazio soprattutto della sidebar.

A tale scopo è utile inserire un cursore di scorrimento per mostrare solo una porzione di widget e nello stresso tempo dare la possibilità al lettore di scorrerlo tutto tramite un cursore laterale. Un'altra possibilità è quella di mostrare solo il titolo del widget lasciando al lettore la scelta di cliccarci sopra per visualizzarlo. Una alternativa sempre su questa falsariga è quella di usare la libreria Prototype e Scriptaculous che rende la transizione tra le due condizioni molto meno repentina.

Come inserire due bottoni per andare a inizio e a fondo pagina.

Vediamo come utilizzare la libreria JQuery per un effetto che è sempre molto richiesto vale a dire i bottoni per spostarsi al top e a fondo pagina. Ho notato però che questo effetto non funziona se si cambia versione di JQuery ma non è un grosso problema se si è deciso di utilizzarlo.

Sempre sull'argomento dei bottoni di navigazione dentro il post ricordo la serie di pulsanti con cinque stili diversi e le icone con up, down e scroll. Come al solito dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga ]]></b:skin> . Subito sopra si incolla il codice seguente

Come inserire cuori nel blog per San Valentino.

Tutti gli anni mi sono cimentato nella realizzazione di un widget per ricordare la festività degli innamorati. L'effetto più richiesto per San Valentino del 14 Febbraio è quello dell'inserimento nel sito di cuoricini che cadono. Si può usare il classico script di Dynamic Drive sulla neve che cade modificando le immagini oppure si può usare la libreria JQuery. Visto che ogni anno bisogna pur cambiare qualcosa nei gadget stagionali ho preferito optare per questa seconda possibilità presentando un nuovo widget che ha però la stessa funzione degli altri. Rispetto al widget della nevicata in questo caso si possono scegliere 4 immagini anche diverse da quelle che ho proposto. Il formato richiesto è il PNG ma si possono usare anche immagini animate in formato GIF.

Nella mia demo ho inserito 3 immagini in PNG e una in GIF

Tabella delle miniature degli Ultimi Articoli per Blogger.

Ho presentato moltissimi widget che mostrano gli Ultimi post pubblicati nel nostro sito su Blogger. Oltre a quello classico dell'elenco verticale ricordo il widget degli Ultimi Articoli con le Miniature, lo slideshow verticale e lo slideshow con Easy Slider.

Su questa stessa falsariga vado a illustrare un widget che presenta le miniature degli Ultimi post in una tabella. Ciascuna immagine è collegata all'articolo di riferimento e, passandoci sopra con il mouse, si visualizza un tooltip che mostra il titolo del post e la sua descrizione o il suo incipit.

Ci sono molte possibilità di personalizzazione riguardo al numero di miniature visualizzate e ai colori da usare. Visto che si tratta di un gadget piuttosto largo più che in una sidebar può essere inserito nel footer, sotto l'header o in una pagina statica.

Galleria di immagini animate con numeri di pagina per la navigazione.

Gli utenti di Blogger sono soliti usare le pagine statiche per creare delle Gallerie Fotografiche e associare ciascuna immagine all'articolo da cui è stata estratta. Nel caso si abbiano molte immagini da mostrare il navigatore è costretto a scorrere la pagina fino in fondo per visualizzarle tutte. Vediamo come si possa ovviare a questo inconveniente inserendo un sistema di navigazione in modo da suddividere le immagini in più pagine che possono essere navigate dalla stessa pagina statica.

Oltre ai numeri di pagina si possono anche inserire effetti di animazione e il plugin Lazy Load per favorire un caricamento della pagina più rapido. La Galleria di immagini che vado a illustrare è totalmente personalizzabile e si deve al lavoro di diverse persone le linkerò a fine articolo.

L'aspetto della Galleria di Foto sarà il seguente

Lazy Load Plugin per ridurre il tempo di caricamento delle immagini.

La velocità di caricamento delle pagine del blog è diventata uno dei fattori che influenzano l'algoritmo di Google e che ne determinano il suo posizionamento nei risultati di ricerca. E' quindi opportuno prendere delle precauzioni per rendere il più rapida possibile la navigazione nel nostro sito.

Uno dei motivi principali del rallentamento è l'eccessiva presenza di widget e di oggetti multimediali quali video e audio che si riproducono automaticamente all'apertura delle pagine. Probabilmente però quello che incide di più nella lentezza del caricamento dell'articolo è la presenza di molte immagini magari anche di grosse dimensioni. Si può cercare di pubblicare articoli che ne contengano un numero limitato ma in certi casi le foto sono indispensabili per la completezza del post.

Peeling Effect o Effetto Page Flip per Blogger.

Dopo una decina di minuti di ricerche su Google non sono riuscito a trovare di chi sia paternità di questo effetto molto simile al PageEar ma più semplice anche se di minor impatto estetico. Anche il suo nome è dubbio visto che il Page Flip, così si dovrebbe chiamare, è un effetto piuttosto complesso con versione gratuita e a pagamento che mostra i vari oggetti come se fossero delle pagine di un libro che si sfoglia.

Per abuso di linguaggio chiamiamo Page Flip anche la personalizzazione per Blogger che vado a presentare. Dopo la sua installazione verrà a visualizzarsi una piccola finestra in alto a destra del layout. Se ci si passa sopra con il mouse si visualizzerà invece una immagine più grande con l'impressione di aver sfogliato una pagina. Ho postato in rete una dimostrazione del Page Flip

 

L'Effetto Page Flip sfrutta l'ultima versione di JQuery ed è facilmente personalizzabile riguardo alla immagine e al link da mostrare al navigatore che passerà con il mouse sopra all'immagine

Large Drop Down Menu per Blogger.

Il menù che vado a presentare rappresenta una valida alternativa per siti che vogliono mostrare ai visitatori una gran mole di articoli e di link. Come tutti i menù per Blogger ci possono essere modelli in cui funzionano e altri in cui non si riescono a aprire i sottomenu. Non si può dire nulla a priori sulla compatibilità o meno del menù rispetto a un dato template. Occorre testare per verificare.

Il Large Drop Down Menù utilizza JQuery e quindi i modelli in cui già esiste questa libreria possono fare a meno di caricarlo nuovamente mentre quelli che utilizzano javascript diversi possono avere problemi di compatibilità. E' comunque sempre opportuno aggiornare JQuery alla sua ultima versione.

Il Large Drop Down Menù si deve a Codrops, se ne può vedere la Demo e scaricare il codice sorgente. Si tratta di un file ZIP che contiene il javascript, il CSS e l'HTML di esempio.

Adipoli jQuery Image Hover Plugin installato su Blogger.

Non conoscevo il plugin Adipoli che mi è stato segnalato da una amica a cui non metto il link perché l'ho già citata un sacco di volte :) . Si tratta di uno dei tanti effetti basati sulla libreria JQuery che modificano le immagini al passaggio del mouse. Facendo una rapida ricerca anche in lingua inglese non ho trovato nessuno che abbia ancora adattato Adipoli JQuery Plugin a blog su piattaforma Blogger.

Il concetto è quello di selezionare un Effetto Iniziale tra i 4 proposti e un Effetto Hover tra i 16 proposti che comporta una modificazione dell'aspetto della immagine qualora venga puntata con il cursore. Ho postato in rete una dimostrazione di Adipoli JQuery Image Hover Plugin

Come inserire un pulsante per tornare a inizio pagina.

Ho già presentato un metodo per spostarsi all'interno dei post di Blogger mediante l'introduzione di due icone che portano il lettore rispettivamente all'inizio e alla fine dell'articolo e di eventuali commenti presenti nel post.

Lo spostamento provocato da tali pulsanti è repentino visto che non sono state usate librerie javascript per introdurre degli effetti slide che rendano il processo decisamente più valido esteticamente. Vado quindi a proporre un nuovo metodo basato su un solo bottone che appaia solo quando si scrolla la pagina verso il basso e che ci permetta di tornare nella parte alta con un click. Viene usato JQuery che è il non plus ultra dei javascript per questo tipo di personalizzazioni.

Creare una pagina di introduzione al blog con i cookie e JQuery

Ho già presentato diverse opzioni per introdurre una pagina di benvenuto o di presentazione al blog. Ricordo la pagina di manutenzione, la pagina di benvenuto con musica di sottofondo, la pagina di introduzione con Effetto Lightbox, il messaggio di benvenuto in homepage, un avviso fisso o flottante e, per finire, una pagina di benvenuto che scompare automaticamente dopo pochi secondi.

I commenti a questo ultimo post sono stati particolarmente incentrati nella ricerca della possibilità di usare i cookie per impedire che tale pagina possa essere visualizzata di continuo quando si naviga nel sito. Anche se fosse messa nella homepage sarebbe opportuno fare in modo di non mostrare la stessa pagina a un singolo navigatore dopo che è stata già vista una volta. E' evidente che diventerebbe estremamente noiosa.

Bellissimo Menu Circolare da installare su Blogger.

Ho presentato menu di tutti i generi e adatti a quasi tutte le esigenze. Ci sono quelli semplicissimi particolarmente amati dai principianti e quelli più complessi che vengono usati principalmente dai blogger più esperti. I miei lettori hanno potuto scegliere tra una vasta gamma di menù orizzontali o verticali, con una sola linea di navigazione o strutturati su più livelli, posizionati nella parte alta, nella sidebar oppure con effetto slide sulla parte sinistra o destra del layout.

E' però sicuramente la prima volta che passo a illustrare la procedura di installazione di un menù che ho denominato "circolare" perché, se si passa con il mouse sopra l'immagine centrale, si aprono in senso orario o antiorario tutta una serie di altre immagini debitamente collegate ai vari post o alle varie etichette del blog. L'utilizzo di questo menù potrebbe interessare soprattutto coloro che hanno diverse gallerie fotografiche a loro volta inserite in delle pagine statiche. Tutte queste gallerie potrebbero essere riunificate in un'altra pagina statica attraverso questo Menu Circolare. Un'altra possibilità che mi viene in mente è quella di usare come link le etichette del blog quando queste sono in numero non eccessivo, per esempio in un blog di cucina possono essere così organizzate le ricette degli antipasti, primi piatti, secondi, contorni, dessert, dolci, ecc.

Come inserire in Blogger dei tooltip con JQuery.

I tooltip sono dei fumetti che vengono mostrati nella pagina non appena il mouse passa sopra a un determinato testo o a una certa immagine. Ci sono tooltip che possono venire installati in modo semplicissimo, altri che hanno bisogno di un qualche foglio di stile e altri ancora, più sofisticati, che oltre ai CSS utilizzano anche immagini precaricate per avere l'aspetto di veri cartoon.

In questo articolo mi occuperò di come inserire dei tooltip in un qualsiasi articolo del blog utilizzando la libreria JQuery e il plugin Tiny Tips. Dal sito di Tiny Tips si può scaricare il file javascript insieme alle immagini che servono per il CSS del tooltip. Basta andare su Download > Product version. Il file sarà in formato ZIP e, dopo essere stato scompattato con 7-Zip o programma analogo, si vedrà che contiene il file jquery.tinyTips.js, due file di testo con il changelog e la licenza e una cartella di Demo con al suo interno le sottocartelle images, js e style.

Si può fare tutto da soli e seguire le istruzioni dell'autore per l'installazione della personalizzazione che porta a tooltip con questo aspetto