Pubblicato il 08/02/11 - aggiornato il  | 15 commenti :

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

intestazione del blog su blogger

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

  1. Dietro il Titolo e la Descrizione nel senso che saranno visti tutti e tre gli elementi
  2. Al posto di Titolo e Descrizione
  3. Fai seguire l'immagine da una descrizione nel senso che viene messa al posto del solo nome del blog
  4. Riduci e adatta per rendere le dimensioni della immagine compatibili con quelle dell'header
  5. Si clicca su Salva per rendere operative le modifiche

Come vedete manca sulla destra il pulsante Rimuovi perché di default non è possibile eliminare questo elemento. Se volessimo inserire nell'header una immagine animata, un video, uno slideshow o comunque qualcosa di più complesso di una semplice immagine, con le impostazioni predefinite sarebbe impossibile. Vediamo come ovviare a questo inconveniente.

Per prima cosa bisogna inserire l'elemento Aggiungi un gadget nella zona dell'Header in modo da poter inserire un altro elemento HTML/Javascript. Seguendo la stessa falsariga del post linkato, operiamo nella stessa zona del template attraverso queste modifiche. Il codice all'inizio sarà simile a questo

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML1' locked='true' title='' type='HTML'/>
<b:widget id='Header1' locked='true' title='Titolo Blog (Intestazione)' type='Header'/>
</b:section>

che va modificato in questo modo

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Header1' locked='false' title='Titolo blog (Intestazione)' type='Header'/>
</b:section>

dove le modifiche sono state evidenziate di rosso. Il numero 2 può anche essere cambiato con uno più grande. Inserite un altro header andando su Aggiungi un gadget > HTML/Javascript e incollando il codice che volete vedere nella intestazione del sito. Se si tratta di una semplice immagine animata dovrà essere preventivamente caricata su un hosting quale Picasa, SkyDRive o DropBox e ne dovrà essere acquisito l'URL. Il codice da incollare in Sezioni del sito dell'elemento HTML/Javascript sarà in questo caso del tipo

<a href=http://nomesito.blogspot.com/ title="Titolo" alt"Nome blog"><img src="URL IMMAGINE"></a>

Dopo averlo salvato e posizionato si può ritornare su Design > Elementi pagina. Andando su Modifica nella intestazione sarà adesso visibile il pulsante Rimuovi per la sua eliminazione.

rimozione intestazione blogger

Raccomandazioni finali: prima di effettuare questa modifica salvare il modello completo e metterlo in una cartella per eventualmente ritornare alla situazione precedente. E' opportuno visualizzare il blog prima di procedere alla cancellazione della intestazione originale.

Questa modifica non dovrebbe avere nessuna rilevanza dal punto di vista SEO perché se andate su Impostazioni sarà sempre presente il Titolo del Blog e la sua Descrizione che avete inserito all'atto della sua pubblicazione. In ogni caso è opportuno inserire la descrizione del blog anche nel modello. Nel template sarà comunque sempre presente la riga <title><data:blog.pageTitle/></title> o  una simile,  che indicherà inequivocabilmente il titolo del blog.

Se volete ripristinare l'intestazione originale, cambiate template con il Designer Modelli scegliendone  uno qualsiasi. Dopo aver cliccato su Applica al blog, cambiate nuovamente modello tornando a quello di partenza. L'intestazione originale sarà nuovamente presente

intestazione blog blogger

sotto a quella personalizzata.





15 commenti :

  1. Si può inserire un widget accanto all'header?

    RispondiElimina
  2. @Maxso
    Si può creare una classe con la posizione dell'elemento e quindi richiamarla attraverso il codice
    < div class='classe-header' id='classe-header' >
    Mentre il foglio di stile potrebbe essere simile a questo
    #classe-header {
    margin: 10px;
    max-width:500px;
    text-align: center;
    color:#F1F1F1;
    float: right;
    margin-top: 10px;
    }

    RispondiElimina
  3. Carissimo Parsifal, con il tuo prezioso aiuto sono riuscito a fare di tutto..ma proprio tutto..tranne che diminuire la distanza fra i gadget, ritenuta da me troppo ampia...soprattutto perchè vi è molta distanza tra il menu di navigazione delle pagine e l'immagine della testata..stesso discorso per i gadget della sidebar...:(
    Ma davvero non c'è nessuna possibilità per risolvere a tale inconveniente?

    il sito cui mi riferisco è calcionapoli365.com

    Attendo una delle tue preziose dritte

    RispondiElimina
  4. Sono riuscito ad ancora il menu di navigazione all'immagine in testata disponendo "separati" i gadget in "elementi pagina", però mi rimane il problema che il menu in IE viene visualizzato in perfetta simmetria con l'immagine in header mentre con chrome e firefox è visibile un margine a destra con conseguente spazio bianco...è possibile centrare il menu?

    RispondiElimina
  5. @Webmaster
    Per centrare il menù devi inserire
    < center > all'inizio del codice e < /center > alla fine (senza spazi tra i segni e i tag) Per i margini prova ad andare sui fogli di stile e a guardare i codici per esempio di .sidebar oppure #sidebar o .column Ci dovrebbero essere dei dati riguardo ai margini margin:... con i pixel. Puoi provare a cambiare valori ma è un lavoro da professionista, salva prima il modello. Ciao

    RispondiElimina
  6. dimenticavo..il css utilizzato è questo:


    #navlist ul
    {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
    }

    #navlist li
    {
    display: inline;
    list-style-type: none;
    }

    #navlist a { padding: 3px 7px; }

    #navlist a:link, #navlist a:visited
    {
    color: #ffffff;
    background-color: #052a6b;
    text-decoration: none;
    }

    #navlist a:hover
    {
    color: #ffffff;
    background-color: #579bd9;
    text-decoration: bold;
    }

    RispondiElimina
  7. Ciao Parsifal, intendi in questo modo (senza gli spazi)? Se è così non funge... :( è corretto il posizionamento di "center"?

    < style type='text/css' >
    < center >#navlist ul
    {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
    }

    #navlist li
    {
    display: inline;
    list-style-type: none;
    }

    #navlist a { padding: 3px 7px; }

    #navlist a:link, #navlist a:visited
    {
    color: #ffffff;
    background-color: #052a6b;
    text-decoration: none;
    }

    #navlist a:hover
    {
    color: #ffffff;
    background-color: #579bd9;
    text-decoration: bold;
    }
    < /center >< /style >

    RispondiElimina
  8. @Webmaster
    "center" lo devi inserire nell'elemento HTML/Javascript e non nel modello. Nel template puoi modificare i margini

    RispondiElimina
  9. Niente, non me lo centra neanche inserendolo nell'elemento...ho provato ad inserire i < center > di apertura e chiusura(senza spazi) sia prima che dopo gli ul di apertura e chiusura...il problema si presenta solo con firefox e chrome mentre con explorer è perfettamente centrato...non so più che fare

    RispondiElimina
  10. Trovi molto antiestetico quello spazio bianco per coloro che utilizzano firefox e chrome? Non credi che il problema risieda forse nel css?

    RispondiElimina
  11. Ho capito qual'è il problema..il menu è centrato e perfetto se gli elementi (immagine header e html menu) vengono disposti uniti in "elementi pagina", invece se vengono disposti distanziati si ottiene sì una mancanza di margine ma con menu ancorato a sinistra senza possibilità di centrarlo...spero di essere stato chiaro...adesso ho messo tutto come prima però rimane il problema del margine ampio fra gli elementi, ho provato cercare "sidebar" ma non ho riferimenti di pixel da poter diminuire...

    RispondiElimina
  12. Ciao Ernesto, senti, caricando le immagini nel gadget al posto dell'header mi risultano non in linea con il template. La stessa immagine che uso per l'header, messa in quel gadget si sposta leddermente sulla destra. Sai come mai fa così e cosa si potrebbe fare?

    Grazie
    Piergiorgio

    RispondiElimina
    Risposte
    1. Si può modificare la posizione relativa in verticale e orizzontale agendo sui parametri margin-left, margin-top, margin-right e margin-bottom. Segui questo tutorial
      http://www.ideepercomputeredinternet.com/2011/05/come-diminuire-lo-spazio-tra-post-e.html
      Nel tuo caso, dopo aver trovato l'ID del widget
      http://www.ideepercomputeredinternet.com/2011/12/come-trovare-l-di-un-widget-per.html
      puoi usare questo codice
      #WidgetID {margin-left:-30px;}
      dove il valore lo puoi impostare a piacere
      @#

      Elimina
  13. CIao!
    Grazie per i numerosissimi preziosi consigli.
    Io ho applicato al blog un template preso da internet, quindi non c'è il designer modelli.
    Erroneamente ho rimosso l'intestazione e ora non so più come rimetterla. Come fare?
    Grazie in anticipo

    RispondiElimina
    Risposte
    1. Prova a andare su Layout > Intestazione > Modifica e a caricare l'immagine da lì.
      @#

      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.