BlueGriffon, HTML Jquery, librerie Giochi, Blogger, Templates Blogger, widget, gadget, aspetto QR, codice, Blogger AdWords, Google, pubblicità Templates, Blogger, Natura Nlogger, templates, Manga

Come allargare la dimensione del template di un blog.

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%;

Blog

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%)

fonte: IpCeI

Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog:

Come allargare la dimensione del template di un blog. Come allargare la dimensione del template di un blog. Reviewed by Luca Soraci on settembre 18, 2013 Rating: 5

Trovato questo articolo interessante? Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google, Linkedin, Instagram o Pinterest. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie! CONDIVIDI SU!!

Nessun commento