Blog a tre colonne con blogger.



Un blog a tre colonne è molto più pratico da utilizzare per il semplice fatto che permette di accorciare notevolmente la pagina del blog, evitando a chi scorre le nostre pagine di farsi venire inutili crampi a causa della rotellina. Personalmente quando visito blog con pagine lunghe 40-50 centimetri mi stanco in fretta e lascio stare.

Come inserire la terza colonna nel proprio blog?Anche se questa operazione richiede diversi passaggi risulta accessibile anche agli utenti meno esperti.Cominciamo quindi: layout-modifica html.Prima di tutto salvate il modello del template. Se qualcosa non va potete così tornare indietro.

Prima di aggiungere la terza colonna è necessario aumentare la larghezza totale del vostro blog così da fare spazio per un’altra colonna.

Cerchiamo quindi questo elemento:

#outer-wrapper {

width: 660px;

Portiamo la quantità in width a 950.

Fare la stessa cosa con:

#header-wrapper {

width:950px;

Così avremmo aumentato anche la larghezza dell’intestazione del blog.

Procediamo all’aggiunta della terza colonna:

Cercare la seguente porzione di codice

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

}

Copiatelo e incollatelo subito dopo sostituendo

#sidebar-wrapper {

con

#new-sidebar-wrapper {

e portate la larghezza in entrambi i width a 255 px.  Così le due sidebar avranno la stessa larghezza.

Ora bisogna scendere nel template e cercare il seguente 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 parti evidenziate in rosso variano a seconda dei widget che avete nel vostro blog.

Subito prima inserire il seguente codice:

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

Se volete che la nuova colonna sia posta all’estrema sinistra del blog dovete inserire questa porzione di codice non prima di

<div id=’sidebar-wrapper’>

Ma un po’ più su, prima di

<div id=’main-wrapper’>

Buon blog!

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
  • Pingback: diggita.it()

  • Pingback: pligg.it()

  • Pingback: ZicZac.it, clicca qui e vota questo articolo!()

  • Stò creando una raccolta di tag e guide utili sul mio blo….questa mi è stat molto utile ed vorrei inserirla mettendo direttamente il link….un saluto

  • MATT

    non ho elemento:

    #outer-wrapper {

    width: 660px;

    uso modello Travel
    Sookhee Lee
    e non riesco a trovarlo da nessuna parte

    HELPPP MEEEE

Pinterest