26 aprile, 2008

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(http://bp1.blogger.com/_Zuzii37VUO4/RrwEpaYSVjI/AAAAAAAACEI/tOcYd9ENmqA/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(http://bp3.blogger.com/_Zuzii37VUO4/R2oceijZEhI/AAAAAAAACfI/x74nGcN_GCY/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(http://bp3.blogger.com/_Zuzii37VUO4/R2oceijZEhI/AAAAAAAACfI/x74nGcN_GCY/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. ;)
vac 468x60.gif

12 commenti:

Marco Ranno on 27 aprile 2008 13:52 ha detto...

Complimenti! Con il tuo blog ho risolto alcuni piccoli dubbi relativi a blogger! Saluti

Nico on 27 aprile 2008 14:22 ha detto...

Yurj, sei un figo in queste cose :)

Riverinflood on 28 aprile 2008 20:12 ha detto...

Anch'io ho fatto una prova di allargamento del template illacrimo ed è riuscito ma restanto accavallati sia il titolo del post sia la data. Come mai?

giadatea on 30 aprile 2008 16:31 ha detto...

ci ho passato più di qualche notte su quei numeri, ma trovo molto bello andare a manipolare da soli il proprio layout....
casi particolari? o casi patologici? ecco una domandina per te allora: si può rendere liquida anche l'immagine usata nell'intestazione del blog (e che io ho aggiunto anche in fondo?)
forse è più una questione di grafica che di programmazione, ma prima o poi, se è fattibile, ci riesco..

yurj on 30 aprile 2008 21:09 ha detto...

@marco e nico: grazie mille ragazzi!! continuate a seguirmi!! ;)

@riverinflood: il template illacrimo prevedo la modifica della forma della data, la mancanza di tale modifica, può provocare un'accavalcamento della stessa!! :)

@giadatea: direi casi patologigi ;), io ho iniziato così...
Qualche mese fà avevo letto un'articolo in proposito, ma bisogna usare i css e un buon programma di grafica... Chissà se riesco a trovare quell'articolo e riadattarlo per blogger!! ;)

notoriousxl on 15 maggio 2008 21:10 ha detto...

Ciao, ho trovato questo articolo cercando quali combinazioni di adsense fossero ottimali per il template Illacrimo (per il blog di un mio amico, il Santo)...

... e ho visto che anche tu ti sei imbattuto nel problema di allargare questo tema! ;-)

Io ho risolto impostando semplicemente un margin-left negativo a .PostContent, ma avevo necessità di recuperare ancora più pixel, per poter permettere l'inserimento delle foto di Flickr a dimensione media... ;-)

yurj on 17 maggio 2008 14:58 ha detto...

@notoriousxl : ottima alternativa a cui io non avevo pensato!! :D

Complimenti!!

MISTERGUADAGNO -- FRANCESCO-- on 20 novembre 2008 17:03 ha detto...

Grazie ottimo lavoro!!!

FRA on 24 febbraio 2009 20:20 ha detto...
Questo commento è stato eliminato dall'autore.
FRA on 24 febbraio 2009 20:24 ha detto...

Anche io ho un blog creato con blogger e vorrei diminuire la larghezza della colonna a sinistra, ma non ci riesco perchè non riesco a trovare il valore della colonna.
Il blog è questo http://wlachitarra.blogspot.com
Potresti aiutarmi?? Fammi sapere, grazie mille!

yurj on 2 marzo 2009 00:35 ha detto...

@Fra: quello è un template liquido...

Comunque se vuoi provare a fare qualche esperimento, la stringa da modificare è:

div#sidebar {
margin-top:20px;
margin-right:0px;
margin-bottom:0px;
margin-left:0;
padding:0px;
text-align:left;
float: left;
width: 31%;

In particolare:
width: 31%;

al posto di 31%, inserisci un valore fisso, per esempio:

width: 150px;

FRA on 12 marzo 2009 14:37 ha detto...

Ciao, grazie mille per la risposta!
Sono riuscita a rimpicciolire la colonna delle scritte laterali, solo che la riga che divideva la colonna centrale dalla laterale è rimasta come prima.... quindi c'è un modo per allargare la colonna centrale? Ti ringrazio per tutto!

 
Ti sono stato utile? Ti ho aiutato? Ho risolto qualche tuo problema? Allora che ne dici di offrirmi un caffe?;)

Lettori fissi

Risorse per blogger Copyright © 2009 FreshBrown is Designed by Simran