Pubblicato il 01/10/11e aggiornato il

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
blog-visualizzazione-dinamica
L'obiettivo sarà quello di trasformarlo in questo modo per renderlo più personale attraverso una immagine che si visualizzi nell'intestazione
header-personalizzato-dynamic-views
Con questi modelli non è più visibile nella Nuova Bacheca la scheda Layout in cui si potevano gestire gli elementi pagina
nuova-bacheca-blogger
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://lh5.googleusercontent.com/-1Ifr8dWinns/TobUiqpY5yI/AAAAAAAAUj8/pnFgKp2TGdQ/Dynamic-Header.jpg) !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
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




58 commenti :

  1. Ciao Ernesto per quanto riguarda il menù invece come hai fatto a modificarlo? a me rimangono sempre i vari template dynamic vies

    RispondiElimina
  2. @Ditta Paolo Scanu
    Non è modificato è semplicemente nascosto tramite questa riga di fogli di stile, per quello che riguarda il testo,
    #header .header-bar .title h1 {display:none;}
    mentre il background non si vede perché sta sotto agli altri elementi che hanno priorità visto il tag !important;

    RispondiElimina
  3. Andrà a finire che da modellare ci sarà poco e in molti avranno lo stesso identico template! :(

    RispondiElimina
  4. Anzitutto grazie per l'articolo. Molto utile e interessante!
    Il mio obiettivo principale è quello di cambiare i nomi dell'header bar (quella dove inizialmente appaiono le diciture "classic - flipcard - magazine..") e collegarci dei link di pagine all'interno del blog che poi creerò.
    E' possibile? Come posso fare? Anche perché non sono molto esperto (anzi.. per niente) e quindi andando a modificare quei codici farei solo danni.
    Grazie mille!

    RispondiElimina
  5. @Greg
    Nei modelli a visualizzazione dinamica si può al massimo incollare dei CSS come mostrato nell'articolo ma non si possono mettere link nel layout visto che è disabilitato il bottone Modifica HTML

    RispondiElimina
  6. http://mastro-goblin.blogspot.com/ Molto utile!

    RispondiElimina
  7. ho adottato la visualizzazione dinamica per uno dei miei blog con scarsissime visite
    e ho potuto constatare che in un paio di giorni il grafico delle pagine viste ha avuto un'impennata iperbolica
    mi chiedo se è reale e quindi il modello dinamico fa in modo che la gente clicca più pagine o è solo un bug di analytics
    inoltre le pagine che usavano uno script di altri miei blog in pratica una lista di post per altri miei blog non funzionano
    si può trovare una soluzione senza magari l'uso degli script??
    che di sicuro ho preso in qualche post dei tuoi
    augh!!

    RispondiElimina
  8. @Tex Willer
    Dipende dalla enorme velocità di questi modelli che riescono a posizionare i contenuti molto meglio proprio per questo fatto, secondo me è possibile che ci sia anche una certa spinta ....

    RispondiElimina
  9. garzie amico
    per adesso ho tolto lo script con tutti i post degli altri blog e l'ho sostituito con una foto e il link dell'altro blog .. poi qualche santo sarà .. come si dice nelle marche
    ;-)

    RispondiElimina
  10. seguendo il tuo consiglio mi sono accorto che il css aggiunto però non fa vedere più la dashboard (casetta) la matita (per scrivere un nuovo post) e l'icona dei feeds e inoltre la foto inserita come header non è più cliccabile come link HOME ..
    sbaglio io o in effetti è questo il risultato??

    RispondiElimina
  11. @Texwiller
    E' probabile che sia così, none ne sono più occupato perché sono modelli in cui si può fare ben poco

    RispondiElimina
  12. Salve ho inserito questo codice nel css tutto ok ma la barra del menù delle pagine mi esce però senza i link. Come devo fare per risovere questo problema?

    RispondiElimina
    Risposte
    1. @Paolo58
      Questo tutorial è sorpassato. Adesso si può personalizzare l'header del modello direttamente dal Designer modelli
      http://www.ideepercomputeredinternet.com/2011/10/e-ora-possibile-personalizzare-i-blog.html

      Elimina
  13. Io invece avrei bisogno di capire come posso rendere le immagini di una grandezza uguale. Utilizzando questo css .post-body img { width: 450px; height: auto;} non funziona purtroppo :(

    RispondiElimina
    Risposte
    1. @PaulinaMaria
      Non mi hai incollato l'URL del blog quindi non posso essere preciso ma prova a incollare questo CSS
      .post-body img { width: 450px !important; height: auto;}

      sopra alla riga /b:skin o in Personalizza > Avanzato > Aggiungi CSS

      Elimina
    2. Vedo adesso che hai un blog a Visualizzazione Dinamica. Allora come non detto perché con quei modelli è difficile apportare delle modifiche.

      Elimina
  14. Ciao!
    sto costruendo un blog su blogger ma non riesco a cambiare l'header (vorrei ingrandire l'immagine di sfondo). Inoltre non riesco a farlo rilevare da google con la ricerca di parole chiave..... sono un po' scoraggiata.

    RispondiElimina
    Risposte
    1. @PiergiorgioPastore
      Non ho capito se chi scrive è un uomo o una donna comunque poco importa. Una cosa è l'header o intestazione e un'altra cosa è l'immagine di sfondo. Se usi un blog a visualizzazione dinamica puoi andare su Modello > Personalizza e caricare una immagine diversa o più grande per lo sfondo. Per l'Intestazione è più difficile. Per velocizzare l'indicizzazione da parte di Google leggiti questo post
      http://www.ideepercomputeredinternet.com/2010/09/come-rendere-piu-veloce-l-dei-post-da.html

      Elimina
  15. finalmente ci sono riuscita :)
    solo una cosa per centrare l'immagine?

    RispondiElimina
    Risposte
    1. @ AlessiaM.
      Ho appena risposto a un altro tuo commento in cui ti dicevo che i modelli dinamici sono difficili da personalizzare. Per centrare l'header la cosa migliore è sceglierlo delle dimensioni giuste attraverso delle prove. C'è anche un tutorial ma solo per i modelli normali
      http://www.ideepercomputeredinternet.com/2011/04/come-centrare-l-dell-o-header-in.html

      Elimina
  16. Ciao!
    Il tuo blog è assolutamente meraviglioso.. Trovo spunti interessantissimi, complimenti!!
    Posso chiederti una curiosità circa questi modelli? Io avevo scelto la stessa visualizzazione dinamica che hai usato per la demo, ma mi si vedevano solo alcune anteprime di immagini, per gli altri post niente! Da cosa potrebbe dipendere? Le ho caricate tutte tramite URL..
    Grazie in anticipo per la tua gentilezza e ancora complimenti! ^^

    RispondiElimina
    Risposte
    1. @# E' difficile dire. Credo che nei template a visualizzazione dinamica tu non usi il Read More cioè l'inserimento dell'intervallo quindi la ragione mi è ignota. Prova a inserire le Preferenze di Ricerca
      http://www.ideepercomputeredinternet.com/2012/03/come-personalizzare-le-preferenze-di.html

      Elimina
  17. Ciao, tutti i tuoi articoli sono stati molto utili per il mio blog!! Considerando che ci capisco poco, è venuto un bel lavoro! Da una settimana però ho il modello dinamico di blogger e non riesco a venire a capo di una cosa..
    Nel menù orizzontale, dove c'è scritto home page, si possono inserire altri link, del tipo etichette, chi sono, ecc..?? perché non ho trovato nessun articolo che mi spieghi come fare!
    Spero di essermi spiegata bene..
    Ti scrivo sotto questo post anche se l'argomento non è lo stesso.
    Grazie anticipatamente

    RispondiElimina
    Risposte
    1. @# Forse non hai cercato bene :)) perché ho pubblicato un articolo in merito che funziona anche con i modelli a visualizzazione dinamica
      http://www.ideepercomputeredinternet.com/2011/11/come-creare-un-menu-aggiungendo-link-al.html

      Elimina
  18. Ciao Ernesto! Ho modificato il codice RSS come hai detto tu in questo articolo, ma al posto dell'url dell'immagine presa da internet cosa inserisco se voglio mettere un'immagine dal mio pc?

    RispondiElimina
    Risposte
    1. @# Se l'immagine è nel PC, la devi caricare su Picasa
      http://www.ideepercomputeredinternet.com/2013/03/picasa-image-hotlink.html
      ricavarne l'URL come illustrato nel post appena linkato e procedere secondo le istruzioni di questo articolo

      Elimina
    2. Ho fatto come hai detto e ci sono riuscita! :)
      Solo che le pagine statiche che si trovavano sulla barra orizzontale sono scomparse! Ho provato a rimetterle ma non spuntano... :(
      Come mai? Come posso fare per reinserirle?

      Elimina
    3. @# Purtroppo con questo sistema c'è questa fastidiosa controindicazione :(

      Elimina
    4. mmm ho capito... :(
      grazie lo stesso! :)

      Elimina
  19. Ciao!! Tu sei stato perfetto nella spiegazione ma io proprio non riesco a inserire l'immagine nell'intestazione =(
    Il codice che ho utilizzato è questo : .header-bar {
    background-image:url(https://lh5.googleusercontent.com/-v0nZZ_VSz90/UctK9BUxRyI/AAAAAAAAAAo/GDBnypykDLA/s640/omaggi.jpg ) !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;}

    RispondiElimina
    Risposte
    1. L'immagine è troppo alta, deve essere di proporzioni come quelle dell'header con l''altezza approssimativamente di 170 pixel @#
      Inoltre hai lasciato uno spazio prima della parentesi, deve essere così
      url(https://lh5.googleusercontent.com/-v0nZZ_VSz90/UctK9BUxRyI/AAAAAAAAAAo/GDBnypykDLA/s640/omaggi.jpg)

      Elimina
    2. Grazie mille!! Purtroppo non vedo apparire nulla =( . QUesto è il codice che ho inserito : header-bar{background-image:url(https://lh5.googleusercontent.com/-H9y0NiFRSoM/UcwEM4eZc3I/AAAAAAAAABU/HYjLlJVYSRg/h120/omaggi+copiablog.jpg) !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;}

      Poi volevo anche chiederti, ma se io volessi mettere un immagine fissa sotto l'intestazione?
      Con la visualizzazione classica era molto più facile, sistemavi il gadget di immagine sopra i post ed il gioco era fatto. ma ora??
      Grazie ancora!!

      Elimina
    3. @# L'immagine stavolta è dell'altezza giusta ma è troppo corta. Deve essere circa 900 pixel di larghezza e 130 pixel di altezza. Con i modelli Dynamic Views non possono essere inseriti widget nel layout. E' possibile solo aggiungerli in una barra laterale sulla sinistra che appare al passaggio del mouse. Solo i widget ufficiali di Blogger

      Elimina
    4. ah capito, insomma non ne indovina una! Comunque ho modificato ancora l'immagine ma niente, proprio non riesco! Questo è il nuovo codice : header-bar{background-image:url(https://lh3.googleusercontent.com/-12CtP-gsO2c/Ucx9Rj0ER7I/AAAAAAAAADA/m56pHq_PG-4/h68/omaggi+copia3.jpg) !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;}

      Non possono essere inseriti widget ok ma attraverso l'inserimento di un codice html si può fare? Perché conosco alcune persone che hanno come piattaforma blogger e usano la visualizzazione dinamica...ma il loro sito è superfigo =(

      Elimina
    5. @# Si possono inserire widget in modo flottante
      http://www.ideepercomputeredinternet.com/2011/05/come-inserire-widget-pulsanti-e-video.html
      poi certo si può provare a inserire altre cose nel modello ma ci sono 7 visualizzazioni possibili come tu ben sai e non è detto che poi venga lo stesso risultato per tutte.

      Elimina
    6. @# L'immagine poi è ancora tropo corta. Dovrebbe essere più o meno così
      https://lh3.googleusercontent.com/-x7Arr8YzSa4/UcyFzBhC0LI/AAAAAAAAiYc/vLwlIMUGWJk/s900/omaggi%2520copia.jpg
      però la devi rendere meno distorta ricreandola con un programma di grafica

      Elimina
    7. Ho provato ad inserire il codice nel css ma non mi da assolutamente niente. tutto uguale a prima! Non riesco a creare neanche il widget flottante...quindi credo proprio di non essere in grado io a far nulla =( ! Grazie lo stesso e scusa :(

      Elimina
    8. Ok alla fine ce l'ho fatta!!! Ma inserendo l'immagine perdevo le pagine in alto e mi venivano spostate automaticamente di lato..Ora devo trovare un modo per mettere l'immagine sotto l'intestazione...ce la faro?
      Grazie ancora per tutto!!!

      Elimina
  20. ciao , ho seguito il tuo tutoria e sono riuscita ad inserire una immagine nell'header del mio blog, però non vedo più le voci di menù orizzontali.. aiuto … il blog è gufodormiglione.blogspot grazie

    RispondiElimina
    Risposte
    1. L'header ora non si inserisce più con il codice ma lo devi fare da Personalizza. Se lo vuoi lasciare così prova a diminuire l'altezza verticale height:170px
      @#

      Elimina
  21. ciao.. infatti io sono andata in modello-personalizza-avanzato-aggiungi css e ho inserito il seguente
    .header-bar {
    background-color:#ffffff !important; /* Colore di sfondo */
    background-image:url(https://1.bp.blogspot.com/-6Zb9JCz6Nv0/U05ZpCuupxI/AAAAAAAADOg/L13r1XFE1yY/s1600/logo150.png) !important; /* Immagine di sfondo */
    background-repeat:no-repeat;
    background-image:float center;
    /* Per non ripetere l'immagine */

    height:170px !important; /* Altezza della intestazione */
    border-bottom:25px solid #e99635; /* Bordo inferiore */
    }
    #header .header-bar .title h1 {display:none;}
    #header a:hover {text-decoration:none;}
    #main {margin-top:130px !important;} /* Distanza tra intestazione e contenuto */
    ma nella linea orizzontale arancione , dove prima si leggevano le pagine che avevo creato, non si leggono più.

    RispondiElimina
    Risposte
    1. Nel commento precedente ti ho detto che non si fa più così. Però prova a cambiare nel codice height:170px con height:120px . Alternativamente togli tutto e leggi questo post
      http://www.ideepercomputeredinternet.com/2013/04/dynamic-views-how-to-add-header.html
      Leggi pure quest'altro per renderti conto di quello che si può fare e di quello che non si può fare
      http://www.ideepercomputeredinternet.com/2013/08/blogger-template-visualizzazione-dinamica.html
      @#

      Elimina
  22. Ciao sai se c'è un motivo per il quale scegliendo un modello dinamico le immagini dei post non compaiono più al fianco dei titoli, ma vendono inserite le anteprime di eventuali video all'interno del post? perchè ciascun titolo non è associato alla fotografia del post? non funziona con tutti i modelli dinamici, ma con quello che vorrei scegliere capita così..

    RispondiElimina
    Risposte
    1. I ,modelli dinamici sono il cruccio di tutti. Grandi potenzialità ma anche grandi problemi. Leggi quello che ho pubblkcato in merito anche se non ti potrà aiutare nello specifico
      www.ideepercomputeredinternet.com/2013/08/blogger-template-visualizzazione-dinamica.html
      @#

      Elimina
  23. Ciao ernesto ,io sono rimasto fedele al modello semplice.Ma come posso ridimensionare l'immagine nel titolo ?
    http://infoutili.blogspot.it/ grazie

    RispondiElimina
    Risposte
    1. Devi scaricarla poi la puoi ridimensionare con un programma tipo Paint.NET
      http://www.ideepercomputeredinternet.com/2015/08/paintnet-review-alternative-photoshop-gimp.html
      oppure meglio se la ritagli perché la larghezza va bene ma è troppo alta. Poi vai su Layout > Intestazione e la sostituisci a quella che c'è
      @#

      Elimina
  24. bene fatto , ma resta l'antiestetico spazion bianco sotto.........hai già scritto una guida in merito o è veloce la modifica.Non vorrei approfittare della tua bontà.A buon rendere comunque.
    ecco il risultato http://infoutili.blogspot.it/

    RispondiElimina
    Risposte
    1. Non è che posso mettere a posto tutti gli elementi dei blog di tutti i lettori. Ho una vita mia :)
      Leggi questo post
      http://www.ideepercomputeredinternet.com/2015/06/blogger-distanze-elementi-layout.html
      e poi quest'altro
      http://www.ideepercomputeredinternet.com/2014/12/analizza-elemento-firefox.html
      @#

      Elimina
  25. Ciao Ernesto!
    A me purtroppo però è sparita la barra delle pagine!
    Come faccio a farla comparire nuovamente?
    Cosa devo eliminare dal css?

    RispondiElimina
    Risposte
    1. Il menù delle pagine? In un blog a Visualizzazione dinamica? Forse dipende dal fatto che hai inserito una immagine come intestazione troppo larga che la sta nascondendo
      @#

      Elimina
    2. Strano! Ho mantenuto la stessa dimensione consigliata sul css

      Elimina
    3. Prova a spostarlo in alto andando su Avanzato > Aggiungi CSS e incollando
      div.header-bar {position:relative; top:-40px;}
      @#

      Elimina
  26. Ciao, ok forse io sarò "de coccio"..... però non ho capito lo stesso come cambiare i titoli in alto (vedi foto qui https://gyazo.com/afac89f83be903ec16ba1c13bb0c26fd) che di default si chiamano classica , flipcard etc.... grazie.

    RispondiElimina
    Risposte
    1. Il post è di 5 anni fa e non so se il codice funzionerà sempre-. Quelli che tu chiami i titoli sono i tipi di visualizzazione. Le cose che si possono fare con quella tipologia di template le ho elencate in questo post
      http://www.ideepercomputeredinternet.com/2013/08/blogger-template-visualizzazione-dinamica.html
      Guarda se trovi qualcosa di utile per le tue esigenze
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.