Creare un template a 3 colonne per Blogger


3colonne

Da quando Blogger utilizza il nuovo template in XML, quasi tutti i template pubblicati sono a 3 colonne. Avere una colonna in più permette di gestire meglio lo spazio a disposizione e in particolare si rivela utile per chi vuole inserire una colonna verticale di banner pubblicitari. Per prima cosa vi raccomando di eseguire il backup del template di Blogger, e di leggere l'articolo su come cambiare la larghezza del template: per aggiungere un'ulteriore colonna, avremo bisogno di più spazio.

Dopo aver allargato la larghezza del template come illustrato nel precedente articolo, mantenete la larghezza del main-wrapper a 410px e cercate la seguente porzione di codice:

#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 */
}

Copiatela e subito sotto incollatela cambiando la prima riga nel seguente modo:

#new-sidebar-wrapper {
  width: 290px;
  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 */
}

In questo modo abbiamo creato un nuovo "identificatore" di area che si chiama new-sidebar-wrapper. La larghezza è 290 perchè il nostro obiettivo (come sempre rimando al precedente articolo) è arrivare a 920 pixel: 410px + 220 + 290px = 920px (più 30 di margine fanno 950, la larghezza del nostro template di prova). Adesso cerchiamo la seguente porzione di codice:

<div id='sidebar-wrapper'>
     <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='LinkList1' locked='false' title='COLLEGAMENTI' type='LinkList'/>
        <b:widget id='Text1' locked='false' title='TESTO' type='Text'/>
     </b:section>
</div>

Le righe evidenziate in blu potrebbero essere diverse a seconda del contenuto della colonna che già avete nel template. Fondamentalmente dovete cercare l'area che comincia con <div id='sidebar-wrapper'>. Subito prima delle righe sopra, incollate la seguente porzione di codice:

<div id='new-sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar2' preferred='yes'>
        </b:section>
</div>

Salvate le modifiche effettuate e andate in Layout->Elementi pagina. Adesso dovreste vedere la terza colonna: aggiungete degli elementi e salvate il template. Visualizzate il blog e il gioco è fatto:

3colonne2

Per avere entrambe le colonne laterali della stessa larghezza (come nell'immagine sopra), impostate in entrambi i wrapper la width (larghezza) a 255 px:

#sidebar-wrapper {
  width: 255px;
  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 */
}

e

#new-sidebar-wrapper {
  width: 255px;
  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 */
}

mentre il main-wrapper sarà il seguente:

#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 */
  }

e l'outer-wrapper:

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

Spero di essere stato abbastanza chiaro. In futuro pubblicherò altri articoli sulla gestione delle colonne. Se avete qualche dubbio o non vi funziona qualcosa, lasciatemi un commento.

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

114 commenti:

Veronica ha detto...

Grazie :)

Anonimo ha detto...

Bravo questo sono i post che mi piacciono chiari e semplici ma soprattutto utuli

Tenebrae ha detto...

Grazie :) questo invece è il genere di commenti che piacciono a me ;)

LaCiccer ha detto...

Ciao scusami,
innanzi tutto: Bellissimo e utilissimo blog, complimenti e grazie! ;))
Ho seguito i tuoi preziosi consigli sulla dvisione in 3 colonne del blog (ho il modello Minima).
Le tre colonne sono comparse, ma non riesco a mettere la colonna dei post in mezzo alle due sidebar.
Come posso fare??
Grazie

Tenebrae ha detto...

LaCiccer, grazie a te :) La tua domanda sarà l'argomento di un post che avevo già in mente di pubblicare questa settimana.

Ti chiedo solo qualche giorno di pazienza :)

LaCiccer ha detto...

Grazie mille! (anche per il commento ^_^)
In realtà ho smanettato un po' e alla fine, come avrai potuto vedere, sono riuscita a centrare la colonnina dei post..
Solo... non riesco a capire come mai in: layout-->elementi pagina la suddetta colonna dei post mi rimane SOTTO la sidebar di destra (e non c'è stato verso di rimetterla a posto >:( )
So che probabilmente non ha importanza, ma è fastidioso a vedersi...
Ecco, sì, qui un altro aiutino ci starebe prooooprio bene!! ^_^
Grassie.

LaCiccer ha detto...

Errata corrige:
sidebar di SINISTRA..., sorry.. ;)

Tenebrae ha detto...

Avrai l'aiutino tranquilla :)

LaCiccer ha detto...

@tenebrae
Grazie, zio. ;-)

mytom ha detto...

Interessante il tuo blog, penso che ci tornerò spesso in futuro.
Ti chiedo una cosa: come fai ad inserire condici HTML nei post di blogger. Quando lo faccio io il motore di rendering di blogger mi inserisce in automatico il tag < br > a fire riga, rovinandomi tutto.
Ciao.

Tenebrae ha detto...

Sinceramente non ho mai avuto il problema che evidenzi tu. Ci sono diversi trucchi per inserire il codice html nei post di Blogger, ma ti dico subito che risolvi tutti i problemi utilizzando Windows Live Writer che sistema il tutto al posto tuo.

Fabietto ha detto...

Ciao Ragazzi mi serve un aiuto...seguo passo passo le istruzioni per inserire una colonna a sinistra nel layout del mio blog...ma non me la crea...come posso fare?non riesco a visualizzare nulla...mi potete aiutare cortesemente?il mio blog è http://pastamorefantasiae.blogspot.com ciao e grazie.Fabio

Tenebrae ha detto...

@fabietto: hai provato a guardare le info che ho dato qui?

Emme ha detto...

Grazie, seguendo le tue istruzioni sono riuscita ad aggiungere una colonna a sinistra. Mi sono accorta che lo stile del carattere è variato e nella pagina del layout, che prima era ordinato, ora le sezioni sono disordinate e l'insieme spostato a destra. Spero di essere riuscita a spiegarmi :-) Come rimediare? Emme

Anonimo ha detto...

utilizzo un modello ocra, ma non trovo il #sidebar-wrapper o almeno e del tutto privo del parametro width e se inserisco il
#new-sidebar-wrapper non mi compare alcuna nuova colonna

Tenebrae ha detto...

sicuro di aver cliccato su "espandi i modelli widget"?

c'è una seconda porzione di codice da inserire prima di vedere comparire la terza colonna, controlla il post

fammi sapere!

Anonimo ha detto...

Nel mio blog non riesco a trovare il div id e non capisco il prechè...

Daniele ha detto...
Questo commento è stato eliminato dall'autore.
Daniele ha detto...

Ah, dimenticavo... Il link del mio blog è: http://tanarossonera.blogspot.com/


Se puoi rispondimi qui: danieleceschi@yahoo.it

Daniele ha detto...

Ciao, complimenti per la guida.

Ora però ho un problema: il bannerone, o header, non si centra ma rimane scentrato...

Alla Fine Della Strada ha detto...

grandissimo e chiarissimo ;) rock'n'roll

Daniele ha detto...

Urgente: attendo risposta...

Tenebrae ha detto...

@daniele: risposto in separata sede

Riccardo ha detto...

Sei assolutamente un grande; ma potresti dirmi come fare a mettere la nuova colonna, che ho creato, a destra di quella centrale in modo tale da avere due colonne laterali su due lati diversi.

Riccardo ha detto...

Scusami tanto. Ho appena letto il tuo post "Gestire la posizione delle colonne in un template a 3 colonne " e ho trovato la risposta che cercavo.
grazie, continua così che vai alla grande.

Niclez ha detto...
Questo commento è stato eliminato dall'autore.
Tenebrae ha detto...

@niclez: ti rispondo qui così se qualcuno ha lo stesso problema trova la soluzione... hai provato a guardare in layout->elementi pagina se puoi aggiungere altri elementi? la terza colonna appena aggiunta è vuota

Nicola ha detto...
Questo commento è stato eliminato dall'autore.
Jordinero ha detto...

ascolta io ho seguito tutto x filo e x segno ma praticamente mi sposta la colonna dei post(#main-wrapper {)a destra e io invece la voglio mettere in posizione centrale...ho provato a fare di tutto ma nn ci riesco...grazie per l'aiuto,marco

Tenebrae ha detto...

@jordinero: hai letto questo post? forse trovi la risposta

Jordinero ha detto...

ciao...scusa ancora se ti disturbo...ma proprio non riesco...adesso ho la terza colonna ma la grandezza nn riesco bene a cambiarla!in più vorrei mettere i post al centro ma nn me li fa spostare...se hai tempo x aiutarmi questa è la mia mail jordinero@alice.it

Enri_Enfa ha detto...

Ciao!!Ho appena aperto il mio blog e siccome non so niente,ma proprio niente! di informatica ti ringrazio tantissimo per questi tutorial,ben fatti e soprattutto comprensibili anche da chi come me non capisce un cavolo!!!
ciao
Enri

Tenebrae ha detto...

@enri_enfa: grazie a te ;)

Daniela ha detto...

Ciao! prima di tutto grazie per le spiegazioni!!
Mi sono creata un blog di prova come hai suggerito per paura di fare danni nel mio visto che di informatica non capisco nulla!!
Però ora mi trovo la colonna dei post a sinistra e le altre due a destra, e anche seguendo i consigli che hai dato dopo agli altri non riesco proprio a spostarla!!
Dove ho sbagliato?

Ciao
Daniela

Daniela ha detto...

Ciao
Grazie, si, come hai visto ho risolto per la terza colonna però ho dovuto per forza usare il modello "minima" perchè quello che avevo in precedenza mi dava problemi!
Però tutto sommato anche questo non mi dispiace!!
Grazie sei un mito!!!
Daniela

Uafa ha detto...
Questo commento è stato eliminato dall'autore.
Anonimo ha detto...

perfetto

Tenebrae ha detto...

@uafa: qui trovi la risposta

Mackos ha detto...

ho fatto tutto , ma mi appare così:
http://immagini.p2pforum.it/out.php/i380966_Schermata.png
qualche dritta??

Tenebrae ha detto...

@mac: spaventoso! ma ti aspettavi tutt'e due colonne a sinistra (non sovrapposte) o ne volevi una a destra e una sinistra?

e originariamente com'era?

Fabrizio Favre ha detto...

Ma perchè blogger non ci mette dei template già fatti tra quelli che si può scegliere nei layout?

Tenebrae ha detto...

@fabrizio: intendi dire a 3 colonne? bella domanda

tra l'altro quei template risalgono alla notte dei tempi, avrebbero bisogno di un bell'aggiornamento

Fabrizio Favre ha detto...

Sì intendevo a tre colonne...

Steven ha detto...

Il tuo aiuto è stato importantissimo...Chiarissimo il procedimento e la spiegazione. Grazie mille per l'aiuto.CIAOOOOOOOOOOOOO!!!

Fede ha detto...

Funziona tutto, sei chiarissimo.
Adesso attendo te per sapere come posso unire le due sidebar solo nel tratto superiore, per inserire uno spazio pubblicitario largo quanto le due colonne. un po come il tuo sito, ma con il primo tratto molto piu corto. Cioè una sidebar unica sopra, e poi a due colonne sotto.
Sei forte, contiamo su di te ;)

alfonso ha detto...

ciao sono alfonso e volevo farti innanzitutto i complimenti poi volevo perti una domanda:Ho fatto tutto quelo che tu hai detto riuscendoci, solo che la terza colonna non è visualizzabile con fire fox, cosa devo fare?

Tenebrae ha detto...

@alfonso: non è visualizzabile o forse si mette sotto al resto?

veronica ha detto...

ciao volevo provare a fare queste tre colonne ma il mio template non porta le scritte che dici tu come devo fare?? mi puoi auitare?? grazie mille ciao veronica

Fior di Mela ha detto...

Il mio template scaricato da un sito da mio cognato (geniaccio informatico) è molto carino però con ogni minima modifica si sfasa... per una volta tanto vorrei fare da sola e aggiustare il blog senza la mano di mio cognato famigerato folletto del pc... nn voglio cambiare template solo creare una terza colonnina e allargare qll centrale e poi ho un altro problema mi è totalmente sparito il colore dello sfondo sebbene lo abbia cambiato 12 mila volte.. :°°(
dovrei rimanere così o si possono fare modifiche ... ti prego aiuta una niubba... il mio triplo blog è http://fiordimela.blogspot.com
se ci devvi un'okkiata e mi rispondessi ti ringrazierei con tt me stessa

Fior di Mela ha detto...

cavoletto ma qst post è vecchissimo spero cmq che mi risponda... grazie

Tenebrae ha detto...

@veronica: scusa del ritardo con cui ti rispondo, ma presto pubblicherò i template di base di blogger trasformati a 3 colonne, così potrai sostituire il tuo senza perdere niente

@fior di mela: ma hai provato a fare le modifiche con le tue mani e qualcosa non è andata?

comunque prima di fare esperimenti ricordati di fare il backup del template di blogger!

fiordimela ha detto...

ho seguito il tuo post in cui dicevi fosse possibile allargare le dimensioni della parte writable ma non appena ho tentato le parole si sono accavallate al disegno sottostante... io vorrei allargare la parte in cui scrivo i post e magari aggiungere un'altra colonna ... proprio come ci insegni a fare tu in qst e nell'altro post ... ma il mio template nn si modifica di conseguenza e rimane con quei riquadri standard... che pizza grazie 1000 per la tempestività e l'aiuto ti linkerei sul mio blog se fosse possibile :) grazie ancora :)
fiordimela

Fox ha detto...

Ciao da pochi giorni ho inaugurato il blog per la mia squadra di pallavolo e grazie ai tuoi consigli :D sono riuscita a fare tutte le modifiche che volevo e è venuto "quasi perfetto". Ho usato il template di blogger Thisaway (Rose) e ho aggiunto la terza colonna nella giusta posizione e altre cose.. Ma il bordo dell'header mi rimane spostato e da metà pagina i colori di sfondo si spostano! E non riesco a capire perchè! Il blog è http://tdcgirls.blogspot.com/, se puoi darmi un indizio ti ringrazio già da ora!

Fox ha detto...

Non importa ho risolto! Sempre grazie ai tuoi consigli per modificare gli sfondi! Grazie ancora! :D

ziva ha detto...

Chiro e semplice ! Grazie mille !!!!!!

io sono roberto ha detto...

Bravissimo, è stato molto utile, ma non riesco a mettere la colonna dei post al centro! Mi dici come devo fare? Aiutami!!!

Tenebrae ha detto...

@roberto: basta cercare, guarda qui ;)

Dada ha detto...

Io devo dire che spesso mi sento imbranata...ho provato a inserire la terza colonna :o
Eppure è spiegato benissimo.....
Ciao Dajana

Tenebrae ha detto...

@dada: il tuo template è decisamente particolare, tanto personalizzato che credo abbia bisogno di interventi più ampi per poter inserire la terza colonna

ma a me sembra carino così, fossi in te non lo toccherei ;)

Fabio ha detto...

Ciao Tenebrae, bellissimi i tutorial sul tuo Blog, peccato che nei miei due modelli non trovo i codici che dici...
uno e questo http://graficasfondiefilmati.blogspot.com/ su piattaforma Blogger, e questo è sul mio ftp http://www.effestudio.it/effeblog.html. Nessuno dei due ha i codici come riportato negli esempi, sapresti darmi qualche dritta per riuscire ad aggiungere la terza colonna? Mi spiacerebbe rifarmi tutte le personalizzazioni, link e quant'altro su un'altro template... Grazie

Dada ha detto...

Grazie Tenebra!
Anche a me piace molto così, ma c'è quel qualcosa.....che non mi convince!
Ma credo lo lascerò così.
Grazie ancora!
A presto D.

Tenebrae ha detto...

@fabio: nel primo caso probabilmente il codice del template è totalmente diverso e richiederebbe un intervento mirato... nel secondo caso il template di base è un minima ed è quello che ho usato io per creare un template a 3 colonne nell'esempio... assicurati di aver selezionato "Espandi i modelli widget"... e se ancora non lo trovi, dimmi che browser usi, chrome ha qualche problema

@dada: a presto!

Anonimo ha detto...

Non sei solo chiaro,sei mitico!Prima di leggerti,non ero mai riuscita a cambiare nulla con spiegazioni di altri!!

Tenebrae ha detto...

grazie anonima!

Fabio ha detto...

Ciao Tenebrae e grazie per la risposta, purtroppo nel blog http://www.effestudio.it/effeblog.html non ho l'opzione "Espandi i modelli widget" perchè è sul mio ftp, infatti sotto "Modello" al tab "Personalizza Design" ci trovo la scritta "...la personalizzazione dei layout di Blogger non è supportata per i blog su server non Blog*Spot. Per utilizzare i layout, il tuo blog deve risiedere su blogspot.com (servizio di hosting gratuito di Blogger) o su un dominio personalizzato (indirizza il tuo nome di dominio registrato al tuo blog)."

Come Brovser usoFirefox ;-)

miky ha detto...

ok tutto alla perfezione,sei stato chiarissimo sono riuscito a modificare il blog così come hai spiegato,però ti volevo chiedere è possibile lasciare la colonna dei post centrale e le due più piccole ai lati? eventualmente puoi postare come si fà?
grazie mille e ciao

Tenebrae ha detto...

@miky:ne ho palrato qui ;)

enrico ha detto...

Ciao scusami ma ho un problema, non riesco ad aggiungere la terza colonna. Ho notato che quando incollo la porzione di codice sopra div id='sidebar-wrapper
e poi faccio salva, scompare misteriosamente il pezzo b:section (ho dovuto omettere i segni <>, altrimetni non mi faceva postare il commento!) .
Secondo te qual'è il problema?grazie, enrico

Tenebrae ha detto...

@enrico: questa è nuova! facciamo così: accertati di aver selezionato "espandi i modelli widget" e dimmi che browser usi

enrico ha detto...

si ho selezionato "espandi i modelli widget" infatti le modifiche ci sono nel html però quella parola contniua a scomparire!cmq utilizzo explorer!

filippo ha detto...

(^_^) grazie mi sei stato di grande aiuto (-_^)

Tenebrae ha detto...

@enrico: quando scompare il codice è perchè il punto di intervento non è quello giusto :\

@filippo: prego!

liv333 ha detto...

Ciao, come faccio a spostare una colonna da destra a sinistria? cosa devo omettere nella tua guida?

il template che vorrei usare per il mio blog è questo: http://www.eblogtemplates.com/red-stamp-blogger/?replytocom=7466#respond

Anonimo ha detto...

Ottimo tutorial, sono riuscito a fare quasi tutto con queste guide, tranne una:
come faccio ad aumentare lo spazio tra la colonna sx e quella centrale (vedi "freccia rossa" nell'immagine linkata)?
http://img140.imageshack.us/img140/9826/screenkal.jpg
E come faccio a gestire anche lo spazio indicato dalla freccia blu?
Grazie dei consigli e complimenti per questo blog.

Gianpy ha detto...

io non riesco proprio ad aggiungere la colonna sulla sinistra, al massimo mi sono venute due colonne a destra...:( questo è il mio blog http://gianpy1988playlist.blogspot.com/
, chi può aiutarmi?

Tenebrae ha detto...

@gianpy: puoi trovare qui la risposta

Tania ha detto...

I miei complimenti! Grazie alle tue spiegazioni chiarissime sono riuscita a inserire la colonna a sx nel mio neonato blog, sei grande!!!

Alessandra ha detto...

Wou grazieee sei davvero chiarissimo. Mi chiedevo il modo per mettere i post al centro e i sidebar ai lati....cmq adesso faccio un giretto, vediamo se trovo quel che cerco.Smack

Luciano Ardoino ha detto...

Very good!

by dadimiva ha detto...

Grazie!
Ci sono riuscita seguendo le istruzioni esattamente come le hai spiegate. Ragazzi può sembrare una perdita di tempo ma creare un blog di prova è utile... il mio template è l' 897 di Blogger e sono riuscita ad inserire la terza colonna senza problemi. Espandendo il widget e utilizzando CTRL F ho ricercato i punti suggeriti per modificare le stringhe. A volte non ho trovato subito quello che cercavo ed allora ho inserito porzioni di frase per ampliare la ricerca. Non sono, come appunto spiegato da Tenebrae, sempre tutti uguali. Ora tenterò di spostare la nuova colonna a sx seguendo le istruzioni di questo blog.
Grazie per la semplicità e la chiarezza! Ci sono riuscita persino io che non ne so nulla di queste cose... :D

ros13 ha detto...

Buona guida,l'ho seguita per espandere il mio nuovo blog...good!

@nn@ ha detto...

Tenebrae, ho modificato il template del blog di un'amica (grazie a te, passo per una che "ne sa"! =)) ) eeguendo le tue indicazioni.
Prima ho cambiato la larghezza del template, poi ho creato la terza colonna e l'ho spostata al centro. E' andato tutto bene, ma la colonna centrale risulta troppo appiccicata a quella di sinistra, la nuova per intenderci.
Le dimensioni sono:
l'outer-wrapper 950 px
la header-wrapper 900 (mi piaceva così)
il main-wrapper 480 px
e le 2 colonne laterali entrambe 220 px

ho provato a ridurre le dimensioni delle colonne, ma la colonna centrale, più larga o più stretta, sta sempre appiccicata lì... che fare?

autore ha detto...

Fantastico!!! ma se voglio il contenitore dei post nella colonna di mezzo come faccio?
Grazie!

autore ha detto...

Ho trovato il Post che ne parla e ci sono riuscita. Grazie ancora!

@nn@ ha detto...

ho risolto il problema della colonna "appiccicata" utilizzando il "padding" ;) (seguendo le indicazioni del tuo post :-* )

prodigy911 ha detto...

salve credo di avere un template diverso e complicato perche af esempio non trovo la stringa, #outer-wrapper (widget espansi), per allargare o restringere la larghezza, quindi non so se poi va a compromettere l'aggiunta della terza colonna. Ho eseguito la procedura alla lettera ma in elementi pagina è rimasta sempre 1 colonna; il mio scopo è quello di aggiungere una colonna alla sinistra del contenitore dei post.

Questo è il mio blog: http://lollosecrets.blogspot.com/

saluti e grazie per il suo tempo

Gabriele Gualco ha detto...

Ciao, Spero tanto tu sia tornato dalle vacanze ;)
ti vorrei chiedere questo: dopo una fatica mostruosa per far risultare la terza colonna, praticamente per magia sono riuscito a tirare fuori la quarta! e funziona! la mia idea è far aprire il blog al centro e mostrare le due colonne che ho già (altrimenti potrei stringerle e metterci una terza da 180px ma mi dispiacerebbe un pò) e lasciare le altre due fuori visione per schermi normali con la scroll bar sotto, mentre negli schermi più spaziosi si vedrebbero tutte e quattro. Sai come far aprire la pagina al centro? e come spostare la barra di blogger? Perdona la lunghezza a presto Gabriele

Frax ha detto...

Evviva grazie a questo sono riuscito a farcela! Ma vorrei sapere come si fa a spostare la nuova colonna a sinistra del blog in modo tale da avere il blog al centro e le due colonne laterali!. C'ho provato ma non ci riesco! Non potreste dirmi come si fa?
P.s. ho aggiunto il vostro link nel mio blog di Blogger ;)

attirma ha detto...

Grazie infinite!
Ciao, annA

Claudia ha detto...

sei troppo gentile :)
sei troppo chiaro ;)
sei troppo bravo, :D
quasi quasi mi sento un programmatore ahahahahahah
Grazie infinite
cla

ferrOnline ha detto...

Ciao
ho creato il template a tre colonne ma si verifica una cosa strana. Nella pagina principale, dove sono l anteprime dei post, la colonna di destra si sposta sotto il main wrapper, mentre se clicco su un singolo post la pagina visualizza la colonna correttamente al suo posto. Ho provato a modificare le larghezze sia del main che del outer che delle colonne ma, tranne le dimensioni, la visualizzazione è sempre la stessa.
Sai aiutarmi?
Ciao e grazie

u velto ha detto...

grazie!!

Piscina Comunale Di Ascoli PIceno ha detto...

Ciao,
grazie alle tue tecniche, sono migliorato in molte cose, ora ti chiedo se mi dici cortesemente come cambiare questo layout da largheza fissa a larghezza variabile e eventualmente aggiungere una colonna. Perdonami ma proprio non trovo la soluzione.

Grazie Mille

Stefano "stepal81@hotamil.it"

Saluti

Piscina Comunale Di Ascoli PIceno ha detto...

Ciao,

scusa, ma è la prima volta che ti scrivo e già ho fatto la figuraccia!!!!

Grazie alle tue tecniche, sono migliorato in molte cose, ora ti chiedo se mi dici cortesemente come cambiare questo layout "http://btemplates.com/2009/09/02/chucky/demo/" da larghezza fissa a larghezza variabile ed eventualmente aggiungere una colonna. Perdonami ma proprio non trovo la soluzione.

Grazie Mille e questa è la mia mail!!

Stefano "stepal81@hotamil.it"

Saluti

Sarah ha detto...

Sei stato fantastico è da una settimana che cercavo di farlo senza nenche un risultato! Ma ora se hai fatto 30 devi fare 31...come faccio a spostare una delle colonne "sidebar-wrapper 250px" a sinistra, cioè averne una da una parte e una dall'altra, lasciando lo spazio per i post al centro? Grazie ancora sei mitico, è inutile bisogna ammetterlo ,tra tutti quelli in rete italiani e non...sei er meio!

darkholder ha detto...
Questo commento è stato eliminato dall'autore.
Stella di Neve ha detto...

ciao, le tre colonne ci sono, ma gli elementi altre due mi finiscono sotto i post! mi spiego meglio: all'inizio ho la colonnona dei post, poi, se scendo finchè non sono finiti ho le due colonnine. Perchè?

Gisella ha detto...

Ciao, piacere di conoscerti, ho messo il tuo bannerino nel mio blog perchè, per un'asinella informatica come me, sei prezioso.
Ho allargato il template rimanendo, però, con 2 colonne perchè non mi è chiaro il passaggio che dice di "incollare subito prima delle righe sopra la seguente porzione di codice.
Non mi è chiaro se devo lasciare la parte esistente e PRIMA di quella aggiungerne un'altra uguale cambiando solo la porzione che indichi, oppure aggiungerne una nuova facendo precedere la porzione al codice che segue.
Se mi chiarisci questo passaggio, parli di incollare.
Scusami ma sono proprio "digiuna".
Sono riuscita, però ad allargarlo e già così mi piace!
Il blog è ancora chiuso (per ovvi motivi), ti lascio la mia mail o verrò a leggere la risposta.
Grazie.

Davida ha detto...

Buon giorno, ho trovato oggi le tue preziosissime informazioni di come impostare 3 colone, ho provato mille volte, ma sembra che non funziona. Vorrei semplicemente chiederti un aiuto, non è che me lo potresti fare tu ?!
Grazie mille per la tua gentile risposta, Davida
PS. mio Blog : http://piccolocuore.blogspot.com/

Davida ha detto...

oh...sono ancora io, la ragazza del commento precedente. Adesso ho letto le tue pagine del testo "Da leggere prima di inviarmi una mail o lasciare un commento" e mi è venuto quasi da piangere ! Ti capisco perfettamente, ma ci speravo tanto nel tuo aiuto...
Ti prego e supplico, dammi un aiuto per queste 3 colone e io vado subito a sfornare per te la torta più buona che esiste !!
Con tanta speranza, Davida

Davida ha detto...

Ci sono riuscita !!!!!!!!!
Grazie mille, per la spiegazione precisa :-))
Un piccolo detaglio, dovrei centrare meglio la colona centrale (adesso è troppo attaccata alla colona sinistra).
#main-wrapper {
width: 410px;
float: $startSide;
Cambio float ?
Grazie per la risposta, Davida
PS. ho inserito tuo link nel mio Blog !

Lauradv ha detto...

Creando la terza colonna noto che le fotografie del post (colonna centrale) non sono più condivisibili su FB.
Le uniche foto che posso condividere sono solamente quelle della colonna di destra.
Dove ho sbagliato?
Grazie
Laura

Tenebrae ha detto...

@davida: si, prova a cambiare float. grazie per aver linkato il mio blog, aggiungerò il tuo all'elenco dei blog che mi linkano!

@lauradv: come ti ho risposto da un'altra parte, potrebbe dipendere dal template e non da un tuo errore

hai provato con un altro browser se hai lo stesso problema?

Lauradv ha detto...

@ Orazio, grazie per la risposta! Sì oltre a firefox ho provato anche con explorer ma la problematica persiste. Il template da cui sono partita per creare la terza colonna era il Minima.

Clo ha detto...

Perfetto! E se ci sono riuscita io che sono una frana con il PC, significa che TU SEI UN GENIOOOOOOOO!

Tenebrae ha detto...

@clo: :)

marbe ha detto...

Ciao ti disturbo perché non riesco a trovare nei vari post se hai già dato questa informazione.Visualizzando per caso il mio blog con google crome ho visto che la colonna di destra, pur rimanendo allineata, finisce in fondo alla pagina mentre le altre due (post e sinistra) restano al loro posto, invece su IE è tutto a posto. C'è un modo per rimediare?
Se può esserti utile l'indirizzo è: http://ilpozzodeimieipensieri.blogspot.com/
So che sei molto preso perciò, grazie comunque.. mi sei già stato molto utile per creare il blog. anche se è semplicissimo senza tante cose per me è un bel traguardo.

Claudio ha detto...

Salve,
ho un blog con modello "Tic Tac" (quello verde).
Ho seguito tutta la prodedura ma non inserisce la terza colonna.
Per caso mi sapete dire come fare? ho urgente bisogno della terza colonna.
In rete ho trovato anche un file .xml che basta caricare sul blog: il risultato è il blog a 3 colonne come vorrei ma mi si cancellano tutti i widget e i post che ho finora creato.
Quindi come faccio ad aggiungere la terza colonna sul blog che ho senza perdere niente?
Grazie


Grazie.

dro-san ha detto...

Ciao! Ho appena usato i tuoi consigli per ampliare la larghezza dei wrapper e inserire la terza colonna e spostarla. Insomma: GRAZIE MILLE!
Solo una cosa: ora ho i margini del main wrapper troppo vicini a quelli della colonna di destra. Dove devo agire per cambiarli e rendere le colonne più distanti fra loro? Oppure basta ridurre la larghezza del main wrapper (che si trova tra due colonne)?
Ultimissima cosa: almeno per me, con la posizione "float: left" non funzionava lo spostamento a sinistra della nuova colonna, mentre sono riuscito a spostarla con "$startSide".
ancora grazie!

Paoletta ha detto...

Ciao,una guida utilissima,e molto chiara.
Ho fatto quello ke hai detto per aggiungere la terza colonna...lo spazio sono riuscita a crearlo,ma la terza colonna non c'è
Magari ho sbagliato qualcosa,ora continuo a smanettraci,però volevo ringraziarti per la guida.
Ti farò sapere se ci riesco .
Ciao

Paoletta ha detto...

mi è sorto un dubbio....sarà mica perchè ho usato chrome?

idefix973 ha detto...

mai avrei pensato di saper trasformare il mio blog in tre colonne! Grazie!

Linda ha detto...

Ciao! ti volevo veramente ringraziare!! il mio primo approccio con il linguaggio HTML era stato come leggere geroglifici, ora sono riuscita a creare 3 colonne sul mio blog, ora cercherò anche di metterne una a destra e una a sinistra, ma finalmente inizio a capire a cosa si riferiscono alcuni dei codici che leggo

Fangyaya ha detto...

fangyanting20150926
gucci, http://www.borseguccioutlet.it/
prada handbags, http://www.pradahandbagsoutlet.co.uk/
ray ban sunglasses, http://www.raybansunglassesonline.us.com/
nba jerseys, http://www.nbajerseys.us.com/
replica watches, http://www.replicawatchesforsale.us.com/
moncler coats, http://www.moncler.us.com/
michael kors factory outlet, http://www.michaelkorsfactoryoutletonline.com/
ralph lauren shirts, http://www.poloralphlaurenshirts.us.com/
oakley sunglasses, http://www.oakleysunglasses-outlet.us.com/
vans shoes, http://www.vans-shoes.cc/
oakley sunglasses, http://www.oakleysunglassesdiscount.us.com/
the north face outlet store, http://www.thenorthfaceoutletstores.org/
beats by dr dre, http://www.beatsbydrdre-headphones.us.com/
links of london, http://www.linksoflondons.co.uk/
ugg uk, http://www.cheapuggboots.me.uk/
prada shoes, http://www.pradashoes.us/
soccer jerseys, http://www.cheapsoccerjersey.net/
tiffany outlet, http://www.tiffany-outlet.us.com/
longchamp outlet, http://www.longchampoutlet.name/
hollister uk, http://www.hollistershirts.co.uk/
nike huarache, http://www.nikeairhuarache.org.uk/
adidas outlet store, http://www.adidasoutletstore.us.com/
juicy couture outlet, http://www.juicycoutureoutlet.net/
ed hardy clothing, http://www.edhardy.us.com/
michael kors bags, http://www.michaelkorsbags.uk/
coach outlet online, http://www.coachoutletonline.in.net/
true religion jeans, http://www.truereligionjean.in.net/
tory burch shoes, http://www.toryburchshoesoutlet.com/
mulberry outlet, http://www.mulberryoutlet.com.co/
swarovski outlet, http://www.swarovski-outlet.co.uk/


Prima di lasciare un commento, leggete qui

Posta un commento