Come nascondere l'Header di Blogger quando il blog viene aperto con un cellulare.

I più grandi nemici dei blogger sono il tempo e lo spazio. Il tempo che dedichiamo alla nostra passione non è mai abbastanza. Se privilegiamo il curare l'aspetto e l'ottimizzazione per i siti di ricerca ci manca il tempo per scrivere post di livello e viceversa se impieghiamo quel poco o tanto che abbiamo a disposizione per pubblicare gli articoli non riusciamo a tenere il passo con tutte le novità apportate ai motori di ricerca.

Un discorso simile vale anche per lo spazio disponibile nel layout. Vorremmo mostrare più contenuti possibili insieme a widget eleganti e utili ma è inevitabile fare delle scelte e eliminare tutto quello che non è strettamente necessario. Nella versione desktop di Blogger si può ottimizzare lo spazio con l'introduzione dei cursori nei widget delle sidebar. Nella versione mobile i problemi vengono acuiti dal fatto che la risoluzione è più bassa. Il primo scroll della pagina viene di solito indicato con l'espressione inglese "above the fold".

Come aggiungere 1, 2 o 3 widget allineati sopra e/o sotto l'Header di Blogger.

Continuo nell'aggiornamento di vecchi tutorial per Blogger alla luce delle novità introdotte nel codice del suo Editor del Template. Dopo aver visto come aggiungere due o tre colonne sopra e/o sotto l'area del post e aver visto come dividere in due o tre parti l'Intestazione di Blogger adesso è la volta di una guida su come aggiungere uno, due, tre o più widget allineati sopra o sotto l'Header.

Il caso di un solo widget è molto semplice visto che basta sbloccare l'elemento Header per poi aggiungere un gadget da Layout. Per due o tre widget allineati la cosa è un po' più complessa e dovremo mettere mano al codice. In sostanza dovremo passare da una situazione come questa

Come dividere l'header di Blogger in due o tre parti.

Se cercate sul web la domanda implicita nel titolo del post vi troverete ai primi posti dei risultati di ricerca alcuni articoli di questo sito che però sono stati scritti diversi anni fa. Se la ricerca la fate su Google.com con la query tradotta in inglese troverete un sacco di risultati che rimandano a tutorial sul tema.

Tutte queste guide però sono state testate con il vecchio codice di Blogger e nessuna di queste risolverà il problema. In realtà non è che il codice di Blogger sia cambiato moltissimo, è stata però profondamente modificata la struttura del template con l'introduzione delle "freccette nere" sulla sinistra per visualizzare o nascondere tutto il codice delle varie sezioni.

Come cambiare il link della Intestazione su Blogger.

Quando in un blog su Blogger si clicca sull'Header veniamo reindirizzati alla sua homepage. Questa impostazione è la stessa sia nel caso avessimo inserito una immagine al posto della Intestazione sia se non lo avessimo fatto. Si tratta di un link comune a tutte le pagine che serve al navigatore per andare nella pagina principale del sito a partire da un qualunque post.

Ci sono però dei blogger che hanno creato un vero e proprio network di siti a cui converrebbe che il click sulla Intestazione portasse più che alla homepage del sito in oggetto alla pagina di presentazione di tutti i blog del network. Non sto qui a dissertare di come creare una pagina siffatta ma con un po' di fantasia si può prendere una pagina statica di uno qualsiasi di questi siti e creare una galleria di foto con descrizione di tutti i blog collegati.

L'obiettivo di questo post è quello di mostrare come si possa modificare il link nativo della intestazione a favore di un qualsiasi collegamento anche esterno al sito.

Come creare una header animato in GIF con testo per Blogger.

Nell'articolo precedente abbiamo visto come si possano inserire i codici delle immagini nei campi solitamente usati solo per il testo che riguardano il Nome e la Descrizione del blog oltre al Titolo del post. In quest'articolo vedremo invece una delle possibili applicazioni di questa funzionalità. Se andate su Layout > Intestazione > Modifica > Scegli file possono essere caricate anche immagini in formato GIF da sostituire al titolo e alla descrizione o da inserire come background della intestazione.

Le opzioni possibili sono infatti Dietro titolo e descrizione, Al posto do titolo e descrizione, Fai seguire questa immagine da una descrizione e infine Riduci e adatta. Per la mia esperienza non sempre le immagini caricate nell'Header di Blogger conservano perfettamente il proprio aspetto. Questo può dipendere anche dal miglioramento automatico di Google+. Nel caso abbiate delle difficoltà a visualizzare correttamente delle immagini nel vostro header su Blogger potete seguire questo procedimento alternativo.

Idee per Computer ed Internet cambia look.

Chi mi segue da qualche tempo saprà della mia idiosincrasia per tutti i programmi di grafica. Quella pazienza che non mi fa difetto quando c'è da spulciare qualche codice mi manca del tutto nel momento in cui devo realizzare qualche lavoro grafico. Molti lettori lo hanno constatato e me lo hanno anche fatto notare con un certo tatto. "Perché invece di dare consigli per migliorare l'aspetto degli altri blog non pensi un po' di più al tuo che graficamente fa veramente pena".

Non è che non ne sia consapevole è che sono negato per tutto quello che abbia una qualche implicazione artistica e poi mi dà più soddisfazione scrivere un articolo particolarmente atteso dai lettori che realizzare delle icone da inserire nella sidebar.

Come creare una intestazione (o header) per Blogger.

Hai creato un blog ma non sei esperto di grafica? Non ti preoccupare perché non sei il solo. La personalizzazione del layout di un sito per chi non maneggia alla perfezione Photoshop o Gimp può diventare una impresa ardua piena di frustrazioni. Fortunatamente ci sono in rete delle applicazioni che qualche anno fa si sarebbero chiamate web2.0 in grado di svolgere i principali compiti dei grafici. In questo articolo vediamo come sia possibile creare un header sufficientemente sofisticato senza conoscere nulla di programmi di grafica.

Prima di iniziare bisogna andare su Modello > Personalizza > Modifica le larghezze per vedere quanto debba essere larga l'immagine che vogliamo mettere come intestazione. Questo per i template che hanno l'header che prende tutto lo spazio, per gli altri modelli dovremo calcolare la larghezza in altro modo oppure procedere per tentativi.

Come aggiungere un header a un blog su Blogger a Visualizzazione Dinamica.

Mi occupo raramente di blog a Visualizzazione Dinamica perché sono poco personalizzabili anche se hanno un sacco di funzionalità, un aspetto accattivante, una velocità di apertura delle pagine sorprendente e una estrema facilità di navigazione per i lettori. Avevo già parlato di come inserire un header anche in questa tipologia di blog su Blogger modificando i CSS del modello.

Vediamo come si possa ottenere lo stesso risultato senza modificare il codice. L'altezza della intestazione per i modelli a Visualizzazione Dinamica è di 65 pixel quindi dovremo procurarci una immagine che abbia una altezza di quella misura. Il trucco consiste nell'inserirla come background anche se si visualizzerà solo nella parte alta del layout. Si va su Modello > Personalizza > Sfondo e eventualmente si rimuove l'immagine se fosse già presente. Si clicca sulla freccia che punta verso il basso accanto a Immagine sfondo e nella finestra che si apre si sceglie Carica immagine > Scegli file 

Come installare un menù direttamente nel modello.

Uno dei maggiori problemi che si incontrano nella personalizzazione dei template di Blogger è sicuramente quello dell'installazione del menù. Su Blogger è possibile creare un menù orizzontale o verticale utilizzando le pagine statiche. Da qualche mese si possono aggiungere altri link anche esterni al menù delle pagine di Blogger. Questo però in genere non soddisfa gli utenti più esigenti che vogliono mostrare ai propri lettori molti più contenuti di quelli accessibili con un menù a un solo livello.

C'è poi anche una esigenza estetica che induce molti fruitori di Blogger a optare per un menù fatto da soli visto che si può attingere a una gran mole di menù personalizzati presenti in rete e visionabili anche in questo blog. Ci sono però le note dolenti che nel caso dei menù sono veramente parecchie:

Inserire nel layout e nell'header di Blogger immagini, bottoni, ecc.

In linea di massima possiamo inserire un oggetto in qualsiasi punto del layout di Blogger. Lo possiamo fare con bottoni ma anche con pulsanti e pure con certi widget. Si può scegliere un posizionamento assoluto oppure un posizionamento flottante che mantiene fisso l'oggetto allo scorrere della pagina.

La differenza tra le due impostazioni sta nel CSS position:absolute; oppure position:fixed;. In questo post mi occuperò del primo caso ma con una semplice modifica del codice si può facilmente passare alla seconda tipologia di inserimento.

COME INSERIRE UN OGGETTO NEL LAYOUT DI BLOGGER

Per semplicità prendiamo come esempio una immagine ma la cosa funziona anche per i pulsanti ecc. Ci si deve solo ricordare che il modello di Blogger è in XML quindi, in taluni casi è opportuno convertire in questo linguaggio il codice dell'oggetto da inserire mediante il tool Blogcrowds.

Come personalizzare la descrizione di Blogger inserendola su più righe, con il grassetto e con il corsivo.

L'articolo che ho dedicato all'allineamento di Header, Nome e Descrizione del blog ha suscitato molto interesse e ha scaturito diversi commenti interessanti. In uno di questi mi si chiedeva come fosse possibile inserire la descrizione del blog in due o più righe. Di default infatti Blogger va a capo solo alla fine dello spazio dell'header. Ragionandoci un po' sopra ho pensato che forse è opportuno dedicare un altro post all'argomento della Descrizione del blog anche se sono in molti che la nascondono sotto l'immagine dell'header scegliendo l'opzione di inserirla dietro all'Intestazione.

Se si vogliono modificare i colori della descrizione possiamo andare su Modello > Personalizza. Si aprirà il Designer Modelli e dovremo andare su Avanzato > Descrizione del blog per settare un diverso colore per la descrizione. Si clicca in alto a destra su Applica al blog per renderla effettiva.

Vediamo come sia semplice visualizzare la descrizione su più righe. Basta andare su Layout > Intestazione > Modifica e inserire in Descrizione del blog

Prima riga della descrizione <br/> Seconda riga della descrizione <br/> Terza riga della descrizione ….

Come centrare o allineare a destra l'header o il nome e la descrizione di un blog su Blogger.

Mi sono già occupato di questo tema in un articolo dello scorso Aprile. Quel post è ancora valido ma adesso voglio ampliarlo a tutte le possibili opzioni che si possono presentare. Quando si carica una immagine come intestazione su Blogger questa viene di default allineata sulla sinistra e non ci sono meccanismi per scegliere un diverso allineamento per centrarla o visualizzarla sulla destra del layout.
Quando si va su Layout > Intestazione > Modifica sono presenti tre possibili opzioni di visualizzazione dell'header

1. Dietro Titolo e Descrizione
2. Al posto di Titolo e Descrizione
3. Fai seguire questa immagine da una descrizione

La finestra del gadget ha quindi questo aspetto

Come inserire la casella di ricerca di Blogger nell'Header.

Dopo aver visto come inserire la casella di ricerca nel menù orizzontale delle pagine statiche di Blogger, vediamo come visualizzare il widget della ricerca ufficiale di Blogger nella Intestazione del blog. Come è noto di default l'elemento pagina dell'header è bloccato, questo vuol dire che non sono presenti elementi Aggiungi un gadget per inserire altri oggetti in quella zona. Dovremo quindi sbloccare questa sezione del template.

Andiamo quindi su Modello > Backup/Ripristino e salviamo il modello completo del blog per un eventuale backup di sicurezza. Torniamo su Modello > Modifica HTML > Procedi, senza espandere i modelli widget. Cliccando su F3 cerchiamo questo codice

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

e sostituiamolo con quest'altro

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Come inserire due widget da entrambi i lati dell'header di un blog su Blogger.

Mi sono già occupato di come dividere l'Intestazione o Header del blog in due parti e di come inserire sotto l'header tre widget separati. Questo articolo introduce una personalizzazione ulteriore per permettere di inserire nell'header nel blog due nuovi widget, uno sulla sinistra e uno sulla destra. Si può trattare di testo, immagini, video o qualsiasi altro gadget che possa essere inserito in Blogger.

Se si va su Layout si vede che non è possibile inserire dei gadget nella Intestazione di un blog su Blogger perché l'elemento è bloccato

 

Come allineare alla stessa distanza le icone dei social sopra il post, sotto l'header o in una sidebar.

Ho già affrontato il tema di come si possano allineare i bottoni dei vari social network usando il codice di una tabella. Se lo si vuole fare con delle semplici icone che abbiano la stessa dimensione, può essere più proficuo usare un diverso metodo che mi è stato prospettato in una email. Con questo sistema tra l'altro le immagini saranno esattamente equidistanti una dall'altra senza bisogno di inserire manualmente i pixel dei margini

Nel caso di quattro icone, il codice da usare potrebbe per esempio essere il seguente

Come personalizzare in Blogger l'intestazione (header) dei modelli Dynamic Views o a Visualizzazione Dinamica.

I modelli Dynamic Views appena presentati da Blogger hanno suscitato grande ammirazione per la loro fluidità di navigazione, per la grafica unica e tecnologicamente avanzata ma hanno ricevuto anche numerose critiche per il fatto che siano praticamente impossibili le personalizzazioni riguardo all'inserimento di widget e di sidebar. Vediamo come si possa invece modificare l'Header del blog per renderlo graficamente più riconoscibile.

Adesso tutti i blog a Visualizzazione dinamica hanno il titolo del blog sopra a una barra di navigazione tra i vari modelli

Come dividere in tre parti l'area sotto l'header di Blogger.

Dopo aver visto come dividere l'intestazione dei blog su Blogger in due parti, illustro come personalizzare ulteriormente quella zona del template. Se si va su Design > Elementi pagina si vedrà un layout che è simile a questo

In genere in questa zona si inserisce un menù orizzontale ma ci potrebbe essere l'esigenza di aggiungere altri widget. L'idea è quella di dividere il layout in tre parti per poter inserire altri oggetti. Potrebbero essere per esempio uno slideshow, il widget di benvenuto e quello dei Post più popolari. Andiamo su Design > Modifica HTML e salviamo il modello completo per un eventuale backup di ripristino. Non espandiamo i modelli widget. Se avete un nuovo modello cercate questo codice

Come dividere l'header di Blogger in due parti.

In alcuni modelli di Blogger, l'Intestazione si visualizza solo nella parte sinistra del layout mentre la parte destra è occupata da annunci pubblicitari, bottoni di navigazione o altri widget. L'operazione da compiere è quella di dividere appunto l'intestazione in due diverse sezioni. In teoria, utilizzando lo stesso procedimento si può suddividere l'header anche in tre parti o anche di più. La procedura è alquanto diversa se si ha un vecchio modello o un nuovo template realizzato con il Designer Modelli.

Dividere l'intestazione in due parti con i nuovi modelli di Blogger

Si va su Design > Modifica HTML e non si espandono i modelli widget. Dopo aver salvato il modello completo per un eventuale backup di ripristino, si cerca il blocco di codice del CSS che determina l'aspetto della intestazione. Nei nuovi modelli siamo facilitati dalla presenza di questo commento

/* Header
----------------------------------------------- */

Come centrare l'immagine dell'intestazione (o header) in Blogger.

Dopo aver illustrato come eliminare le sidebar dalle pagine statiche, affronto un altro tema molto gettonato nei commenti, nelle email e nel modulo di contatto. Centrare l'immagine che abbiamo scelto per l'header di un blog su Blogger è una operazione che dovrebbe essere di routine ma che invece è tutt'altro che scontata. Si può cercare di ridimensionare l'immagine per farla diventare della stessa larghezza del layout ma non c'è un comando specifico per poterla centrare. Da una rapida ricerca, anche con keyword di lingua inglese, non ho trovato niente di interessante che non abbia appunto come base la modifica delle dimensioni dell'header.

Ho messo quindi a punto due procedimenti piuttosto brillanti e relativamente semplici. Entrambi portano a centrare l'immagine della intestazione. Non ci sono differenze sostanziali se non che con la prima procedura, per avere la certezza del funzionamento, dobbiamo conoscere l'URL dell'header. Chi è interessato può optare indifferentemente per il primo o per il secondo.

Menù orizzontale personalizzabile da inserire sopra l'header di un blog su Blogger.

Questo menù credo che sia l'ideale per siti con una grafica semplice e pulita ma potrebbe anche essere usato insieme a un altro menù basato su javascript. Il solo script che viene utilizzato per la sua installazione è open source e serve unicamente per visualizzare il menù in modo accettabile anche con Internet Explorer. Prima di procedere all'installazione vera e propria è opportuno inserire un elemento Aggiungi un gadget nella parte alta del template.
Nella fattispecie si va su Design > Modifica HTML e si espandono i modelli widget. Dopo aver salvato il modello completo, si cerca la riga

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Ce ne potrebbe essere una leggermente diversa. Per individuarla si può pigiare su F3 e cercare showaddelement. La riga va modificata in questo modo

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Questo ci consentirà di visualizzare Aggiungi un gadget anche nella parte alta e si potrà inserire anche un altro widget nell'header. Invece che 2 può essere messo anche un numero maggiore. Adesso cercate questa riga