Molti blog hanno annunci adsense o altri widgets nell'header vicino al titolo del blog. In questo post mostrerò come si può sfruttare questo spazio nella piattaforma Blogger e avere la possibilità di posizionare ads e gadgets affianco al titolo del blog.

Il formato dell'header di Blogger di default prende tutta la larghezza del blog e può essere usato solo per il titolo, ma può essere cambiato facilmente. La modifica che propongo è di dividere l'header in due sezioni separate in modo da mettere a sinistra il titolo del blog e a destra qualche gadget come gli annunci AdSense come ho fatto io su Microbloggando

Questo è il layout prima della modifica

Questo è il layout dopo la modifica dove puoi vedere una nuova area 'aggiungi un gadget':

Per dividere l'header del blog in due sezioni è necessario sostituire due parti del codice html. Sebbene siano due piccole parti di codice è consigliabile comunque operare con cura ed eseguire  un back up dell'intero codice html prima di seguire gli step successivi.

Come dividere l'Header di Blogger in due sezioni:

Step 1. Nella tua barra di navigazione clicca su 'Layout' > 'Edit Html'

Step 2. Trova la seguente sezione di codice nel codice HTML del blog:

(Clicca Ctrl ed F per usare la barra di ricerca per il codice)

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

Nota : La via più facile per trovare questa sezione è di trovare prima #header, il resto sarà sotto.Questa sezione sul tuo template può essere leggermente differente.

Step 3. Devi rimpiazzare questa sezione con questo codice:

#header {

float:left;

width:40%;

height:200px;

margin: 0px;

border: 0px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

#header2{float:left;

width:60%;

height:200px}

Nota : Puoi cambiare ampiezza (width) e altezza (height) a tuo piacimento.

Step 4. Adesso cerca questa sezione di codice nel tuo template:

<div id='header-wrapper'>

<b:section class='header' id="header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='NAME OF YOUR BLOG WILL BE HERE (Header)' type='Header'>

</b:widget>

</b:section></div>

Nota : Ancora una volta comincia cercando <div id="header-wrapper"> e poi vedrai il resto sotto.

La parte in rosso la devi sostituire col titolo del tuo blog.

Step 5. Sostituisci la sezione di codice cercata con questo:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Blog-Title (Header)' type='Header'/>

</b:section>

<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>

<div style='clear:both;'/>

</div><!-- end header-wrapper -->

Nota : Come mostrato sopra in rosso devi aggiungere il titolo del tuo blog. Lascia la parte (Header) in blu come è.

Step 6. Una volta che hai fatto le modifiche puoi salvare il template e verificare che la pagina del layout adesso mostra due sezioni di header dove puoi aggiungere AdSense o altri gadgets.