Pubblicato il 24/04/13 - aggiornato il  | 11 commenti :

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

Come aggiungere una immagine di Intestazione ai blog su Blogger del tipo Dynamics View senza operare sul codice HTML.
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 

header-blogger-visualizzazione-dinamica

Si seleziona il file immagine che avevamo preparato. La vostra immagine si vedrà come sfondo il tutto il blog. Non fatevi prendere dalla paura perché tanto sul Designer Modelli i procedimenti sono reversibili. Andate su Completato per caricare l'immagine. In Allineamento selezionate uno dei tre proposti in alto. Vedete voi se vi rende meglio quello centrale, quello a sinistra o quello a destra

allineamento-header

Scendete nel menù più in basso denominato Affianca e selezionate Affianca orizzontalmente

affianca-orizzontalmente-header

Ora nell'anteprima l'immagine di sfondo si vedrà solo nella intestazione. In seguito potrete selezionare i colori del blog nella parte destra dello strumento

colori-blog-visualizzazione-dinamica

Si va su Applica al blog per rendere effettive le modifiche effettuate

header-blog-visualizzazione-dinamica

Se abbiamo creato una immagine in cui sia già presente il nome del nostro blog occorre nascondere quello che si visualizza automaticamente nell'header. Si va quindi su Modello > Modifica HTML e si clicca con il sinistro del mouse in un punto qualsiasi dell'area del codice del template. Si digita Ctrl+F e su Search si incolla la seguente riga ]]></b:skin> quindi si va su Invio nella tastiera. Il codice cercato verrà evidenziato e, subito sopra, dovrà essere incollato questo CSS

.header-bar {
display: none !important;
}

Si salva il modello e il titolo non sarà più visibile

nascondere-titolo-header-dynamic-views

Questo metodo di inserimento della immagine di Intestazione rispetto a quello linkato a inizio post ha la controindicazione che non si può utilizzare una seconda immagine di sfondo ma si può personalizzare il background con una delle associazioni di colori proposte o crearle con la apposita tavolozza.


11 commenti :

  1. grazie!! Buona giornata :-D
    scusa se latito un poco dal tuo blog...ma sono stata un pò incasinata...

    RispondiElimina
  2. Grazie. i tuoi articoli sulle "dinamiche" sono sempre ben accetti. Ci sarebbero, che tu sappia, novità in futuro circa una più ampia personalizzazione? Grazie

    RispondiElimina
  3. @# Anche se non commentate sono consapevole che comunque il blog è sempre seguito. Ch'io sappia non ci sono novità. Quando verranno pubblicherò i relativi post

    RispondiElimina
  4. è possibile inserire un'immagine vicino al titolo del blog nell'intestazione?

    RispondiElimina
    Risposte
    1. Nei template Dynamics View è tutto più difficile. Prova a caricare una immagine piccola e scegli di metterla sotto a titolo e descrizione quindi prova a aggiungere degli spazi al nome del blog per spostarlo sulla destra
      @#

      Elimina
  5. Scusami, come si fa ad aumentare l'altezza dell'Header. Grazie

    RispondiElimina
    Risposte
    1. Credo dipenda dalla altezza della immagine che scegli come Header
      @#

      Elimina
    2. si certo, ma non esiste un modo per aumentarle dalle striminzite misure di default?

      Elimina
    3. Purtroppo con il passaggio all'https ho subito la cancellazioni di tutte le personalizzazioni fatte in passato...:( . Grazie

      Elimina
    4. Non te lo so dire perché con i nuovi modelli Responsive ho praticamente abbandonato a sé stessi tutti i post sulle visualizzazioni dinamiche
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy