Responsive Menù per Blogger su due livelli anche per mobile.

Il Responsive Design o Design Responsivo è quella tecnica che serve a creare delle pagine web che si adattino graficamente alle diverse risoluzioni dello schermo con cui vengono aperte. Visto il grande sviluppo dei dispositivi mobili e visto che ormai il traffico da smartphone e da tablet per talune tipologie di siti è diventato non solo molto importante ma addirittura prevalente, è utile cercare di avere un blog con un aspetto che sia friendly anche per chi lo visita da dispositivo mobile. 

Gli utenti di Blogger possono attivare la versione mobile per avere un sito facilmente navigabile anche da cellulare. Questo però porta a delle rinunce per quello che riguarda le sidebar che non vengono visualizzate e i menù che anche se si opta per la versione mobile personalizzata non si aprono correttamente.  Vediamo come si possa creare un menù che sia visibile sia nella versione desktop sia nella versione mobile anche se con delle diverse modalità di navigazione. Prima di iniziare occorre andare su Modello, abilitare la versione mobile e scegliere Personalizza tra quelle disponibili.

Elenco di più di 400 widget per Blogger.

Dopo aver organizzato i tutorial per Blogger in 13 Raccolte con circa 1300 articoli ho iniziato anche a elencare i widget più interessanti che ho proposto in questi sei anni e mezzo di blogging. Questa è la quinta raccolta e quando sarà terminata vi darà modo di consultare quasi 500 tutorial per installare widget di tutti i tipi su blog situati su piattaforma Blogger.

È evidente che i gadget proposti 6 anni fa sono sotto tutti gli aspetti meno affidabili di quelli presentati da poco. In questo tempo penso di aver affinato anche il modo di proporre le guide e quindi i tutorial più recenti ritengo che abbiano un approccio che potrei definire euristico con una qualche forzatura visto che insieme alle informazioni essenziali per l'installazione del widget ci sono anche degli input che possono offrire al lettore con più intuito gli strumenti per creare o modificare da solo i gadget per Blogger.

Widget degli Articoli Simili e dei Bottoni Sociali per Blogger.

Gli obiettivi di un blogger che non vende niente nel suo sito sono quelli di avere il maggior numero di visitatori, di farli restare il più possibile a leggere i suoi contenuti e di indurli a condividere sui social network il maggior numero di pagine. Per raggiungere questi risultati bisogna innanzitutto scrivere contenuti validi ma questo non basta visto che bisogna prestare grande attenzione anche ai fattori di ranking per un posizionamento migliore nei risultati di ricerca.

Una ulteriore spinta in questo senso può essere data da opportuni widget che mostrino ai lettori il meglio della nostra produzione insieme a una certa facilità della sua condivisione nei social network. Adesso vado a illustrare quello che si potrebbe definire come un widget misto che mostra gli Articoli Simili a quello visualizzato e i bottoni di condivisione su Facebook, Twitter e Google+. Ricordo che gli Articoli Simili o Correlati o Related Posts non sono altro che altri post che condividano con quello aperto almeno una etichetta. I bottoni di condivisione sociale sono invece quei pulsanti che aprono una finestra popup che permette di condividere il post visualizzato su Facebook o su Google+ oppure di twittarlo ai follower di Twitter.

Come ottenere il link diretto dei file caricati nella nuova versione di Google Drive.

In quasi tutti gli account Google Drive è stato aggiornato a una nuova versione grafica con degli indubbi miglioramenti ma anche con delle mancanze. Infatti una delle cose più utili di Google Drive era la possibilità di caricare file di ogni tipo per poi averne il link diretto o hotlink. Questo è particolarmente utile per esempio quando si voglia inserire in una pagina un link a un audio o a un video che vogliamo venga riprodotto automaticamente senza che l'utente ne debba fare il download.

Per i blogger la possibilità di avere il link diretto a quasi tutti i formato di file è di grande utilità quando si debbano caricare nel template dei file javascript, CSS o XML. Nella vecchia versione di Google Drive potevamo selezionare il file, andare su Dettagli quindi scorrere la pagina in basso fino a Hosting dove veniva mostrato il link diretto del file. Nella nuova versione questo link non viene mostrato almeno per il momento. Per ovviare a questa mancanza e per continuare a avere gli hotlink dei file caricati su Google Drive dobbiamo procedere nel modo che vado a illustrare.

Scoprire le richieste di amicizia ricevute e inviate su Facebook.

Non è certamente il mio caso ma se un utente invia troppe richieste di amicizia che non vengono accettate rischia di vedersi bloccare l'account, d'altra parte ci sono persone che spesso sono costrette a soprassedere su richieste di amicizia per questioni di tempo o di dispositivo con cui si aperta l'applicazione. Il risultato è che non si riesce più a ritrovarle visto che non c'era una pagina dedicata. Questo fino a poco tempo fa visto che Facebook si è decisa a rendere queste informazioni più accessibili anche se non proprio immediate. 

Finora per scoprire le richieste di amicizia che avevamo inviato si dovevano infatti usare applicazioni esterne quali UnFriendFinder che però adesso ha smesso di funzionare. Alternativamente era possibile aprire una pagina di Facebook di base che veniva caricata se aperta con cellulari di scarsa potenza che però adesso non è più disponibile. Vediamo come adesso si possa procedere.

Condivisione del post su Facebook con miniatura giusta e snippet personalizzato.

Ci sono vari modi per condividere un post su Facebook usando oggetti interni alla pagina che si sta visualizzando come i bottoni Mi Piace o Consiglia oppure esterni al post come estensioni del browser tipo Shareaholic che è disponibile per Chrome e per Firefox. Facebook ha reso disponibili per gli webmaster dei metatag per arricchire la condivisione oltre che con il titolo della pagina anche con lo snippet e una miniatura delle immagini che sono state rilevate.

Consideriamo il caso particolare di un post in cui non ci siano immagini o che queste non vengano rilevate da Facebook. Quando proviamo a fare la condivisione nell'Anteprima si visualizzerà come miniatura l'Intestazione del blog o addirittura una icona presente nel modello. 

Come mostrare un calendario invece della data in Blogger.

Nei modelli di Blogger indubbiamente la data è uno di quegli elementi per cui i programmatori di Google si sono meno impegnati per la loro realizzazione. Si tratta di una semplice riga con il numero del giorno, il nome del mese e il numero dell'anno. Molti webmaster propendono per un template scaricato da internet proprio per la maggiore accuratezza e qualità estetica della data.

Vediamo come sia possibile convertire la data classica presente in un template ufficiale di Blogger in una sorta di calendario multicolore. Il test di funzionamento l'ho fatto per il modello Semplice ma ritengo che possa funzionare anche per altri template di Blogger.

Prima di iniziare occorre come sempre salvare il template per questioni di sicurezza e per provvedere a un eventuale ripristino. Successivamente bisogna scegliere il formato di data specifico per questo hack. Recatevi su Impostazioni > Lingua e formattazione > Formattazione > Formato intestazione data e scegliete il formato con una data del tipo  25 Luglio 2014

Come nascondere footer e sidebar nelle pagine di Blogger.

Le pagine statiche di Blogger vengono usate dagli webmaster per degli scopi particolari come la  mappa del sito, una galleria di immagini o di video, il modulo di contatto o la pagina per politica della privacy. A tale proposito si può sentire l'esigenza di avere un layout per le pagine statiche diverso da quello del resto del blog. Credo sia noto a tutti come si possa decidere di visualizzare un widget solo in una determinata tipologia di pagine utilizzando i tag condizionali. Useremo quindi questo metodo anche per le diverse sezioni del blog.

Ho già presentato dei tutorial per nascondere nelle Pagine le sidebar e in questo post vediamo come non visualizzare anche il footer o il piè di pagina in tali pagine. Dopo aver salvato il template andate su Modello > Modifica HTML e cercate la riga </head>. Subito sopra incollate questo codice