Pubblicato il 23/08/09 - aggiornato il  | Nessun commento :

Come aumentare la larghezza dei post nel Professional Template e variare la dimensione dei font del testo in Blogger.

In tutti i modelli di Blogger è da poco presente una funzione per modificare la dimensione dei caratteri del testo oltre che la loro famiglia. Andando infatti in Caratteri e Colori si può trovare Carattere Testo con tutte le possibili opzioni di font e dimensione

image

Nel Professional Template di cui mi sono occupato in articolo specifico e che può essere scaricato da qui, queste opzioni sono veramente moltiplicate esponenzialmente. Non c’è infatti solo la casella Carattere testo ma si trovano anche

  1. Carattere Titolo Blog
  2. Carattere Descrizione Blog
  3. LinkBar Text Font
  4. Carattere Titolo Font
  5. Carattere intestazione data
  6. Carattere Testo
  7. Blockquote Font
  8. Carattere Titolo Sidebar
  9. Sidebar text font
  10. Post Footer Text Font
  11. Comment Title Font
  12. Comment Text Font
  13. Footer Header Font
  14. Footer Text Font

e scusate se è poco .

Il modello Professional si pone quindi come uno dei migliori modelli di Blogger se non il migliore. Ha un solo difetto piuttosto importante: la larghezza veramente modesta della zona in cui viene inserito l’articolo, soltanto 476 pixel.

Infatti se si apre il modello andando su Layout >  Modifica HTML > seguendo le indicazioni dell’articolo in cui parlo di come allargare un template di Blogger, si ricavano questi dati. Occorre cliccare su F3 oppure su Ctrl+F e digitare la parola width

body – width: 100%;
outer-wrapper- width: 100%;
blog-wrapper - width:980px;
topads-wrapper – width: 100%;
header-wrapper – width: 970px;
header – width: 970px;
linkbar-wrapper – width 978px;
linkbar – width: 100%,
middleads-wrapper – width 980px;
content-wrapper – width: 978 px;
main-wrapper – width: 486px;
main – width: 476px;
side-wrapper1 – width: 156px;
side-wrapper2 – width: 336px;
sidebar1 – width: 156px;
sidebar2 – width: 332px;
sidebar3 – widht: 164px;
sidebar4 – width: 164px;
lower-wrapper – width: 978px;
lowerbar-wrapper – widht: 320px;
lowerads-wrapper – widht: 100%;
footer-wrapper – widht: 980px;
footer – width: 978px;
bottomads-wrapper – widht: 100%
credit – widht: 100%;
credit-left – widht: 71%;
credit-right – width: 30%;


La risoluzione dei browser si è molto allargata in questi ultimi tempi ma è buona norma non superare i 1020 pixel essendo 1024x768 pixel la risoluzione dei navigatori che hanno quella più bassa (sono circa il 30%), escluso ovviamente chi si collega con computer palmari o iPhone. Questo blog ha una larghezza superiore ed infatti non è visualizzato correttamente da coloro che hanno una risoluzione inferiore a 1280x800 pixel.

La larghezza massima del modello Professional è però di 980px e quindi possiamo allargare di 40 pixel nell’area del post che sono importanti per inserire per esempio dei video di youtube in formato 16:9 che con questo main-wrapper non c’entrano.

Ecco come si presenta questo modello prima di queste modifiche

image

I parametri da sostituire sono

blog-wrapper - width: 1020px;
header-wrapper – width: 1010px;
header – width: 1010px;
linkbar-wrapper – width 1018px;
middleads-wrapper – width 1020px;
content-wrapper – width: 1018 px;
main-wrapper – width: 526px;
main – width: 516px;
lower-wrapper – width: 1018px;
lowerbar-wrapper – widht: 334px;
footer-wrapper – widht: 1020px;
footer – width: 1018px;

L’aspetto non è che cambi di molto

video&video

ma sono stati aggiunti quei 40 pixel in più tutti nell’area dei post che secondo me migliorano notevolmente il modello soprattutto per quei blog che sono soliti postare dei video. Se non vi preoccupate tanto di coloro che hanno risoluzioni video basse, come del resto faccio anche io con questo blog, si può ulteriormente aumentare la larghezza del main-wrapper. L’importante è mantenere le proporzioni; per quanto riguarda le sidebar ho lasciato stare tutto come era in precedenza ma ovviamente si può operare anche in quel settore. Se siete interessati date uno sguardo all’articolo sulla larghezza del template già citato.



Nessun commento :

Posta un commento

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