Google penalizzerà i siti con popup a tutta pagina.

Con un post su Google Webmaster Central Blog gli webmaster di tutto il mondo sono stati informati di imminenti modifiche nell'algoritmo di Google che determina il posizionamento nei risultati di ricerca. Facciamo un po' il sunto di quanto comunicato da Google. Poco meno di due anni fa fu introdotta la dicitura mobile-friendly per i siti che proponevano una corretta visualizzazione anche da mobile. I siti non mobile-friendly sono stati penalizzati nei risultati di ricerca a partire dal 21 Aprile 2015.

A seguito di queste decisioni l'85% dei siti soddisfano i criteri per poter essere definiti mobile-friendly. Questo tag verrà quindi presto rimosso dai risultati di ricerca da mobile. Saranno però mantenuti i Test di ottimizzazione per il mobile presenti su Search Console come quello di compatibilità e quello di ottimizzazione.

Come creare una finestra popup che mostri una immagine con link a una pagina del blog.

In un articolo di qualche tempo fa ho illustrato come si possa mostrare una finestra modale (o popup) che appaia ai nuovi visitatori del blog. In questa immagine ci poteva essere un testo con un invito a sottoscrivere i feed, ad acquistare un prodotto o a contribuire a una campagna di sensibilizzazione.

Il limite di quella personalizzazione è che l'immagine non poteva essere linkata cioè l'avviso presupponeva una azione diversa da un semplice click da parte del lettore. Il metodo utilizzato si serviva di un iframe che non può essere linkato e anche i link con i CSS sono molto difficili da inserire. L'utilizzo dei javascript avrebbe comportato una rifacimento completo di tutto il codice che non mi andava di fare e che forse sarebbe stato anche non alla portata delle mie modeste capacità.

Come mostrare in Blogger una immagine in una finestra popup con effetto Lightbox.

In un commento in calce a un post in cui si parla di come mostrare una finestra modale con il Page Plugin di Facebook mi è stato chiesto se fosse possibile visualizzare una semplice immagine invece del widget di Facebook.

Adattando un pochetto il codice si può in effetti mettere in primo piano con Effetto Lightbox una qualunque immagine con dimensioni adeguate. Si può anche personalizzare il colore dello sfondo, non con un codice di un colore, ma con una immagine di un pixel più o meno trasparente. Questa personalizzazione utilizza anche i cookie in modo che la finestra popup non compaia più per un certo periodo che nel codice è proposto in 7 giorni ma che può essere personalizzato. L'immagine può contenere un annuncio, un invito o quello che si vuole. Ci sarà anche una crocetta per nasconderla per i successivi 7 giorni. Sarà però sufficiente anche il solo cliccare in una qualsiasi parte del layout.

Come bloccare l'apertura di popup da tutti i browser.

La pubblicità è fondamentale per l'economia e lo è ancora di più nel web visto che la gratuità di moltissimi siti anche molto utili è dovuta alle entrate derivanti da affiliazioni pubblicitarie. Soltanto che come spesso succede c'è chi se ne approfitta e inserisce nei propri siti delle pubblicità invasive che danneggiano la navigazione.

Mi riferisco soprattutto a banner e popup pubblicitari che si aprono senza nessun azione da parte del navigatore. Se durante la navigazione notate spesso questo fenomeno non è però detto che dipenda dai siti visitati ma potrebbe essere anche un virus che si è installato nel vostro computer. Se si esclude la presenza di malware si può pensare di impostare i vari browser per impedire l'apertura dei popup.

Come aprire un popup con un video di Youtube cliccando su un link.

Mi è stata posta la questione su come si possa aprire una finestra popup di un video di Youtube cliccando semplicemente su un link. Esistono dei plugin che svolgono proprio questa funzione e che si basano su JQuery ma non è agevole usarli in Blogger soprattutto dopo che sono state modificate le API di Youtube. Con tali plugin si mette in primo piano il video di Youtube con un effetto simile al Lightbox di Blogger. Vi potete fare una idea di queste personalizzazioni consultando il post sull'Effetto Shadowbox che può essere usato anche per gallerie di video di Youtube e Vimeo.

Rimanendo sul semplice vediamo come si possa aprire una finestra popup del browser con un video di Youtube in modo da poterlo visualizzare nella pagina con il link e senza implementare tutto il suo codice. Per prima cosa bisogna andare su Youtube e ricavare gli ID dei video che vogliamo implementare con questo metodo. Basta copiare l'ultima parte del loro indirizzo nella barra del browser

Finestra popup con bottoni per condividere su Facebook, Google+ e Twitter.

Dopo una finestra modale con l'invito a cliccare su Mi Piace della pagina Facebook vado a presentare un'altra versione molto più efficace perché mostra agli utenti una finestra popup con i pulsanti per sottoscrivere la pagina ufficiale su Facebook, seguire l'autore del blog su Twitter e seguire pure la pagina business di Google Plus. Anche in questo caso si può settare dopo quanti giorni debba apparire nuovamente agli utenti per impedire che venga visualizzata a ogni apertura di pagina. In sostanza viene installato un cookie nel browser del visitatore che durerà il tempo che decideremo e che impedirà nuove aperture della finestra popup. Questo è necessario anche a beneficio della nostra stessa navigazione

L'aspetto della finestra è anche personalizzabile nella forma e nei colori ma questo è consigliabile solo a chi già abbia una certa esperienza di queste modifiche.

Come inserire una finestra popup in un articolo.

Le finestre popup non sono altro che delle finestre secondarie che si aprono in una pagina web in due modi ben distinti. Ci sono quelle che si visualizzano in automatico e quelle che invece hanno bisogno di una azione da parte del visitatore per essere aperte.

Vediamo come inserire una finestra popup del secondo tipo in un articolo di Blogger ma anche in un'altra qualsiasi pagina web. L'obiettivo è quello di avere visibili nel post un testo di ancoraggio o una immagine che, nel caso un navigatore ci cliccasse sopra, aprirebbe nella stessa pagina una nuova finestra di dimensioni e di posizione predeterminate. Si tratta in sostanza di incollare un codice nell'Editor di Blogger o in Windows Live Writer con Modalità HTML. Si possono inserire più finestre popup per ogni pagina. Basta avere l'accortezza di modificare il nome della funzione.

Come mostrare il Like Box di Facebook in una finestra modale con Effetto Shadowbox.

Aggiornamento: Il Like Box di Facebook è stato ritirato e su Blogger è stato introdotto il Lightbox nativo. Un widget simile a quello presentato in questo post può essere installato seguendo le istruzioni su come mostrare una Finestra Popup del Page Plugin di Facebook.

Dopo aver pubblicato l'articolo su come mostrare una finestra popup di benvenuto che sfruttava l'Effetto Shadowbox ho ricevuto numerosi commenti sulla possibilità di mostrare in questa finestra il Like Box di Facebook. Sauro, un lettore di questo blog, aveva postato un commento per spiegare come aveva risolto la questione di inserire appunto il widget della pagina fan nella finestra modale.

Alcuni commenti successivi mi hanno fatto ritenere che fosse necessario tornare sull'argomento perché mi pare che ci siano molti frequentatori di questo blog interessati al tema. Quindi vediamo come fare per visualizzare una finestra popup se si apre la homepage di un blog su Blogger, che sparisca automaticamente dopo un certo numero di secondi ma che si può comunque sempre chiudere cliccando sull'icona della crocetta. Quello che il lettore visualizzerà, invece del classico benvenuto, sarà un invito a iscriversi alla Pagina Fan di Facebook insieme agli avatar di quelli già iscritti

Come inserire una finestra popup di benvenuto con ShadowBox.

Ho avuto modo di presentare l'Effetto Shadowbox che ritengo sia uno dei migliori per gli utenti di Blogger data la sua estrema versatilità. L'obiettivo di questo post è quello di creare una finestra popup di entrata che può essere personalizzata con una immagine o anche con qualsiasi oggetto HTML.

L'immagine che si visualizza ha un collegamento alla sottoscrizione dei feed di questo blog, può essere chiusa cliccando sulla crocetta in basso a destra oppure scomparirà automaticamente dopo 20 secondi dall'apertura della pagina. La durata dell'apertura può essere personalizzata

 Ho postato sul web una dimostrazione di questo effetto

Questo è invece lo screenshot di quello che appare al visitatore

Menù Orizzontale Popup con Immagini per Blogger.

Utilizzando i javascript e i CSS di un menù che ho già presentato vediamo come sia possibile crearne un altro di forma orizzontale con una serie di immagini a rappresentare le singole categorie. Il concetto è quello di vedere un popup di un menù verticale quando si punta con il mouse una singola immagine. Evidentemente le foto inserite dovranno essere personalizzate e avere attinenza con le voci secondarie che saranno viste nel relativo menù. Mi rendo conto che è più difficile spiegarlo a parole che realizzarlo in pratica. Ecco la

• Demo del Menù Orizzontale con Immagini -

Quando passerete con il mouse sopra una delle sei immagini, apparirà il popup del menù che sarà diverso a seconda della foto puntata

Drop Down Menù a più livelli per Blogger.

Continuo la rassegna di menù che riescono a funzionare anche con i nuovi template del Designer Modelli. Quello che vado a presentare è stato chiamato dall'autore "Flex Level Drop Down Menu" e ha una struttura multilivello che si apre sotto forma di popup al passaggio del mouse.

Date un'occhiata alla
Demo del Drop Down Menù per Blogger -

Popup Menù compatibile con i template del Designer Modelli di Blogger.

Quello che vado a presentarvi è un menù molto particolare che ha le seguenti caratteristiche:

     E' multilivello e possono essere inserite moltissime voci

     E' utilizzabile soprattutto in una sidebar di sinistra

     Si può inserire questo menù contestualmente in qualsiasi link dentro un post o un widget

     Funziona con il modello Semplice del Designer Modelli e quindi è presumibile che non abbia       problemi anche con gli altri template più recenti

     Si visualizza correttamente anche con Internet Explorer anche se con questo browser è un po' più lento.

Prima di procedere all'installazione ecco come si presenta il menù quando si punta una delle sue voci con il mouse