Blogger: le tre colonne alla portata di tutti

Il restyling del mio blog, di questi giorni, mi ha portata ad addentrarmi in argomenti con cui ho un rapporto di amore-odio, amore quando ottengo il risultato atteso, l’odio (o quanto meno un po’ di frustrazione) nei diecimila tentativi impiegati per arrivare a quel risultato. Comunque anche una profana come me è riuscita, sicuramente grazie all’aiuto di altri blogger più ferrati , a cimentarsi nei pezzi forti della realizzazione di un template a tre colonne, nella personalizzazione della home page, nella realizzazione di un banner e della relativa teca d’esposizone (lo so che non si chiama così, ma non mettetemi fretta…)

Posterò il mio calvario per tutti gli altri impediti della rete che vogliono cimentarsi nella stessa avventura, se ci sono riuscita io, garantito, ci possono riuscire tutti, a iniziare dalla realizzazione del template a tre colonne.

Sui template ognuno ha le proprie idee, c’è chi lo prende così come lo trova e non lo personalizza minimamente, e chi invece è alla ricerca di un template che calzi come un vestito su misura, io sono una chiacchierona cronica (si dice logorroica?) per cui un template troppo stretto sarebbe risultato dispersivo per contenere i miei post, inoltre mi piace aggiungere immagini e, forse perché sono miope, mi piace anche vederle belle grandi, così come i caratteri di scrittura, per cui le dimensioni del mio blocco dei post (si, lo so, non si chiama così tecnicamente….) deve essere necessariamente generoso.

Tra i vari template di blogger poi preferivo quelli a tutto schermo, perché dotati di una colonna molto ampia da poter riempire con testo, foto e tool vari, ma esteticamente la trovavo anche “troppo ampia” e spesso sguarnita nei bordi, insomma, perché non togliere un po’ di spazio dalla colonna di sinistra per crearne una a destra e raddoppiare lo spazio della home page? Avevo già provato ad installare un template preconfezionato a tre colonne scaricandolo dal sito http://www.blogcrowds.com/ eppure, pur seguendo quelle che dovevano essere istruzioni semplici (ossia scegliere lo stesso tipo di modello adottato per il proprio blog, copiare e incollare il codice e sostituirlo integralmente nella relativa pagina html) io non ci sono riuscita, il sistema mi restituiva messaggi in cui segnalava il codice inesatto, forse per la mancanza di tutti i tag di chiusura. Poi un giorno, visitando il blog sempre aggiornato e utile di yuri ho trovato questo post e ho provato a cimentarmi anche io, ci ho lavorato un po’ su e la terza colonna è finalmente venuta alla luce.

Ho fatto esperimenti su vari modelli, quello che offre maggior corrispondenza di html è il minima, personalmente ho scelto lo snapshot, anche se avrei preferito un modello più personalizzabile dal punto di vista cromatico (va beh, lo faccio per il prossimo cambio di stagione). La modifica che bisogna apportare all’html consiste nel rintracciare determinate stringhe di testo e sostituirle con altro testo, questo implica che, se il nostro modello è già fornito di una colonna destra, dovremo seguire solo le istruzioni per creare la sinistra e viceversa.

Siete pronti? Partiamo allora: Bacheca; modifica html ed espandere i windget (credo che questo ultimo passaggio non sia sempre determinante, se tra un salvataggio e l’altro vi dimenticate di estenderli probabilmente il risultato non cambierà.)

Iniziamo con il creare la terza colonna a destra (ossia il vostro modello ha un corpo centrale e una colonna a sinistra)

Aprite un’altra scheda del vostro browser (io ho usato firefox), che vi servirà solo per agevolarvi nelle ricerche con l’aiuto dell’evidenziatore. Dovrete infatti cercare molte stringhe sparpagliate nel codice, e senza evidenziatore l’impresa risulterebbe lunga e sfiancante.

Andando invece nella pagina web vuota e chiedendo la ricerca di una determinata striscia

saprete esattamente posizionarvi al punto utile.

IMPORTANTE: PER POTER RIPORTARE IL TESTO ALL'INTERNO DI QUESTO POST SENZA CREARE UN CONFLITTO DI CODICE, HO DOVUTO CREARE UNO SPAZIO TRA < e Il codice, quindi nelle vostre modifiche annullate l'eventuale spazio vuoto

Individuato il testo

< id="'sidebar-wrapper'">
< class="'sidebar'" id="'sidebar'" preferred="'yes'">

lo dovrete sostituire con:

< id="'left-sidebar-wrapper'">
< class="'sidebar'" id="'left-sidebar'" preferred="'yes'">

E fin qui è tutto facile, il testo è sempre corrispondente

Cercate ora:

< div id="content-wrapper">

E sostituitelo con


< id="'content-wrapper'">
< id="'right-sidebar-wrapper'">
< class="'sidebar'" id="'right-sidebar'" preferred="'yes'/">
< /div>

Anche questo passaggio è semplice perché il testo corrispondeva esattamente in tutti i modelli su cui ho provato a fare la ricerca.

La cosa si complica leggermente ora, perché la formula magica non sempre corrisponde perfettamente, e se uno non è molto pratico ha paura di sbagliare, ma osando e provando (insomma, male che vada si ripristina il modello iniziale…) si riesce a fare. Tuttalpiù anziché cercare # sidebar - wrapper { effettuate la ricerca su un testo più identificabile come word-wrap: break-word; /* . Nella maggior parte dei modelli non troverete sidebar-wrapper ma main wapper.

La stringa da cercare è questa:

#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
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 */
}

E occorre sostituirla con questa

#right-sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

#left-sidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word;
overflow: hidden;
}


A questo punto la terza colonna è stata creata, ma occorre definire le dimensioni. Il criterio utilizzato nei modelli non a schermo intero sono i pixel, e una buona proporzione tra dimensioni e schermo si è rivelata questa (cercare e intervenire sulle cifre dopo il width:

#outer-wrapper {
width: 940px;
margin: 0 auto;
text-align: $startSide;
font: $bodyfont;
background: #fff url(http://www.blogblog.com/snapshot/bg-body_$startSide.gif) $startSide top repeat-y;


in questo caso 940 pixel è la dimensione totale del blog, adatta ad uno schermo grande ma visibile interamente anche su uno schermo più piccolo (poi dipende quanto più piccolo…)

descriptionwrapper {
background: #fff url(http://www.blogblog.com/snapshot/bg-sidebar.gif) 1px 0 no-repeat;
#main-wrapper {
line-height: 1.4;
float: $startSide;
padding: 10px 12px;
border-top: solid 1px #fff;
width: 428px;
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 */
/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: "\"}\"";
voice-family: inherit;
width: 500px;

Il 500 rappresenta la mia area post, per cui lo spazio centrale, se volete allungarlo o diminuirlo dovrete sempre e solo tenere conto del fattore aritmetico: il blog deve essere costituito da totale (outer wrapper) e le varie componenti, sommate, non potranno superare questa soglia, inoltre se risultasse troppo schiacciato sarà meglio che la somma delle tre colonne sia un po’ inferiore al totale.

#right-sidebar-wrapper {
width: 200px
float: right;
word-wrap: break-word;
overflow: hidden;
#left-sidebar-wrapper {
width: 210px;
float: left;
word-wrap: break-word;
overflow: hidden;

il 200 e il 210 rappresentano le mie due colonne, in questo caso ne ho scelta una un po’ più grande dell’altra, fate le vostre prove e chiedete l’anteprima fino a quando non siete soddisfatti del risultato.

Per creare la terza colonna a sinistra, dovrete eseguire gli stessi passaggi descritti sopra ovvero cercare:

< id="'sidebar-wrapper'">
< class="'sidebar'" id="'sidebar'" preferred="'yes'">

E sostituirlo con

< id="'right-sidebar-wrapper'">
< class="'sidebar'" id="'right-sidebar'" preferred="'yes'">

Cercare

< id="'content-wrapper'">
E sostituirlo con

< id="'content-wrapper'">
< id="'left-sidebar-wrapper'">
< class="'sidebar'" id="'left-sidebar'" preferred="'yes'/">
< /div>

Cercare

#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
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 */
}

Tenendo conto della non completa corrispondenza tra i vari modelli e sostituirlo con

#right-sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word;
overflow: hidden;

}

#left-sidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

E poi tornare a fare gli accorgimenti sulle misure sopra descritte.

A questo punto avrete ottenuto il vostro blog a tre colonne. Ma se voleste di più? Se Voleste, per esempio, un blog a schermo intero che si adatti al monitor di chi vi legge, stringendosi all’occorrenza e sfruttando tutto lo spazio a disposizione nel caso dei moderni schermi panoramici?

La soluzione è semplicissima, basta cambiare le misure da pixel a percentuali, ed ecco le mie misure:

/* -- layout -- */
#outer-wrapper {
width: 99%;
margin: 1%;
text-align: $startSide;
font: $bodyfont;
background: #fff url(http://www.blogblog.com/snapshot/bg-body_$startSide.gif) $startSide top repeat-y;
}

Ho scelto di inserire il 99% anziché il 100% perché quell’1% mi permette di avere un margine laterale che rende il blog più leggibile, evitando di schiacciare il testo contro i bordi, con un maggior risultato in fatto di equilibrio e di estetica.

#main-wrapper {
line-height: 1.4;
float: $startSide;
padding: 10px 12px;
border-top: solid 1px #fff;
width: 428px;
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 */
/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: "\"}\"";
voice-family: inherit;
width: 60%;
}

In questo caso 60% è lo spazio destinato ai miei post, ovvero l’area centrale

#right-sidebar-wrapper {
width: 15%;
float: right;
word-wrap: break-word;
overflow: hidden;
}

#left-sidebar-wrapper {
width: 20%;
float: left;
word-wrap: break-word;
overflow: hidden;
}

Per le due colonne, ho di nuovo scelto dimensioni differenti, 15 % per quella di destra e 20% per quella di sinistra.

Sommando le varie aree, ho utilizzato 95 su 99, lasciando un 4% di spazio che si è auto distribuito tra i margini senza che io dovessi stabilire le quote.

Il risultato? Quello che vedete, un blog a tre colonne che si adatta alle dimensioni del vostro schermo, se lo riducete o modificate l'area della finestra, lo spazio si adatterà in modo elastico in modo da essere sempre visibile.

Buona indigestione di html a tutti!

AGGIORNAMENTO

Date le difficoltà a copiare il testo modificato così come l'ho postato, ho creato un post dove ho messo a disposizione questo layout integrale, l'html è già stato ottimizzato per cui non dovete fare altro che selezionarlo, copiarlo e incollarlo (dopo aver esteso i widget) sul vostro html. L'ho postato su un blog nuovo dove raccolgo tutte le mie esperienze "tecniche" di blogger inesperta un po' meno inesperta di 6 mesi fa.

Potete trovare il codice quì

e se scorrete bene il blog troverete molte altre cose interessanti, tra cui un sito che offre gratis layout a 3 e 4 colonne. Sono leggermente difettose, se siete alla prima esperienza e se avete un solo blog potrebbe essere difficile da gestire perchè il layout elimina la barra di navigazione costringendovi a fare percorsi alternativi per aggiornare post e layout, ma sono davvero belli.



35 commenti:

Daniele Verzetti il Rockpoeta® ha detto...

Miiiii, che mal di testa LOL! Complicatissimo!!!!

Weltall ha detto...

La terza colonna risolve un sacco di problemucci e aiuta a fare ordine...potrei farci un pensierino!
Ottimo post ^__^

Anonimo ha detto...

Brava, bravissima.
Pero' a causa della mia scarsa risoluzione preferisco vedere tutto il blog scorrendolo solo dall'alto al basso e non anche da destra a sinistra. In genere con i blog a 3 colonne mi capita questo.
Il tuo pero' "sfora" solo per le immagini iniziali e finali. A patto di togliere i preferiti :-)
ciao

Maddea ha detto...

Ciao Giadina sei grande.....è proprio qiello che volevo fare anche io perchè questa suddivisione in tre colonne mi piace molto, figurati che mi sono anche procurata 2 manuali di html!!!
Prossimamente mi cimenterò!
Un bacio. Maddy.

Barbara ha detto...

E si, le immagini sforano perchè le ho dovute mettere scegliendo una dimensione, e siccome io ho uno schermo da 19 polllici ho abbondato, se passasse un grafico da queste parti mi può spiegare se è possibile rendere anche le immagini "elastiche" magari inserendole nel codice nell'html? In ogni caso non è obbligatorio inserirle, semplicemente volevo personalzizare con un po' di colore lo sfondo piuttosto pallido, e poi l'intestazione di questo modello è molto triste. Si accettano consigli!
Per Maddea, invece, già ti ci vedo alle prese con l'html, ti dirò, anni fa avevo provato ad avvicinarmici pure io ma oggettivamente mi sono allontanata ben presto da questa mia idea, ieri leggevo un forum dove alcune persone scrivevano che non ci si può definire webmaster se non si sa almeno fare un programma di statistiche in casa, io il programma di statistiche non me lo farò mai, del resto c'è analytics che è superaccessoriato, e non è l'unico, non so bene cosa significhi essere webmaster, ma credo che la rete sia innanzitutto veicolo di contenuti, sul fatto di aiutarci con la forma per renderli visibili credo che si possa, e si debba, essere tolleranti.

buffy ha detto...

io ho 4 colonne prrrrrrrr
le trovi nel sito finalsense.com

senti li da isabelemarco ho visto un grosso errore di ortografia, mi dice
desde hoy avril 13 puedes hacer receferidos denuevo (da oggi 13 aprile puoi fare refer di nuovo)

allora ci sono due ORRORI di ortografia
il primo: avril---------aprile si dice abril e inoltre il numero deve precedere il mese...mica stiamo in america...
il secondo: denuevo...si dice : de nuevo (due parole)...
siamo sicuri che sono spagnoli...?

buffy ha detto...

ah per la storia che sfori col blog...penso sia l'intestazione...prova a ritagliare l'immagine e mandarla nuovamente

io ho fatto e rifatto più volte finche mi veniva perfetta

Anonimo ha detto...

Ciao Giada...complimenti bella lezione. Anche io sto studiando il metodo per creare template per Blogger (per il momento li creo solo per Splinder).
Ti ringrazio per i complimenti e passa quando vuoi dal negozio di caramelle ;))

Rossella Mazzotta ha detto...

Grazie per le indicazioni dettagliate. Ciao!!!!

buffy ha detto...

x il template a 3 o 4 colonne:
www.finalsense.com
io poi cambio la loro foto in alto inserendo una mia direttamente su blogger

Anonimo ha detto...

interessante

Maddea ha detto...

Ciao cara.......passa da me che devi ritirare qualcosa.

Melina2811 ha detto...

Forse ci proverò, ma mi devo leggere tutto con molta calma. Non sono sicura però di riuscirci, anche se mi piacerebbe molto. Ciao e grazie delle info. Maria

Raggio di sole ha detto...

Sei meravigliosamente grande !!!!

Paolo Biserni ha detto...

Complimenti Giadatea,brava davvero,ce da diventare matti,sei stata molto brava e so che ci vuole tanto impegno.
Comunque Yurj è un grande,da consigli strepitosi.
Un saluto a presto.

Mr.Segnalatore ha detto...

Cara Giadatea sei fantastica! Queste si che sono info utili, brava!
Quasi quasi ti chiedo una mano (anzi servirebbero tutte e due,io sono una zappa) a creare il mio blog su wordpress con dominio...sai, ci sto pensando.

Complimenti per il look, un saluto.

Mr.Segnalatore

Barbara ha detto...

io resto fedele a blogger, ho tutto quello che mi serve già preconfezionato e non devo fare altro che ritoccarlo un po', un dominio sarebbe un'impresa al di sopra delle mie possibilità, almeno in questo momento, ma che tu sia una zappa non ci credo neanche se lo riscrivi (se non ci hai fatto caso, il tool di traduzione l'ho preso da te, tra i vari che ho trovato in giro era quello che più mi piaceva! Piuttosto se vuoi uno bravo, direi che Pabi se la cava molto bene, il suo sito su libero è davvero bello, oltre che molto interessante per i contenuti

Anonimo ha detto...

Con l'html ho molta meno confidenza di te. Mi sono arrangiato all'inizio, e ora non cambio più...

Un sorriso html
Mister X di Comicomix

Pino Amoruso ha detto...

... una cosa semplicissima!!! Complimenti...
;-)

yurj ha detto...

Beh, i complimenti già te li ho fatti!! :D

Per lo spazio tra < e Il codice domani, se faccio in tempo, svelerò un piccolo trucchetto!! ;)

Ciao e grazie per il link!!

buffy ha detto...

ciao volevo segnalarti un sito che serve x passarsi soldi da paypal a alertpay e viceversa
probabilmente sarà affiancato presto dalle ptc
https://www.mypayscript.com/id/1B638948EA/

se ti iscrivi x favore fallo da quel link, basta ke poi in alto a sinistra clichi sign up

Unknown ha detto...

Cari compagni/e blogger ho notato che in in giro si respira un'aria viziata costituita da diverse correnti: cattocomunisti e comunisti pro-bertinottiani e spinte anarcoidi-ribellistiche animano le voci di quella che dovrebbe definirsi sinistra...ma una cosa importante l'avete capita o no?
Berlusconi è al governo grazie anche a quella sinistra che non è andata a votare...lo avete aiutato a raggiungere il suo sogno. Per tutti gli altri che sono andati alle urne, come me del resto, sappiate che da oggi faremo opposizioni di paglia e fumo più di quante ne abbiamo fatte fino ad ora.
Ho fatto un video che invierò al Presidente del Consiglio perchè la memoria non vada perduta...
Guarda il video: http://it.youtube.com/watch?v=T3mtwXeJqok
Sito web: http://www.vincenzocaldarola.blogspot.com/

Unknown ha detto...

Grazie di vero cuore..sei gentilissima...è un bene per l'Italia sapere quant'è buffone il nano bastardo!

Admin ha detto...

ma... ma... anche il Blog GUADAGNOONLINE è tuo? Non ci posso credere! Sei una forza della natura! Tutta la mia ammirazione...

Barbara ha detto...

si ma quello è una prova, giusto per depositare un po' di ref, nulla di particolare, e poi ce l'hanno tutti uno a tema:-)

Ondamagis ha detto...

Ciao Giadina, vedo che finalmente si è capito qualcosa di quel maledetto codice che cambia le virgolette delle citazioni! Era quello a cui alludevo quando, appena aperto il blog, non riuscivo a lasciare le frasi dette con le <<...>>. Era quindi una questione di spazioin più?
Il modello del blog, poi, se a e sta bene a 3 colonne, ben venga. Io, invece lo avrei voluto a una sola pagina intera, senza divisioni, ma poi la pubblicità dove sarebbe andata?

Altro grande quesito. Come faccio a scaricare da you tube i video che mi interessano? Sono iscritta, ma quando ho cercato di scaricare quelli di Mario Biondi o di Barbra Streisand, mi dicevan che non era possibile perchè si vietava il regolamento. Ma allora come fanno tutti i bloggers, compresa te, con Jovanotti, Renga, Morgan ad es. a inserili nel proprio blog? Mistero della scienza! Un bacione e buonanotte.

Admin ha detto...

io ho fatto un piccolo investimento su bux.to... per adesso mi diverto con qualche PTR, probabilemnte quando mi stancherò tornerò con maggiore dedizione al Blog. Ciaoooo!

buffy ha detto...

io bux.to lo odio...son tre mesi ke aspetto il payout---altri invece aspettano da 5 mesi!

se volete una ptc che mi ha pagato in 4 giorni scrivetemi:
spanish_work@email.it

Franca ha detto...

Oddio, mi sono persa!
Non fa per me, troppo complicato.
Mi basta e mi avanza quello che ho.
Ciao e grazie per essere passata

Unknown ha detto...

Carissima Giadatea rispondendo al tuo commento ti dico che hai ragione, in Italia la macchina della giustizia non ha funzionato con i potenti di turno e la cosa più bestiale è che il “buffone” in questione è stato assolto da quasi tutti i suoi reati da quella stessa giustizia che lo voleva processare. E' sempre la stessa storia così come per altri loschi personaggi politici tipo Cuffaro, De Gregorio o Dell'Utri, ora sono tutti parlamentari e chi s'è visto s'è visto.
Ciao e buona giornata....

Massy Biagio ha detto...

Ti ho linkato nella pagina 'BlogRoll?, che puoi trovare linkata, a sua volta in Home Page. La Mia pagina ha un pagerank di 2/10 mentre la Tua è di 0/10 . Per farla alzare dovresti minimo linkarla all'Home Page, inoltre 'postarla' in più Bookmarks possibili come OKNotizie, Diggita.it, Pligg.it, ecc. Se vuoi un consiglio, scrivimi, Ciao ps: scrivo anche su http://seo-blog.myblog.it

LAURA ha detto...

Complimenti davvero! Bel risultato! Da tempo vorrei personalizzare il mio blog ma ho paura di combinare grandi casini dal momento che non ci capisco nulla di linguaggio html....

Anonimo ha detto...

ti ho nominata nell'ennesima catena di blogger! ;)

Shardana ha detto...

Ciao, come vedi son venuto a visitare il tuo bel blog. Un salutone, Tony

Anonimo ha detto...

Ciao e scusa il didturbo....sono un ragazzo di 13 anni che ha modificato il suo template su blogger ma che non riesce a mettere le tre colonne come il tuo magnifico blog......
Per caso mi puoi dare ilcodice html del tuo template o di un template che abbi tre colonne come il tuo?
Se vuoi vedere il mio blog:
http://milanista95.blogspot.com/
Se vuoi iscriverti nella mia top100:
http://aumentarevisite.mastertop100.net/