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

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.