Template Scribe per Blogger a 3 colonne

Il template Scribe per Blogger è uno dei pochi che integra perfettamente la grafica con la struttura finale del blog. A me piace molto la sua grafica essenziale ma , tant’è che è stato uno dei primi che ho usato.

Dopo aver scritto di come aggiungere la terza colonna per i template Minima e Thisaway Rose, ecco la procedura da seguire per lo Scribe. Come per il Thisaway, metterò le colonne una a destra e una sinistra, perché credo che questa sia la struttura migliore per questo template. E come per il Thisaway, anche il template Scribe richiede di ritoccare le poche immagini utilizzate nel template (ma tranquilli non dovrete farlo voi).

Per la prima volta metterò disposizione a fine articolo anche il template già pronto da scaricare: non dovreste correre il rischio di perdere elementi precedenti, ma potreste perdere altro codice HTML modificato.

Prima di cominciare

Raccomando come sempre di fare prima la modifica in un blog di prova, e poi riportarle nel blog ufficiale ma ricordandosi di fare il backup del vecchio template, per poter tornare indietro se qualcosa va male.

Quando cercate una sezione che dico di modificare, controllate bene che sia esattamente quella, perché ce ne sono diverse con lo stesso nome nel template Scribe.

Passo 1

Da Layout-Modifica HTML, selezionate “Espandi i modelli widget” e cercate questa porzione di codice (CTRL+FA del browser):

#sidebar {
    width:150px;
    float:$startSide;
    padding:8px 0;
    margin:0;
    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 */
}

Modificate il valore di width con 175:

#sidebar {
    width:175px;
    float:$startSide;
    padding:8px 0;
    margin:0;
    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 */
}

Passo 2

Subito sotto il codice del passo precedente, incollate questo:

#new-sidebar {
    width:175px;
    float:$endSide;
    padding:8px 0;
    margin:0;
    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 */
}

Passo 3

Cercate questa riga di codice:

<div id='footer-wrapper'>

Subito sopra, incollate:

<div id='new-sidebar-wrapper'>
<b:section class='sidebar' id='new-sidebar' maxwidgets='100' showaddelement='yes' preferred='yes'>
</b:section>
</div>

Passo 4

Cercate il seguente codice e modificate la parte che ho evidenziato in rosso, per portare la larghezza a 900:

#outer-wrapper {
    background-color:#473624;
    border-$startSide:1px solid #332A24;
    border-$endSide:1px solid #332A24;
    width:900px;
    margin:0px auto;
    padding:8px;
    text-align:center;
    font: $bodyFont;
}

Passo 5

Cercate il seguente codice e modificate le parti che ho evidenziato in rosso:

#main-top {
    width:900px;
    height:49px;
    background:#FFF3DB url("http://idssl.fileave.com/tbg/scribe_bg_paper_top_w.jpg") no-repeat top $startSide;
    margin:0px;
    padding:0px;
    display:block;
}

Purtroppo Skydrive genera sempre indirizzi chilometrici!

Passo 6

Cercate il seguente codice e modificate le parti che ho evidenziato in rosso:

#main-bot {
    width:900px;
    height:81px;
    background:#FFF3DB url("http://idssl.fileave.com/tbg/scribe_bg_paper_bot_w.jpg") no-repeat top $startSide;
    margin:0; 
    padding:0;
    display:block;
}

Passo 7

Cercate il seguente codice e modificate le parti che ho evidenziato in rosso:

#wrap2 {
    width:900px;
    background:#FFF3DB url("http://idssl.fileave.com/tbg/scribe_bg_paper_mid_w.jpg") repeat-y;
    margin-top: -14px;
    margin-$endSide: 0px;
    margin-bottom: 0px;
    margin-$startSide: 0px;
    text-align:$startSide;
    display:block;
}

Passo 8

Cercate il seguente codice e modificate la parte che ho evidenziato in rosso:

#header {
  background:url("http://idssl.fileave.com/tbg/scribe_divider_w.gif") no-repeat bottom $startSide;
}

Passo 9

Cercate il seguente codice e modificate la parte che ho evidenziato in rosso:

#footer {
    clear:both;
    background:url("http://idssl.fileave.com/tbg/scribe_divider_w.gif") no-repeat top $startSide;
    padding-top:10px;
    _padding-top:6px; /* IE Windows target */
}

Passo 10

Cercate il seguente codice e modificate/aggiungete le parti che ho evidenziato in rosso:

#main {   
    width:430px;
    float:$startSide;
    padding:8px 0;
    margin:0;
    margin-left:7px;
    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 */
}

Passo 11

Salvate il template e incrociate le dita.

Scaricare il template già pronto

Per scaricare il template base con le modifiche già fatte, cliccate qui.

La grafica modificata dello Scribe e buona parte delle informazioni contenute in questo post sono state tratte da The Blogger Guide.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!