Personalizzare le Intestazioni all'interno dei post di Blogger.

In tutti i manuali di linguaggio HTML si può leggere che i titoli e le intestazioni possono essere mostrati con i tag che vanno da <h1> a <h6>. Anche nel mio ebook Guida all'HTML e al CSS che può essere scaricato gratuitamente ho accennato a questa gerarchia di Titoli e Intestazioni da inserire nell'HTML.

Blogger ha da tempo inserito la possibilità di inserire le Intestazioni direttamente nell'articolo. Quando si apre l'Editor si può scegliere oltre che Normale Paragrafo anche Intestazione, Intestazione Secondaria e Intestazione Minore. 

Proviamo a creare tre diverse Intestazioni con le tre opzioni

Le regole SEO per pubblicare un post su Blogger.

Avere un sito con buoni contenuti non è sufficiente per posizionarlo al meglio nei risultati dei motori di ricerca. Insieme alla validità e unicità di quello che si è scritto bisogna seguire anche delle regole che lo stesso Google, il motore di ricerca per antonomasia, ha codificato e reso disponibili agli webmaster. Gli utenti della piattaforma Blogger hanno dei vantaggi indubbi dal pubblicare in una piattaforma di proprietà dello stesso Google ma è bene seguire lo stesso tutte le procedure della Guida SEO.

Le regole riguardano tutti gli aspetti del confezionamento del post dal titolo alle immagini, dai link alle parole chiave, dalla metadescrizione ai link interni. Le attenzioni costanti vanno riservate ai seguenti aspetti di carattere generale che valgono per ogni post:

1. Occorre pubblicare articoli sempre con titoli diversi, accurati, brevi ma descrittivi
2. Usare solo link di testo per i vecchi post e non collegare pagine interne a immagini
3. Collegare gli articoli già pubblicati in modo da avere contemporaneamente due vantaggi: quello di mantenere freschi i vecchi post e di aumentare l'autorevolezza dei nuovi
4. È opportuno creare una Sitemap per i motori e una Mappa del sito per i lettori
5. Creare del contenuto originale e evitare errori grammaticali e ortografici
6. Usare parole chiave di diverso approccio cognitivo vale a dire query tecniche insieme a parole accessibili anche ai profani. Google indicizzerà i post sia a beneficio di lettori specialisti del tema sia in funzione di ricerche basate su termini più semplici.
7. Usare un testo di ancoraggio ottimizzato, descrittivo e conciso.
8. Modificare i nomi dei file immagine in modo che siano brevi e pertinenti.

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.

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 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 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 mostrare l'intestazione nei post e un widget in homepage o viceversa.

In  un precedente articolo ho mostrato come si possa inserire un widget al posto della intestazione del blog. Nell'articolo prendevo in considerazione l'opzione di eliminare la vecchia intestazione per lasciare solo il widget che può essere formato da una immagine animata, da un effetto javascript, da uno slideshow o da qualunque altra cosa che sia possibile incollare in un gadget HTML/Javascript.

Se invece si volesse mostrare entrambe le cose ma in pagine diverse si può procedere in questo modo. Per chiarezza facciamo l'esempio che si voglia visualizzare una intestazione simile a quella standard nei singoli post, nelle etichette e nelle pagine di archivio mentre l'intestazione personalizzata vogliamo che risulti visibile solo in Homepage. Il codice della sezione dell'header avrà una struttura simile a questa

Come inserire un widget HTML al posto dell'header di Blogger.

La piattaforma Blogger dà la possibilità di caricare una immagine da visualizzare al posto del nome del blog e della sua descrizione o anche insieme alle due cose. Per effettuare la modifica si va su Design > Elementi pagina e si pigia su Modifica nel gadget che riguarda l'intestazione del blog

L'immagine può essere caricata selezionandola dal computer oppure dal web. Sono presenti varie opzioni di configurazione