Post
aggiunta della 3° barra
Continuiamo pure con il personalizzare il nostro blog, quest’oggi vi dirò come aggiungere una terza barra laterale, sia essa a destra o a sinistra, come la solito metterò oltre le spiegazioni scritte anche degli screenshot per visualizzare meglio cosa dovete fare e dove andare a cambiare il codice html, ora iniziamo pure:
inserimento della colona di sinistra (cliccate su ogni immagine per vedela ingrandita)
1. come sempre andate nel vosto blog, entrate nel vostro modello Selezionate modifica HTML, spuntate ora la voce espandi modello widgest cliccate
su “scarica il vostro modello completo” e salvatelo sul vostro pc, in
modo tale da poterlo rimettere qual’ora sbagliate qualcosa nell’inseri-
mento dei codici
2. premete ora ctrl+f, apparirà una finestra di ricerca, digitate al suo interno questo codice
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
Sostituite questi due codici con questo nuovo codice
<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
2.ora aggiungiamo la nuova barra, premendo sempre ctrl+f , digitate nella barra di ricerca questo codice:
<div id='content-wrapper'>
<div id='content-wrapper'>
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>
3.ora lavoriamo sui CSS: sempre nella barra della ricerca digitate questo codice:( attenzione il codice può varirare da modello a modello, questo codice lo trovate nel modello MINIMA, che è il modello più modificabile a mio avviso)
#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 */
}
E sostituitelo con questo codice:
#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;
}
adesso cercate questa stringa (ricordo sempre che in questo esempio mi riferisco al modello MINIMA, ma la stringa può variare da modello a modello)
#outer-wrapper {
width: 860px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Dove trovate …Width +[valore],aumentate di 200 px, ossia, se il valore fosse di 720px diventerebbe di 920 ecc.
Il mio l’ho aumentato fino al 860
Il risultato dovrebbe essere questo, sempre che abbiate eseguito passo per passo le spiegazioni
A volte però ci potrebbero essere dei problemi con le spaziature e gli allineamenti delle barre, allora andiamo a metterle un po’ a posto
Cercate questo codice:
#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 */
}
Questo codice fa riferimento alla parte centrale del blog dove si scrivono i post, di solito la larghezza è di 410 px, potete variare la larghezza cambiando il valore nella scritta WIDTH
Andate ora a cercare questi codici:
#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;
}
Questi codici fanno riferimento alle barre laterali. Di solito sono di 200 px come nel caso del mio blog, ma potete variare la larghezza cambiando il valore al’interno della scritta ..WIDTH,
è tutto, spero di avervi fatto ancora cosa gradita. Scrivetemi se avete problemi
