martedì 27 settembre 2011

Come modificare l'Header per inserire annunci adsense affianco al titolo del blog nei nuovi modelli di blogspot

In un precedente post abbiamo descritto come modificare l'Header per inserire annunci adsense affianco al titolo del blog in Blogger. Quel post è stato scritto per i vecchi modelli di Blogspot, allora abbiamo deciso di descrivere la procedura in un nuovo post dal quale si può fare copia ed incolla senza avere problemi. Continua a leggere per vedere la procedura.

  
Step 1. Nella tua barra di navigazione clicca su 'Modello', poi clicca su  'Modifica Html' sotto l'immagine Live su Blog, infine clicca su 'procedi'

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 .description {
  font-size: 140%;
  color: $(description.text.color);
}
e subito dopo incolla
#header {
float: left;
width:50%;
height:150px;
text-align: center;
}
#header2 {
text-align: center;
float:right;
width:50%;
height:150px;
text-align: center;}

Puoi cambiare height, widht e gli altri parametri a tuo piacimento.

Step 3 Cerca con CTRL F il codice
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITOLO BLOG (Intestazione)' type='Header'/>
e sostituiscilo con:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='TITOLO BLOG (Intestazione)' type='Header'/>
Cambia Titolo BLOG con quello del tuo blog.

Step 4 Cerca ancora con CTRL F il codice
</header>
 Poi scorri sopra fino a trovare la prima riga di codice
</b:section>
Appena dopo questa riga di codice incolla ancora le seguenti righe
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
Ovviamente con maxwiget puoi mettere il numero che vuoi di Widget massimi. 
Step 5 Clicca su salva modello, poi su esci. 
Se vai su layout adesso si presenterà con l'header diviso in due come nell'immagine:
 



2 commenti: