Pubblicato il 07/05/11e aggiornato il

Come modificare la larghezza del blog e delle sidebar con i nuovi modelli di Blogger.

Come aumentare o diminuire la larghezza di sidebar, dell'area del post e degli altri elementi di un blog su Blogger.
L'avvento del Designer Modelli ha cambiato molti comportamenti tra gli utenti di Blogger che erano ormai consolidati. Una delle cose più interessanti dei template generati mediante il Designer Modelli è quello della possibilità di configurare il Layout e  cambiare le larghezze di Blog e Sidebar. Quando si fa per la prima volta, in fase di progettazione, si va su Design > Design Modelli > Modifica le larghezze
modificare larghezze in blogger

Si agisce sugli appositi cursori per fissare le larghezze dell'intero blog e di una o più sidebar a seconda dell'aspetto che si è scelto andando su Designer Modelli > Layout. Questo va benissimo quando stiamo ancora lavorando sul template del blog ma se ci viene voglia di modificare le larghezze dopo che lo abbiamo già riempito di widget e di personalizzazioni la cosa cambia, perché effettuare questa modifica equivale più o meno a reinstallare un nuovo modello e porta a un generale annullamento di tutte le personalizzazioni che abbiamo già fatto.
Come modificare le larghezze di blog e sidebar senza incidere su altre personalizzazioni e widget
Il concetto è quello di non usare questo strumento di Blogger, pur utilissimo in un diverso contesto, ma di operare direttamente sul codice. Andiamo su Design > Modifica HTML e cerchiamo un blocco di codice come questo
<b:variable default='930px' name='content.width' type='length' value='960px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
      <b:variable default='360px' name='main.column.right.width' type='length' value='260px'/>
che in genere si trova sotto la riga <b:template-skin>. Gli attributi evidenziati di rosso possono anche mancare se non si sono modificate le larghezze del layout. Le tre righe introducono tre variabili che rappresentano rispettivamente
  1. La larghezza totale del blog: 930 pixel il dato di default e 960 pixel quello che è stato configurato con il cursore
  2. La larghezza della sidebar di sinistra: in questo layout la sidebar di sinistra non è presente e quindi ha larghezza 0 pixel
  3. La larghezza della sidebar di destra: 360 pixel è il valore di default e 260 pixel è quello che è stato scelto con il cursore
Se per esempio volessimo passare a una larghezza del blog di 980px con una sidebar di destra di 320px dovremo modificare il codice in questo modo
<b:variable default='930px' name='content.width' type='length' value='980px' />
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='360px' name='main.column.right.width' type='length' value='320px' />
Si procede quindi al salvataggio del modello. Come è noto Blogger mette il limite di 1000 pixel per la larghezza del modello. Gli appassionati di template particolarmente ampi possono, con questo metodo, inserire anche valori maggiori di 1000 pixel.
<b:variable default='930px' name='content.width' type='length' value='1050px' />
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='360px' name='main.column.right.width' type='length' value='350px' />
Con il codice precedente si ha una larghezza totale di 1050 pixel e una sidebar di 350 pixel. Ricordo però che i modelli molto larghi sono visualizzati in modo non corretto dai dispositivi mobili quali gli iPhone o anche dai netbook a schermo a bassa risoluzione. Se dopo questa modifica si va su Design > Designer Modelli > Modifica le larghezze si vedrà che la larghezza massima del cursore si è modificata.
Se si ha un modello anche con la sidebar di sinistra, si può per esempio intervenire in questo modo
<b:variable default='930px' name='content.width' type='length' value='990px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='200px'/>
      <b:variable default='360px' name='main.column.right.width' type='length' value='220px'/>
in cui si sono scelti i valori di 990 pixel per la larghezza totale del blog, di 200 pixel per la sidebar di sinistra e di 220 pixel per la sidebar di destra. Con questo metodo semplicissimo si può in buona sostanza
  1. Aumentare la larghezza del blog anche oltre i 1000 pixel fissati da Blogger come valore massimo
  2. Modificare in qualunque momento le larghezze del blog e delle sidebar senza perdere le personalizzazioni che sono già state installate




22 commenti :

  1. ciao, non riesco a capire come si fa per impostare la larghezza del lay-out in percentuale e non in pixel come nel caso del tuo blog, mi potresti dare una dritta?

    RispondiElimina
  2. @soccerbetter E' una domanda che mi sono posto anch'io ma alla quale non ho ancora trovato una risposta. SE infatti si inserisce una percentuale in value, il modello non si salva per dichiarazione non valida

    RispondiElimina
  3. @Ernesto T.

    interessante quest'articolo :)
    ti ringrazio perchè per il mio template non c'era possibilità di intervenire su designer modelli.da quando è stato introdotto il nuovo blogger posso solo intervenire sui css :(

    RispondiElimina
  4. @Ernesto T.

    IO NON HO NE' LE TRE RIGHE B VARIABLE DEFAULT NE' QUELLA B TEMPLATE SKIN.C'E' UNA RAGIONE???

    RispondiElimina
  5. @TUTTI GLI SCANDALI DEL VATICANO Non hai un template ufficiale di Blogger di quelli ottenuti con il Designer Modelli

    RispondiElimina
  6. @Ernesto T.

    ah ecco è per quello :) grazie della prontezza di risposta :)

    RispondiElimina
  7. Ciao!! intanto ti vorrei ringraziare per tutte le dritte che dai ogni volta ;) e poi volevo chiederti una cosa... non capisco come mai, provando a modificare le larghezze come descrivi tu, quando vado in Modifica le larghezze mi dice: Non applicabile per questo modello.
    Come risolvo?

    RispondiElimina
  8. @MakeupRules
    Se ti dice che non è applicabile al modello vuol dire che non si tratta di un template ufficiale di Blogger. Puoi modificare l'HTML come illustrato nel post.
    Se non è possibile puoi tentre con la tecnica usate in quest'altro articolo
    http://www.ideepercomputeredinternet.com/2009/08/come-aumentare-la-larghezza-delle.html

    RispondiElimina
  9. ciao ho un problema, non riesco a modificare la larghezza del margine sinistro di tutto il blog.

    Anche modificando da Design non succede niente, sembra come se aumentasse solo verso destra invece che verso sinistra..

    Qual è il tag che devo modificare? grazie

    RispondiElimina
  10. @kiya
    Le dimensioni nei nuovi modelli sono tutte collegate tra di loro. E' difficile dirti dove operare. Ho guardato il tuo codice è ci sono due
    margin-left
    Quello nella sezione main-inner è
    margin-left: -0;
    Prova a modificare il valore in questo modo
    margin-left: -60;
    per vedere se funziona. Ciao

    RispondiElimina
  11. grazie ma sembra non funzionare :(

    tu come hai fatto a levare i margini nel blog?

    RispondiElimina
  12. @kiya
    Il mio blog è un vecchi modello che non ha i margini. La larghezza è width: 100% quindi prende automaticamente tutto lo spazio del browser. Adesso non è più possibile scaricare questi modelli che all'epoca erano ufficiali di Blogger.

    RispondiElimina
    Risposte
    1. Ciao, ottimo lavoro. Ti chiedo come posso modificare i margini interni della sidebar.

      Elimina
    2. @Sandro
      Non è una cosa immediata e dipende dal modello. Dovresti andare a vedere nel codice il CSS relativo alla sidebar (vecchi modelli) o alla sezione column (nuovi modelli) e modificare il padding-right e il padding-left e eventualmente metterlo se non c'è.

      Elimina
  13. Ottimi consigli il mio blog di viaggi ti ringrazia e sicuramente anche tutti i miei utenti :D a presto! Ah se non sai dove andare in vacanza cercami visto che non posso inserire il link sicuramente potrai prendere spunto dal blog ;)

    RispondiElimina
  14. ciao Ernesto, ho impostato una larghezza del layout di 1050px come nell'esempio su esposto. La pagina risulta perfettamente centrata ma devo ricorrere alle barre di scorrimento verticali per visualizzarla tutta. si può intervenire anche per modificare l'altezza della pagina o rendere l'adattamento automatico alle dimensioni dello schermo? grazie per l'aiuto

    RispondiElimina
    Risposte
    1. L'altezza della pagina è variabile :)
      Quella dei post è lunga quanto ti pare mentre quella della home dipende dal numero di articoli che hai deciso di mostrare. Se clicchi su una etichetta invece visualizzerai ben 25 articoli (ammesso che tu li abbia già scritti). In sostanza non devi proprio considerare quella cosa ma solo controllare come viene visto il blog con browser diversi e con diverse risoluzioni
      @#

      Elimina
  15. Ciao Ernesto, e se invece volessi inserire un header che prende tutta la larghezza del monitor e dunque oltre i 1000 pixel imposti da blogger? E' fattibile? Bisogna creare un header che abbia magari 2000 pixel di lato?...Grazie molte,
    A.

    RispondiElimina
    Risposte
    1. Non ti conviene farlo perché chi apre la pagina con una risoluzione inferiore vedrebbe un cursore di scorrimento nella parte bassa della pagina per spostarsi lateralmente. Non è consigliabile superare i 1000-1100 pixel. Poi però puoi fare dei test e quindi tornare indietro
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.