Pubblicato il 05/07/12e aggiornato il

Inserire nel layout e nell'header di Blogger immagini, bottoni, ecc.

Come inserire nel layout dei blog su Blogger degli oggetti tramite un contenitore div. E' possibile inserirli fissi o flottanti.
In linea di massima possiamo inserire un oggetto in qualsiasi punto del layout di Blogger. Lo possiamo fare con bottoni ma anche con pulsanti e pure con certi widget. Si può scegliere un posizionamento assoluto oppure un posizionamento flottante che mantiene fisso l'oggetto allo scorrere della pagina.

La differenza tra le due impostazioni sta nel CSS position:absolute; oppure position:fixed;. In questo post mi occuperò del primo caso ma con una semplice modifica del codice si può facilmente passare alla seconda tipologia di inserimento.

COME INSERIRE UN OGGETTO NEL LAYOUT DI BLOGGER

Per semplicità prendiamo come esempio una immagine ma la cosa funziona anche per i pulsanti ecc. Ci si deve solo ricordare che il modello di Blogger è in XML quindi, in taluni casi è opportuno convertire in questo linguaggio il codice dell'oggetto da inserire mediante il tool Blogcrowds.
Dopo aver salvato il template, si va su Modello > Modifica HTML > Procedi e si cerca la riga </body>. Subito sopra si incolla un codice come questo

<div style='position:absolute; left:50px; z-index:10; top:400px; '>
     <img src='https://lh3.googleusercontent.com/-EJoDV6K2IiQ/T_VGdGwN_WI/AAAAAAAAY8I/icxw7cCVM0w/s150/leopardi.jpg'/>
    </div>

Dove la posizione della immagine è data dai numeri 50 e 400 che ne determinano la distanza rispettivamente dalla sinistra e dalla parte alta. L'URL della immagine è colorato di rosso e può essere acquisito da Picasa dopo il caricamento. Al posto di

<img src='URL_IMMAGINE' alt='nome-immagine' width='300px' />

può anche essere inserito il codice di un IFame di un video. In questo caso occorre prima convertire il codice in XML come spiegato in precedenza.



COME INSERIRE UN OGGETTO NELL'HEADER DI BLOGGER

Se si vuole inserire un oggetto nella zona della intestazione del blog si può procedere alla divisione dell'header in due parti ma il metodo appena illustrato è certamente più semplice. Con Internet Explorer la resa non è sempre ottimale se l'oggetto viene posizionato nei pressi della intestazione.

Si può ovviare a questo inconveniente usando un ulteriore contenitore in questo modo

<div id='outer-wrapper'>
<div style='position:absolute;  right:400px; z-index:10;top:60px; '>
<img src='URL_IMMAGINE' width='150px'/></div></div>

dove al posto della riga della immagine possiamo inserire anche il codice di un altro oggetto. In tutti i codici proposti ho anche inserito un tag z-index per fare in modo che l'oggetto  si visualizzi sopra al resto del layout. Ovviamente va sempre salvato il modello. Per i bottoni di Facebook o di Twitter inseriti con questo procedimento forse è meglio pubblicare un articolo ad hoc.




17 commenti :

  1. C'è un problema però che inserendo una immagine si aggiungerà parecchio spazio sotto l'intestazione e questo spazio non si può ridurre (almeno non col metodo suggerito per ridurre la distanza dei widget).
    Credo di aver fatto tutti i tentativi possibili ma facendo ciò si sballa il pagelist1.
    Diciamo che questa è l'unica cosa che non sono riuscito a fare seguendo le tue guide.

    RispondiElimina
    Risposte
    1. Mi sono dimenticato di dire che non vale solo per l'immagine anche di 20x20px (è quindi piccolissime) ma anche per qualsiasi cosa come per i bottoni FB e altri social... è ciò con Chrome col tuo metodo per ridurre i widget si risolve ma con IE 9 è inguardabile e con firefox non ho provato ma credo si veda male ugualmente.
      Anche nel blog demo si aggiunge lo spazio che magari non si nota perché non c'è un menu.

      Elimina
    2. @Andrea+--+
      Prova a aggiungere un margin-bottom allo stile in questo modo

      style='position:absolute; right:400px; z-index:10;top:60px; margin-bottom:-60px;'

      Elimina
  2. Ottimo più o meno è risultato, devo solo fare a tentativi per la posizione giusta.
    Ti ringrazio.

    RispondiElimina
  3. Ottimo l'inserimento dell'immagine. Se volessi linkarla?

    RispondiElimina
    Risposte
    1. @ EdoardoOsti
      E' piuttosto semplice. Al posto di
      <img src='URL_IMMAGINE' width='150px'/>
      metti
      <a href="URL DEL LINK"><img src='URL_IMMAGINE' width='150px'/></a>

      Elimina
    2. grazie ... con moltissimo ritardo!

      Elimina
  4. Ciao sono nuova su blogger, io seguendo la tua guida non visualizzo nessuna immagine nell'header.
    sto usando il template dinamico è per quello?

    RispondiElimina
    Risposte
    1. @ AlessiaM.
      Con i Modelli a Visualizzazione Dinamica si possono fare solo pochissime personalizzazioni e quasi nessuna modificando il template

      Elimina
  5. Domanda: per oggetto intendi anche un widget? Per esempio a me piacerebbe inserire il widget del translate senza modificare il codice del modello.
    Ci ho provato, inserendo il codice al posto dell'ultima riga.
    Ovviamente non ci sono riuscito...:)

    RispondiElimina
    Risposte
    1. @# Ho parlato di oggetti in senso lato. Per immagini e video funziona così come per alcune chat. Per altro widget no. Però si può usare questo sistema
      http://www.ideepercomputeredinternet.com/2013/04/fixed-widget-blogger.html

      Elimina
    2. Ciao, sono riuscito ad inserire l'html relativo alla form di iscrizione al feed! Sono troppo forte!
      Scherzi a parte, tra gli "oggetti" puoi annoverare anche questo widget, ho usato e poi modificato il codice di feedburner.
      Ciao e Grazie!

      Elimina
    3. @# Appunto. Senza testare non si può dire a priori :)

      Elimina
  6. Ho una strano problema su Blogger, quando provo a spostare un widget e poi clicco su salva disposizione mi appare la scritta: 'Si è verificato un errore. Aggiorna la pagina e riprova.' e quindi non mi accetta lo spostamento. Il problema è solo nella fase di spostamento ma non capisco il perché e questa cosa mi sta limitando molto; ti è mai capitato qualcosa di simile, su un altro blog mi funziona bene quindi non dipende solo dal browser. Di recente ho solo personalizzato la versione mobile di Blogger inserendo widget solo nel mobile, può essere questo il problema? comunque non credo, bho... cercando questa frase sembra che nessuno ha avuto questo problema.

    RispondiElimina
    Risposte
    1. Prova a chiedere sul forum se è un problema già conosciuto o se si è presentato per la prima volta
      @#

      Elimina
  7. Per un tema esterno le cose cambiano o sbaglio? dovrò per forza caricare l'immagine in uno di quei servizi online (contenitori). D'accordo sul fatto che basta cambiare il percorso dell'immagine, ma il vero problema è dove la carico questa img, visto che uso la versione di blogger free quindi non sono ospite di un server a pagamento, il quale jmi permetterebbe di agire sulle cartelle/directory?

    RispondiElimina
    Risposte
    1. La puoi caricare su Picasa Web Album dove ci sono già tutte le tue immagini. Apri questo link e vedrai
      https://picasaweb.google.com/lh/myphotos?noredirect=1
      Per ottenere il link diretto leggi invece qui
      http://www.ideepercomputeredinternet.com/2013/03/picasa-image-hotlink.html
      @#

      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.