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

L'obiettivo sarà quello di trasformarlo in questo modo per renderlo più personale attraverso una immagine che si visualizzi nell'intestazione

Con questi modelli non è più visibile nella Nuova Bacheca la scheda Layout in cui si potevano gestire gli elementi pagina

Si può però andare su Modello > Personalizza > Avanzato > Aggiungi CSS. Incolliamo un codice di questo tipo

.header-bar {
background-color:#081caf !important; /* Colore di sfondo */
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXYtD2bgze81RNakAO9INXkg8K_UQY5vHpDmPjB7o8ijnoRuoXq8iy6xvjET0wKgXoF9ZfhuwC9u-gKHueLxu2cN-xj8690kcZunN3-snr922Lg4z-uj5_AE80ImXHJQSaUkfKVrZZXSY/) !important; /* Immagine di sfondo */
background-repeat:no-repeat; /* Per non ripetere l'immagine */
height:170px !important; /* Altezza della intestazione */
border-bottom:25px solid #030a3a; /* Bordo inferiore */
}
#header .header-bar .title h1 {display:none;}
#header a:hover {text-decoration:none !important;}
#main {margin-top:130px !important;} /* Distanza tra intestazione e contenuto */

Si può inserire una immagine di sfondo, un colore di sfondo e anche un bordo tra l'intestazione e il contenuto del blog. Vanno semplicemente modificati i parametri colorati di rosso. Dovrà anche essere sostituito l'URL dell'immagine di sfondo con quello della vostra. Se preferite inserire una immagine di piccole dimensioni che funzioni come una texture o un pattern allora eliminate tutta la riga inserita per non ripetere l'immagine.

I meno esperti possono prima leggersi il post sui codici dei colori e quello sullo stile dei bordi. Se si modificano i parametri direttamente nella finestra di Blogger, nella parte bassa si vedrà l'Anteprima del blog in tempo reale. Questo è importante soprattutto per stabilire il corretto margine tra l'intestazione e il resto del blog indicato in 130 pixel. Ho appena messo online una demo; mi scuso per il basso livello della grafica ma ho creato l'header veramente in un minuto

• Dynamic Vies Flipcard Blog Test -

Vi consiglio di cliccare sui link Recent, Date, Label e Author, oltre a passare con il mouse sopra alle immagini, per apprezzare in pieno questo modello