Ciao amici...Continuiamo con la nostra catena di tutorial, per quanto riguarda la personalizzazione del template.
Oggi vedremo come aggiungere la terza colonna ad un template a due colonne.
Prima di seguire questo tutorial vi consiglio di dare un'occhiata al tutorial precedente: - Salvare e cambiare il template del blog.
Il template a due colonne che ho scelto di modificare, s'intitola Minima (il primo che m'è capitato sotto tiro), creato da Douglas Bowman.
VI CONSIGLIO DI GUARDARE PRIMA IL VIDEO TUTORIAL (che si trova in fondo), COSI SARA' PIU' FACILE CAPIRE E MODIFICARE IL TEMPLATE.
Prima di iniziare, vediamo una mappa che ho creato per farvi capire, quali sono le voci che dobbiamo cercare e modificare:
Come vediamo dalla mappa, outer-wrapper è il contenitore di tutto il template, cioè, andando a modificare la larghezza (width) di outer-wrapper modifichiamo la larghezza (width) di tutto il template, che contiene l'header-wrapper(intestazione), le colonne laterali(sidebar) + quella centrale(main-wrapper) ed in fondo si trova footer(piè di pagina).
La procedura che seguiremo per modificare il template ed aggiungere la teza colonna è:
1a – header- wrapper
2a – outer- wrapper
3a – duplicare e rinominare la sidebar
4a – footer
5a – ID (identification)
 
image

Iniziamo...Come prima cosa clicchiamo su “Modifica HTML”.

image

1 – cerchiamo la voce header-wrapper e aumentiamo la larghezza(width):

prima dopo
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:2px solid $bordercolor;
}

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

2 - cerchiamo la voce outer-wrapper e aumentiamo la larghezza(width) da 660px in 900px:

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

3 – cerchiamo il blocco di codice (vedi sotto), che sarebbe la colonna destra:

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

Lo duplichiamo tramite copia/incolla (a - lo selezionate > b- cliccate sopra con il tasto destro del mouse > c – cliccate su copia > d - lo incollate dove finisce il codice appena copiato).

NB: IN CASO DI DUBBI DATE UN OCCHIATA AL VIDETUTORIAL.

Rinominate le due #sidebar-wrapper in #right-sidebar-wrapper(colonna destra) e #left-sidebar-wrapper(colonna sinistra).

Sotto c'è il risultato finale:
#right-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 */
}
#left-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 */
}

Adesso che abbiamo creato una parte del codice delle due colonne, dobbiamo modificare il loro posizionamento destro/sinistro(right/left), modificando semplicemente la proprietà “float”, grazie alla quale possiamo spostare un elemento su uno dei lati (destro o sinistro) del suo elemento contenitore
(outer-wrapper). Sotto c'è il risultato finale:
#right-sidebar-wrapper {
width: 220px;
float: right;
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 */
}
#left-sidebar-wrapper {
width: 220px;
float: left;
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 */
}

Cambiamo anche il posizionamento della float, della colonna centrale “main-wrapper”, modificandola in float: left; Sotto c'è il risultato finale:
#main-wrapper {
width: 410px;
float: left;
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 */
}
Per avere una distanza uguale tra la colonna centrale(main-wrapper) 
con quella destra (right-sidebar) e quella sinistra (left-sidebar) 
dobbiamo inserire i margini(vedi mappa): 
margin-left: 25px; a sinistra per right-sidebar-wrapper 
margin-right: 25px; a destra per left-sidebar-wrapper.
Perché 25px?
#main-wrapper {width: 410px;
+
#left-sidebar-wrapper { width: 220px;
+
#right-sidebar-wrapper { width: 220px;
=
850px
la larghezza del template è 900px
950px – 850px = 50px / 2 = 25px

Sotto c'è il risultato finale:
#right-sidebar-wrapper {
margin-left: 25px;
width: 220px;
float: right;
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 */
}
#left-sidebar-wrapper {
margin-right: 25px;
width: 220px;
float: left;
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 */
}

4 – Troviamo la voce footer(piè di pagina) e aumentiamo la larghezza(width):

(come abbiamo fatto con header e outer-wrapper)

prima dopo
#footer {
width:660px;
clear:both; margin:0 auto;
padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center;
}
#footer {
width:900px;
clear:both; margin:0 auto;
padding-top:15px; line-height: 1.6em;
text-transform:uppercase; letter-spacing:.1em; text-align: center;
}

5 – Adesso andiamo a modificare ID(identification):

Cerchiamo la stringa sotto:

<div id="'sidebar-wrapper'">

<b:section class="'sidebar'" id="'sidebar'" preferred="'yes'">

Cambiamo le due id in blu con id="'right-sidebar-wrapper' e id="'right-sidebar'

Sotto c'è il risultato finale:

<div id="'right-sidebar-wrapper'">

<b:section class="'sidebar'" id="'right-sidebar'" preferred="'yes'">

Copiamo( tasto destro copia/incolla) il codice appena modificato e cerchiamo la stringa:

<div id="content-wrapper">

Subito sotto inseriamo il codice appena copiato, modificando

id="'right-sidebar-wrapper' e id="'right-sidebar' in

id="'left-sidebar-wrapper' e id="'left-sidebar'

Sotto c'è il risultato finale:

<div id="'left-sidebar-wrapper'">

<b:section class="'sidebar'" id="'left-sidebar'" preferred="'yes'">

Subito sotto il codice appena modificato inseriamo la chiusura di:
</b:section></div>
che sarebbero la chiusura del blocco section e div.
Sotto c'è il risultato finale e completo:
<div id="'right-sidebar-wrapper'">
<b:section class="'sidebar'" id="'right-sidebar'" preferred="'yes'">
</b:section></div>
Oleeeeeee....con il codice per oggi abbiamo finito...
ah dimenticavo...Salviamo il lavoro cliccando su SALVA MODELLO”!!
Di solito, dopo aver fatto delle modifiche nel codice html, sarebbbe prudente(io direi obbligatorio), fare un'anteprima, cliccando su “ANTEPRIMA” prima di salvare il lavoro, ma in questo caso non funzionerebbe, in quanto, la colonna sinistra(quella appena creata), non contiene nessun widget(elemento), è vuota.
Ma... pazienza...Adesso andremo ad aggiungere un elemento alla colonna sinistra, cosi possiamo vedere il frutto del nostro lavoro..
6 – Clicchiamo su “Elementi pagina” ed già qui, se avete fatto tutto bene, vedrete il contenitore della colonna sinistra.

image

7 - Cliccate su “Aggiungi un GADGET”.
Nella finestra appena aperta scegliete un gadget a vostro piacimento(io ho scelto “Newsreel”, le news di google. Cliccando sul link del gadget scelto si apre un'altra finestra dove inseriamo un titolo al widget(non è obbligatorio, potete lasciare vuoto il titolo) e clicchiamo su Salva...
E alla fine cliccate su “Visualizza blog” e godetevi la vostra fatica...
IL videtutorial è completo e spiega in modo chiaro e specifico, tutti i passaggi di questo tutorial nei minimi dettagli. Buona visione.........


Al prossimo tutorial vedremo come aggiungere uno sfondo alle colonne...
Ciauzzzzzzzzzz.....


Articoli correlati per categorie




 Abbonati gratis a questo blog      

17 commenti

  1. Dino // 30 marzo 2009 19:03  

    Con il tuo aiuto sono riuscito ad inserire la terza colonna a sinistra nel mio blog:
    http://nessunarisposta.blogspot.com.
    Sicuramente qualcosa è andata storta perchè come puoi vedere i caratteri delle sidebar sono grandi e non riesco a modificarli e le distanze tra la parte centrale e le due colonne non sono giuste.
    Mi puoi aiutare?
    Ti ringrazio

  2. bestar // 30 marzo 2009 23:41  

    Ciao Dino...Sono contento di averti dato una mano..per quanto riguarda la tua sidebar, niente è andato storto...soltanto devi avere un po di pazienza.se vai a leggere il post:
    http://bestar-space.blogspot.com/2009/03/creare-un-blog-iniziando-con-creare-un.html
    capirai che il prossimo tutorial sarà riguardo alla sidebar..come scrivi nel tuo blog: tempo permettendo..a domani..

  3. luis-brianza // 4 novembre 2009 09:26  

    <span><span style="text-decoration: underline;">sera bestar ho tentato di inserire la terza colonna ma guardando bene la tua spigazione a mè mancano diverse voci che non corrispondono alle tue spiegazioni su come modificare il templare se puoi quando vuoi aiutarmi io sono quì te ne sarò grato cia luis
    </span></span>

  4. bestar // 4 novembre 2009 10:14  

    Ciao Luis... 
    ho controllato il codice della tua template e ti garantisco che è quasi 99% uguale al codice del tutorial... 
    esempio: 

    <span style="text-decoration: underline;">tuo codice:</span>

    #outer-wrapper {
     
    background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 250px 50px;
     
    width:700px;
     
    margin:0 auto;
     
    text-align:left;
     
    font:normal normal 100% Verdana,Arial,Sans-Serif;
     
    }
     
     
    <span style="text-decoration: underline;">codice tutorial:</span>
     
    #outer-wrapper {
     width: 660px;
     margin:0 auto; padding:10px; text-align: $startSide; font: $bodyfont;
     }
     
    <span style="text-decoration: underline;">altro tuo codice:</span>
     
    #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 */
     
    <span style="text-decoration: underline;">altro codice del template:</span>
     
    #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 */
    ____________________________________________
     
    come puoi notare, è quasi uguale..
     
    l'unica cosa è: header (manca del codice)
     
    <span style="text-decoration: underline;">tua header:</span>
     
    #header-wrapper {
     
    display: none;
     
    <span style="text-decoration: underline;">va sostituito con:</span>
     
    #header-wrapper {
     width:700px;
     margin:0 auto 10px;
     border:2px solid $bordercolor;
     
    }
     
    e dopo prossegui con il tutorial...
     
    Nota Bene (Importante): Salva la tua template, prima di fare qualiasi modifica...cosi in caso di errori, puoi ripristinare la tua template originale..
    fammi sapere...
    a presto

  5. luis-brianza // 4 novembre 2009 16:47  

    ciao bestar sono contento che mi hai risposto su come fare la terza colonna
    ma ti devo dire malgrado il mio impegno che ho provato e straprovato punto
    per punto,mi esce sempre questo errore:
    Stato non � possibile Salvare il modelloCorreggi l'errore qui sotto, Quindi
    invia Nuovamente il modello.
    Dichiarazione variabile non valida nell'interfaccia della pagina: La
    variabile Viene utilizzata ma non Definita. Inserimento:
    bordercolor2009/11/4 JS-Kit.com Comments
    js-kit-m2c-NASBTNPOGVKUPTLD0BCANKPU4P2FCM1BB1UJGLCB24GU36CQE4P0@reply.js-kit.com
    ciao bestar ti ringrazzio per il tuo aiuto .luis

  6. Marco // 30 dicembre 2009 12:04  

    <span style="font-family: Calibri;">Ciao e buone feste anche a te </span><span style="font-family: Calibri;">Una cosa però non ho capito se faccio diventare il template a 3 colonne poi come faccio a mettere x esempio le pubblicità sulla colonna creata?Dal layout non va</span>

  7. bestar // 30 dicembre 2009 12:27  

    Ciao Marco...
    Per spostare gli widget (compreso le pubblicità) puoi farlo manualmente...
    Supponiamo che voresti inserire un widget con HTML/JavaScript...Eempio: un Contatore per il blog:
    La procedura è:
    <span style="display: inline;">Vai in Layout, clicki su Aggiungi un gadget, poi su HTML/JavaScript e inserisci il codice e il nome</span> Contatore e alla fine lclicki su Salva.

    <span style="color: #cc0000;">NB: Quando inseriamo Widget (o qualsiasi codice) nel blogger, HTML crea un ID(o </span>identificatore) <span style="color: #cc0000;">univoco dell'elemento/widget.</span>

    Adesso per spostare il Contatore (ES: dalla colonna sinistra a quella destra (con il drag&drop/trascina da Layout da errore) il trucco è:
    Vai su Modifica HTML <span>per visualizzare il codice HTML.</span> e cerca la voce Contatore (se usi Firefox premi Ctrl+F e scrivi Contatore a destra della voce Trova nella barra in basso e premi Invio)...
    Dovresti cercare una stringa simile:

    <b:widget id='HTML7' locked='false' title='Contatore' type='HTML'>

    dove:

    id='HTML7' è l'ID che può essere diverso (HTML+Numero)
    title='Contatore' è il nome assegnato al widget

    Dopo aver trovato il codice sopra, evidenzialo, clicca con il tasto destro, poi su taglia.

    Supponiamo di avere l'widget "Archivio Blog" nella colonna destra. il codice è:
    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
    Adesso devi soltanto incollare il codice copiato prima sopra o sotto Blog Archive.

    Esempio:

    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
    <b:widget id='HTML7' locked='false' title='Contatore' type='HTML'>

    In questo caso ho spostato il Contatore nella colonna destra sotto l'widget "Archivio Blog".
    Alla fine clicca su "Salva Template" de il gioco è fatto.

  8. Simona // 10 febbraio 2010 19:26  

    Uffa sono 3 volte che ci riprovo ma non funziona..

  9. bestar // 10 febbraio 2010 19:37  

    ciao Simona....
    dov'è il problema...
    inviami il link del tuo blog...e se posso ti aiuto volentieri...
    a presto...
    fammi sapere...

  10. luis-brianza // 28 luglio 2010 22:43  

    Ho iniziato a usare FriendCameo Video Chat, un'applicazione presente su Facebook, e penso che piacerebbe anche a te. Facebook è un sito Internet che ti permette di rimanere in contatto con i tuoi amici, condividere foto, usare applicazioni e altro ancora.
    Grazie,
    Luigi
    Per iscriverti a Facebook, segui questo link:
    http://www.facebook.com/p.php?app_id=130253496987065&i=100001336422769&k=Z6E3Y6TXSZ3EXDMJPB63QUUVQWBGWZYNUWHQ1G3OQ2&r
    Hai già un account? Aggiungi questo indirizzo e-mail al tuo account:
    http://www.facebook.com/n/?merge_accounts.php&e=js-kit-m2c-nasbtnpogvkuptld0bcankpu4p2fcm1bb1ujglcb24gu36cqe4p0%40reply.js-kit.com&c=f979abf7f1bfcd9ca79306f0fa0f6b2c
    =======================================
    È stato inviato un invito a iscriversi a Facebook a js-kit-m2c-nasbtnpogvkuptld0bcankpu4p2fcm1bb1ujglcb24gu36cqe4p0@reply.js-kit.com da parte di Luigi Sirtori. Se non vuoi ricevere questo tipo di e-mail da Facebook in futuro, clicca sul link sottostante per annullare l'iscrizione.
    http://www.facebook.com/o.php?k=2c868b&u=100001452214876&mid=2ba939fG5af367094a5cG0G8
    Facebook, Inc. P.O. Box 10005, Palo Alto, CA 94303

  11. wale // 24 marzo 2011 16:44  

    Bestar!ho bisogno del tuo aiuto..ho cercato disperatamente i codici che tu dici nell'html del mio blog..ma non riesco a trovarli..): mi potresti aiutare???
    http://scaricagratuitamenteifilm.blogspot.com/ questo è il link
    voglio aggiungere l'altra colonna,senza modificare lo spazio dei post!Grazie..

  12. bestar // 24 marzo 2011 17:47  

    @ wale:
    ti consiglio di trovare template gia pronte a 3 colonne... fai prima...
    es: http://www.eblogtemplates.com/templates/blogger-templates/

  13. wale // 28 marzo 2011 09:59  

    Grazie della risposta ma i templates già pronti non sono semplici da modificare..quindi vorrei chiederti se conosci un sito dove spiega come costruire un template..magari iniziando dalle colonne..e dall'intestazione..>.<

  14. Anonimo // 23 febbraio 2013 23:11  

    Thankѕ fοr finally wгitіng about > "Aggiungere la Terza Colonna" < Loved it!

    Review my site; New
    Bingo Siteѕ

    My web site > New Bingo Sites

  15. Anonimo // 28 febbraio 2013 03:00  

    Thаnks for fіnаlly talkіng about > "Aggiungere la Terza Colonna" < Liked it!

    Have a look at my blog - ρаyday loan
    My web site - payday loan

  16. Anonimo // 1 marzo 2013 19:04  

    Its lіke уou read my mind! You seеm tо grasp a lot approximately this, lіke yοu wrote the eboоk in іt or
    somethіng. I feel that you can do with a few ρ.
    c. to power the mesѕage home a little bit, hοwever other thаn that, that is gгeat blog.
    A fantastic read. I will cеrtаіnly be
    back.

    Here is my wеblog ... chlamydia test

  17. Anonimo // 2 marzo 2013 20:38  

    ӏ drop a leave a responѕe when I
    apprеciate а post on a ѕite or I have ѕomething to vаluаble to contгibutе to the convеrsаtion.
    ӏt is a reѕult of the fire cоmmunісated in the ρoѕt I looked at.
    And after this агticle "Aggiungere la Terza Colonna".
    I wаs actually excіted enοugh to pоst a comment :-) I do have 2 questionѕ for
    you if you do not mind. Is іt only me or do some οf thesе rеmarks look like left by brain dead folκs?
    :-P And, if you aгe poѕting on additional sites, ӏ'd like to keep up with you. Would you make a list the complete urls of your shared pages like your Facebook page, twitter feed, or linkedin profile?

    Feel free to visit my blog post: personal loans
    my webpage :: personal loans

Posta un commento