Pubblicato il 21/08/09 - aggiornato il  | 22 commenti :

Come aumentare la larghezza delle colonne, delle sidebar e dell’area dell’articolo in un modello di Blogger.

Come modificare le dimensioni delle sidebar e dell'area del post (main area) nei template di Blogger
Bisogna ricordare che di modelli per Blogger ce ne sono centinaia se non migliaia, alcuni anche molto complessi quindi questo mini-tutorial vuole essere un’introduzione a questo tipo di modifica per permettere ai blogger di farle nel proprio template sapendo almeno dove mettere le mani.

Il parametro che indica la larghezza in un modello è width che nei fogli di stile è seguito da due punti e da un valore che può essere assoluto o in percentuale. Per esempio
width:660px; oppure width: 32%;
che significa che la larghezza è 660 pixel oppure il 32% della misura a cui si riferisce. Ci sono varie sezioni del blog che hanno al loro interno l’indicazione della larghezza. Alcune sezioni esistono in tutti i template mentre altre solo in alcuni. Ecco una rassegna
  1. Header-wrapper – E’ la parte alta del blog in cui c’è l’intestazione
  2. Outer-wrapper – E’ l’insieme di tutte le colonne del blog, in sostanza l’area totale del blog con area del post e sidebar
  3. Main-wrapper – E’ l’area in cui appare l’articolo
  4. Sidebar-wrapper – E’ la sidebar del blog, ovvero la colonna in genere più stretta. Nel caso di un blog a tre o più colonne ci possono essere più sidebar e il loro stile può essere indicate p.e. come sidebar1-wrapper e sidebar2-wrapper
  5. Content-wrapper – ovvero l’area dei contenuti è in genere simile all’outer-wrapper è rappresenta la parte del blog che comprende post e sidebar. Non è presente in tutti i modelli.
Un’esposizione di questo tipo si deve necessariamente basare su degli esempi e come blog-cavia ho preso questo Blog di Prova. Ecco come si presenta il blog prima delle modifiche

image


Andiamo su Layout > Modifica HTML e clicchiamo su F3 o Ctrl+F quindi inseriamo la parola width e vediamo tutte le righe che la contengono cliccando su Trova successivo (con Firefox, comunque il sistema funziona anche con gli altri browser). Troviamo i seguenti codici
#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

#outer-wrapper {
  background:$bgcolor;
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Vediamo che la larghezza dell’intestazione è la stessa (660 pixel) di quella dell’area dei contenuti (outer-wrapper), mentre quella del post è 410 pixel, decisamente stretta, e quella della sidebar è 220 pixel. Da notare che 410+220=630 che è inferiore di 30 pixel ai 660 dell’outer-wrapper questo per non tenere attaccati post e sidebar. Si trova anche il codice max-width:700px; ma è nella sezione #header .description e riguarda il testo inserito come descrizione del blog, quindi non c’entra nulla con il nostro discorso.

Da 660 passiamo a 950 come totale di area dei contenuti e li ripartiamo così
  1. header-wrapper: 950 pixel
  2. outer-wrapper: 950 pixel
  3. main-wrapper: 620 pixel
  4. sidebar-wrapper: 300 pixel
Anche in questo caso larghezza header = larghezza outer e somma di main-wrapper e sidebar-wrapper inferiore di 30 pixel all’outer-wrapper. Andiamo nel modello e inseriamo questi dati al posto degli altri. Salviamo il template e vediamo come si presenta adesso il blog

blog-di-prova


come potete vedere l’area a disposizione è indubbiamente maggiore e può anche essere ulteriormente allargata.

La ragione per cui è molto spesso una necessità allargare sia il main-wrapper che la sidebar risiede nella seguenti cause
  1. su Youtube sono da qualche tempo presenti i video in alta definizione che hanno un player più largo e che per far entrare nei modelli stretti dobbiamo modificare i parametri del l’HTML.
  2. Se si usa Adsense in modelli con main-wrapper largo possiamo inserire anche due annunci di rettangoli grandi affiancati
  3. Non tutti i widget sono modificabili in larghezza e qualche volta non entrano se si hanno delle sidebar troppo strette
  4. In modelli con main-wrapper largo ci possono comodamente stare anche foto e immagini di grandi dimensioni; nei modelli stretti dobbiamo ridimensionarle perdendo la perfetta visione dei particolari
Devo solo aggiungere alcune cose
  • Se si ha un template con delle immagini di sottofondo questo tipo di personalizzazione molto spesso fallisce. Per esempio in questo blog il risultato ottenuto con queste modifiche è stato bruttino proprio perché ha  un’immagine di sfondo. Se si ha un blog in cui si è inserita un’immagine di sottofondo e si vuole allargare area del post e sidebar occorre per prima cosa togliere l’immagine, allargare il template con il procedimento appena illustrato quindi inserire nuovamente il background.
  • Nel caso si abbiano dei modelli più complessi il modo di procedere è comunque questo e si possono fare tranquillamente delle prove anche senza conoscere l’HTML semplicemente cercando le righe di codice con width e salvando preventivamente il template per un eventuale backup.
  • Se la larghezza (width) è presente sotto forma di percentuale ovviamente dobbiamo fare in modo che non si superi il 100% con la somma di main-wrapper e sidebar (una o più di una). In certi modelli sono presenti entrambe le notazioni, assoluta e percentuale; occorre quindi fare un po’ di calcoli da scuola media inferiore…
  • Una simile procedura può essere anche utilizzata nel caso si abbiano delle colonne a piè di pagina come per esempio in questo blog. La larghezza delle colonne è rispettivamente 31%, 32% e 31% (somma 94%
Aggiornamento: Questi codici sono relativi a modelli di molti anni fa e quindi sono da considerare  un esempio su come procedere visto che gli ID e le classi di stile sono generalmente diversi.


22 commenti :

  1. in lollarandia avevo già allargato il template ma essendo a tre colonne ho dovuto allargare un altro pò stando attenta ha raggiungere sempre la somma di 950.. forse però dovre ritoccare un altro e soprattutto l'header..

    RispondiElimina
  2. @phoebe
    Si può anche superare il limite di 950 pixel. In questo modello 850 pixel è la larghezza del post, se ci aggiungi anche la sidebar arrivi a più di mille.
    In effetti però con degli schermi di computer non widescreen la visione può risultare imperfetta

    RispondiElimina
  3. sto cercando di aumentare l'area del post e della sidebar, ma mi sembra che nel mio tema ci siano da aggiustare più codici che da te. ho fatto delle prove, ma non mi tornava mai. mi fa impazzire...

    RispondiElimina
  4. @Joja
    In effetti hai molto spazio laterale a disposizione non sfruttato. Il metodo di cercare nel modello tutte le occorrenze con width dovrebbe essere valido per tutti i template. Certo poi bisogna modificare i valori in modo coerente...

    RispondiElimina
  5. Finalmente ho risolto il problema. Grazie per il tuo aiuto :)

    RispondiElimina
  6. ...capito...per la larghezza no problem...ma...per l'altezza? ad esempio io vorrei lo spazio del titolo del blog meno alto...si pùò??

    RispondiElimina
  7. @bizzo
    Hai caricato come header l'immagine di questo URL
    http://4.bp.blogspot.com/_d_DJOUzXZcs/SyYtuDJzxpI/AAAAAAAAADI/iCxHxnhSzSU/S1600-R/header+-+Copia.JPG
    E' sufficiente che modifichi le dimensioni in altezza con uno strumento online. Li puoi trovare anche in molti articoli di questo blog. Dopo che lo hai fatto la ricarichi.
    Ciao

    RispondiElimina
  8. ...perdona il mio essere seccatore ma....nel mio modello non ci sono questi codici...

    RispondiElimina
  9. @bizzo
    width da qualche parte c'è di sicuro. Può essere che al posto del valore assoluto (p.e. 700px) ci sia una percentuale 8p.e. 80%) però il concetto è quello.
    Poi chiaramente ogni template fa storia a sé.
    Ho visto che c'è
    width:66%; per il post e
    width: 31%; per la sidebar. Puoi modificare questi valori, ma stai attento.
    Ciao

    RispondiElimina
  10. Ciao Parsifal.
    Ormai Avrai presente chi sono, ho commentato spesso i tuoi post e appreso nozioni preziose dal tuo blog, lo seguo ogni giorno e se nelle mie utilità da sempre!!
    Oggi mi sono accorto d'avere un problemino, niente di grave... ma forse grazie alla tua esperienza riuscirò a risolvere.
    Ti spiego meglio:
    Intanto Guarda il mio blog per capire;
    http://ilmontespushermusic.blogspot.com/

    Allora Nella sidebar centrale quella "in rosso" per background uso un immagine.
    Il problema è.. che all'interno, ho degli oggetti non statici "cioè che cambiano lunghezza a secondo della pubblicazioni"

    Nello specifico:
    ”L’oggetto in questione” è Il gadget degli ultimi post rilasciati. che poi "sono" perchè in verità uso 5 script messi in serie che danno quell'effetto..Cmq questo non importa!
    Il problema e che a seconda dei titoli dei post, più o meno lunghi vanno ad occupare li (una riga in più o una riga in meno). Questo fa si che a volte (Ad Esempio sè: gli ultimi 6 post che ho pubblicato hanno un titolo che nella sidebar occupa tre righe) gli oggetti vanno fuori da questa immagine creando cosi come dire una "disfunzione grafica" un pò fastidiosa.
    Ho cercato un po’ in rete, se ci fosse un post che assomigliasse al mio quesito ma non ho trovato nulla… Però dando un occhiata al codice css del template nel blog di Iole (http://iolecal.blogspot.com/) ho notato che questo problema non esiste, perchè usa una struttura css nella sidebar diverso. La lunghezza di questa dipende appunto dagli oggetti che ci stanno dentro. E come se fosse divisa in tre parti... che non sono altro: tre immagini! "una testata fissa", "una che si ripete appunto a seconda degli oggetti" e un’altra finale che non si ripete" che chiude la sidebar.
    Questo sistema effettivamente risolve il mio problema… perché non si verificherebbe mai l’oggetto finale fuori dal background della Sidebar.

    Vorrei anch’io rapportare questo sistema della sidebar “elastica”, per le tre immagini ci penso io!
    Il problema è trovare il css idoneo al mio template.
    Ho fatto anche qualche prova... tentando di copiare o modificare quello che risulta nel template di iole.. ma non sono riuscito. Ci vuole "un soggetto piu pratico" :D

    Fammi sapere! anche per un esito negativo.

    Distinti Saluti

    IL MONTES

    RispondiElimina
  11. Ciao parsifal!
    Volevo avvertirti che dopo un pomeriggio di prove sono riuscito a risolvere da solo

    Ho implementato benissimo la sidebar elastica..

    Non c'è nessuna disfunzione ne con Explorer/Fire Fox/ Chrome :)

    Sono contento!

    Grazie anche solo d'aver letto


    IL MONTES

    RispondiElimina
  12. Io avrei un problema... Quando allargo la sidebar o la zona dei post la sidebar mi va sotto... come posso rimediare?

    RispondiElimina
  13. @Pierzollo
    Devi pensare che il template è un tutt'uno. Se la sidebar ti va sotto è perché non hai aumentato tutti i dati della larghezza totale del modello cioè l'outer-wrapper e il content-wrapper.
    Poi in ogni template ci possono essere delle caratteristiche particolari

    RispondiElimina
  14. Mio harissimo guru bloggaro... le sa miha se i posso tirà fori una sidebarre dal mio template chi ora un ce l'ha miha??? :D

    (Sto studiando il fiorentino per comunicare meglio con te, perdona gli erroracci :) hehehe hahahaha

    RispondiElimina
  15. @Sarù
    Nel fiorentino devi senz'altro migliorare :D
    E' vero, ho visto il tuo blog e non ha neppure una sidebar!
    Se vuoi un consiglio prima di perderti dietro a codici e codicilli, ti conviene scegliere un altro modello.
    Tanto i widget non li perdi visto che non ne hai neppure uno ahahah

    P.S. Non fa bischerahe e un ti mettere a ciattare su feisbukke mentre tu se lì co' codici. E ci vo' poho a fa' casini. Sta honcetraha e behiti una bella coha-cola con la hannuccia ^:^

    RispondiElimina
  16. Mio caro Saggio Fiorentino, ho seguito (per l'ennesima volta) il tuo consiglio. No, non quello di lasciar perdere la lingua dantesca. Piuttosto mi sono imposta il divieto assoluto di accedere a facebook, finchè non ho finito di preparare la nuova grafica al blog.
    Ho modificato un template del designer modelli di blogger sbizzarrendomi su un blog-prova e ora.........finalmente posso provare anch'io tutte le novità di cui parlerai da qui al 3283 d.C. :)

    Buona serata!!

    P.s. Pubblicherò tutto domani. Mi piacerebbe sapere qualcosa su adsense. Ma devo prima trovare l'articolo in cui ne parli.

    RispondiElimina
  17. @Sarù
    Ne ho parlato in molti post, basta che clicchi sull'etichetta
    http://www.ideepercomputeredinternet.com/search/label/adsense

    RispondiElimina
  18. non capisco perché, non riesco a trovare questi codici....voglio modificare questo blog, (www.ilmondoditilli.blogspot.it) per avere anche foto di maggiore dimensione....

    RispondiElimina
    Risposte
    1. @ Tilli
      Prova a consultare quest'altro post
      http://www.ideepercomputeredinternet.com/2011/05/come-cambiare-la-larghezza-del-blog-e.html

      Elimina
    2. grazie ho risolto.... stavo cercando un codice di modifica per centrare la scritta, ed i pulsanti di condivisione al pie del post, ma non riescoa trovarla...

      Elimina
    3. @ tilli
      Il concetto è quello di usare Firebug
      http://www.ideepercomputeredinternet.com/2011/05/firebug-e-una-estensione-di-firefox-per.html
      Forse ti può essere utile questo post
      http://www.ideepercomputeredinternet.com/2012/03/come-modificare-gli-elementi-del-footer.html

      Elimina
  19. Non ho mai neppure pensato a una personalizzazione di questo tipo e non mi risulta che in rete ci sia qualcuno che l'abbia realizzata :(
    @#

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy