Allargare il template illacrimo

L'amico Pcdazero, mi chiede aiuto per il suo blog, infatti ha un piccolo problema con gli adsense e il template.

Colgo immediatamente l'occasione per aprire una nuova rubrica, i casi studio!!

Nella mia casella mail mi giungono ogni giorno molte richieste d'aiuto, molti sono casi semplici e si risolvono inviando all'utente l'url di mio articolo già scritto, altri invece, come in questo caso, sono più complessi, e necessitano di uno studio più approfondito.

Allora mi sono detto: hey, Yurj, magari questi casi "particolari" possono essere d'aiuto a tutta la comunità di blogger, perchè non pubblicarli? Ed ecco che è nata la nuova rubrica "casi studio" per blogger.

Chiudiamo la parentesi e veniamo a noi; ecco un'estratto della mial di PCdazero:

...la parte destra degli annunci adsense (sotto i menu inizio ... eccetera)
è nascosta dalla colonna centrale...

Bene, vediamo come risolvere, prima di tutto analizziamo il template, si tratta di "illacrimo", un bellissimo modello fisso a 3 colonne.

Il problema nasce dal fatto che la colonna centrale misura 420 px, mentre l'annuncio adsense misura 468 x 60 px, e quindi il banner non si vede complato, ma tagliato:



Abbiamo 2 possibili soluzioni:

A) restringere l'annuncio adsense, utilizzando un formato più piccolo come per esempio il Pulsante (125x125), Banner orizzontale (234x60), Rettangolo piccolo (180x150), Quadrato (200x200) ecc... ma comunque inferiore a 420 px.

B) allargare la colonna centrale.

Visto che Pcdazero è propenso per la soluzione B, procediamo con il tutorial:

1 - allargiamo la colonna centrale:
Da layout/modifica html cerca questo:

#main-wrapper {
width: 420px; float: left; padding: 15px 30px 15px 100px;

E al post di 420, inserisci un valore maggiore di 468, io per semplicità ho scelto 470, quindi ho aumentato la colonna centrale di 50 px. E adesso iniziano i problemi ;)...

2 - allargare il template.
Allargata la colonna centrale tocca allargare tutto il resto: header, barra menù e footer altrimenti il modello risulterebbe sballato e sgradevole; e aumentiamo i valori sempre di 50px, quindi cerca:

#outer-wrapper {
width: 1000px; margin: 0 auto; padding: 0px; position: relative;

e cambia 1000px; in 1050px;
Cerca:

#header-wrapper {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB-FWhFdhPTyKnTulLqgtdgcjUdbdW1K4vo_KArbpObylPC0v0B-LVcAaaNgPFhzbw3bBNNMZlctqGXLDuY7-1TYR6Q7B_QLB_kZkIAFti_UrRgBQLWJtG9G0TkBvl_DvGdI1fcP-q31Ka/s1600/HeaderBkg.jpg) repeat-x left top; width: 1000px; position: relative; clear: left; padding: 0px;

e cambia 1000px; in 1050px;
poi repeat-x left in repeat-x right
Cerca:

#content-wrapper {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8erRXnnr2iJzAmQszKooUmCI5pob5rr_5ZZ5_0pVFDsVW56MiFin1ofNcbDCl-OyxfFdhW8ZWbfzxroYZFGN3aCYkgM0TwnCMAljAOnPCH6-RtyNpc4k7XHjVWGXTXprmFtg5fo1BKfs/s1600/bgc.gif) repeat-y center; width: 1000px; float: left; position: relative; padding: 0px;

e cambia 1000px; in 1050px;
Infine cerca:

#content-wrapper {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8erRXnnr2iJzAmQszKooUmCI5pob5rr_5ZZ5_0pVFDsVW56MiFin1ofNcbDCl-OyxfFdhW8ZWbfzxroYZFGN3aCYkgM0TwnCMAljAOnPCH6-RtyNpc4k7XHjVWGXTXprmFtg5fo1BKfs/s1600/bgc.gif) repeat-y centre; width: 1050px; float: left; position: relative; padding: 0px;

e al posto di repeat-y centre; scrivi repeat-y right;

3) allarare il footer.
Ultimi ritocchi, adesso si allarga il footer, cerca:

#footer-wrapper {
width: 970px; position: relative; clear: left; padding: 10px 15px;

e cambia 970px; in 1020px;

Il lavoro è terminato!! Adesso puoi tranquillamente inserire il banner AdSense 468 x 60 px nel corpo centrale del template illacrimo!!

Nota, io per semplicità ho allargato di 50px, ma se tu vuoi puoi allargarlo anche di 70, 80... naturalmente poi, non dovrai più allargare il tutto di 50px, ma del valore che hai scelto tu!!

Se ci sono problemi, non esitare a contattarmi. ;)