AGGIUNGERE LA TERZA COLONNA AL NOSTRO BLOG

Premessa, sono riuscita nell’impresa leggendo le istruzioni trovate in internet, ho ancora molto da imparare sul linguaggio html… un grande aiuto mi viene dalla mia amica Darkmoon, con lei ho iniziato a capire come e dove modificare il layout del blog, mi ha segnalato diversi siti con tutorial dopodiché ho iniziato a pasticciare e qualche risultato l’ho ottenuto. Ho aggiunto widget (un po’ alla volta vi segnalerò i links), ho cambiato colore al template e ora ho aggiunto la terza colonna. Ora Veniamo all’argomento… primo passaggio andate in: - Personalizza Poi - Modifica HTML Copiate tutto il modello e salvatelo in word, serve ad evitare di perdere per sempre il vostro template e tutto quello che ci sta dentro. Ora potete iniziare : 1 - Cercate questa riga: div id='sidebar-wrapper'> b:section class='sidebar' id='sidebar' preferred='yes'> E sostituitela con questa: div id='right-sidebar-wrapper'> b:section class='sidebar' id='right-sidebar' preferred='yes'> 2 – Ora cercate questa: div id='content-wrapper'> E sostituitela con quest'altra: div id='content-wrapper'> div id='left-sidebar-wrapper'> b:section class='sidebar' id='left-sidebar' preferred='yes'/> /div> Nota : Come vi ho detto non sono ancora esperta di html e si vede, non so perchè ma se metto il simbolo < all'inizio delle righe dei punti 1 e 2 non mi pubblica il relativo testo. Ricordatevi quindi di aggiungere il simbolo < nella ricerca del codice ... spero di essermi spiegata.... 3 – Ora potete iniziare a lavorare sui CSS, cercate questo (attenzione il codice può variare leggermente da modello a modello): #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 sostituitela 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; } 4 – Per ultimo dovete adattare le misure del nuovo template alla terza colonna. Cercate: #outer-wrapper { background:...; width:...; margin:...; text-align:...; font:...; } Dove al posto dei puntini trovate un valore numerico che varia da modello a modello. Modificate : width:...; aumentando il valore di 200, per esempio se il valore è width:600px; portatelo a width:800px; A questo punto però l'header è troppo stretto!! Quindi... cercate: #header-wrapper { width:...; Come prima, aumentate di 200 il valore all'interno di width:...; Ora il vostro template è completato a 3 colonne. Buon lavoro!!!!!