Blogger Hack: Aggiungere una seconda barra laterale

Cercate un template a tre colonne per blogger?
Di default purtroppo non ne esistono, e quelli che si trovano in rete a volte sono menomati di alcune funzionalità.
Vediamo quindi come è possibile aggiungere una seconda sidebar a un template classico di blogger.


Io ho usato come template di default "Minima blue" che ha già una sidebar a destra quindi le indicazioni che seguiranno sono per creare una sidebar a sinistra per creare una sidebar a destra invece seguite le indicazioni tra parentesi.
Mi raccomando le partentesi non vanno copiate..

Andate su Layout--->Modifica Html e salvate una copia di sicurezza se qualcosa andasse storto

Cliccare su = Espandi i modelli widget

Cercate questo:

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

e sostituitelo con questo:

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

o con

[<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'> ]

Cercate questo:

<div id='content-wrapper'>

e sostituitelo con questo:

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

o con

[ <div id='content-wrapper'>
<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'/>
</div> ]

Cercate questo:

#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 sostituitelo con questo:(va bene anche per la sidebar a destra)

#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;
}

Infine sistemiamo le larghezze
cercate:

#outer-wrapper {
background:...;
width:...;
margin:...;
text-align:...;
font:...;
}

e dove trovate width:(valore) aggiungete al valore 220 (es nel mio caso era 660px è diventato 880px ^[1]

Bene ora salvate il tutto e andate in Layout-->Elementi pagina
Se avete aggiunto dei gadget ancorati all intestazione dovete (forse) eliminarli (purtroppo) perché, almeno a me, non permettevano la corretta visualizzazione delle tre barre.
Fatto questo o se era già tutto a posto avrete una cosa cosi:


Aggiustate i vostri gadget nelle tre barre come più vi aggrada, salvate il tutto e visualizzate il blog.
A questo punto se la barra centrale non è perfettamente centrata rispetto alle altre due o se ci sono altri inconvenienti di spaziatura bisognerà fare gli ultimi ritocchi.
Ritornate su Modifica html , cercate:
#main-wrapper {
e aggiungete sotto
margin-left:[valore];
margin-right:[valore];
(mi raccomando il ;)
poi
#right-sidebar-wrapper {
e aggiungete
margin-left:[valore];
margin-right:[valore];

e infine
#left-sidebar-wrapper {
e aggiungete
margin-left:[valore];
margin-right:[valore];

Al posto di [valore] mettete il numero di pixel che deve avere il vostro margine

Quindi se andiamo ad inserire margin-left: 10px; dentro #main-wrapper { vorra' dire che la nostra barra dei post avra' alla sua sinistra uno spazio vuoto di 10 pixels.
Ovviamente i valori non sono obbligatori o vincolati tra di loro. Quindi se una barra e' gia' a posto non servira' aggiungere nulla, o se vi serve solo che una barra sia spaziata a sinistra userete solo margin-left...

Fonte: Flo,Ste&Simo

Note del post:
[1] px sta per pixel