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.

image

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:
Condividi su Facebook Condividi su Twitter Pubblica su 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!

15 commenti:

roro ha detto...

Caro Tenebrae, approfitto di questo articolo per chiederti un consiglio, volevo inserire per Natale, un layout che ho trovato tra miriadi di siti su http://scrappinblogs.blogspot.com/ ma non ci sono riuscita, a parte che non so nemmeno se il mio template è a due o tre colonne, vedi come sono messa? Dirai che sono proprio de coccio, ma vedendo tanti bei blogs mi viene una rabbia di nn riuscire a cavarmela da sola, nonostante tutti i tuoi preziosi consigli. Se avessi la bontà di spendere un po' del tuo tempo per visitare il mio blog e farmi sapere cosa fare te ne sarei eternamente grata. Ti ringrazio, comunque, anche se non avrò risposta:)
Ros

roro ha detto...

Aiutoooooooooo. Ho caricato un nuovo template che mi piace moltissimo, ma nella demo mi faceva apparire la sidebar a destra del corpo del blog ed invece me la ritrovo sotto, inoltre non ho più la navbar ed i colori per i testi sono fissi. Mi piacerebbe tanto questo template, pensi che con qualche modifica possa riuscirci? Sono stata capace di togliere i bordi dalle immagini dei posti: EVVIVA EVVIVA, ma per il resto nn so dove mettere mano. Adesso sto ripristinando tutti i widgets. TI PREGO AIUTAMI, sto quasi per piangere:-)))
Ros

Channel 360 News ha detto...

cosa vuol dire scribe? qual'è la differenza da un template normale a tre colonne?

Tenebrae ha detto...

@roro: in effetti l'autrice del blog non si sbilancia troppo in spiegazioni, comunque devi copiare il primo codice (o il secondo se hai un template e 3 colonne) e lo devi incollare in un elemento di tipo html/javascript, che aggiungi da layout-elementi pagina

direi che è consigliato per il template Minima

mi piacerebbe dare un'occhiata al problema che dici, ma il tuo blog qual'è? comunque le cose sono due: o hai scritto troppi pochi post (o nessuno), o sei incappata in questo problema

@channel: lo Scribe è uno dei template predefiniti di Blogger a 2 colonne, che qui spiego come portare a 3

roro ha detto...

Oh cavolo, solo adesso mi accorgo che il mio account rimanda solo al blog di prova, eppure li ho registrati entrambi con lo stesso. Tuttavia l'indirizzo è http://lemiepieccolecreazioni.blogspot.com come vedi anche qui sbagliai a digitare il nome esatto. Sono riuscita ad evidenziare la navbar, mettere i bordi ai commenti dei post, fare altre cosine, mettendo mano al codice hmtl e sempre seguendo i tuoi consigli, ma sono lontana anni luce da come vorrei che fosse il blog. Dovrò assumere un webmaster che presto mi mandeebbe al diavolo :-)) Grazie cmq per la tua disponiblità
Ros

kemikonti ha detto...

Sei un mago!
E' da tempo che voglio portare il mio blog a 3 colonne ma ancora non avevo trovato il modo!!
Con le tue spiegazioni ci dovrei riuscire!
Per le vacanze ci provo!
Un saluto
Kemi

Andrea ha detto...

Ciao Orazio, scusami se sono off topic.

Ho notato che la pubblicità in alto nella sidebar propone sempre e solo immagini e non annunci testuali. Come si fa ad impostarla in questo modo?

Grazie.

G. Gualco ha detto...

Ciao Tenebrae!
Ti faccio presente che ti ho linkato anche "Gabriele Gualco in Viaggio" all'indiizzo http://gabrielegualcoinviaggio.blogspot.com/2009/08/blogroll-siti-e-blog-amici.html
Sto rifacendo un pò tutte le pagine.. per ora puoi lasciare gli altri indirizzi.. se c'è qualcosa da cancellare te lo faccio sapere più avanti..
Ti ho messo anche la favicon se ti fa piacere una breve descrizione scrivilo che la inserisco.
A presto fammi sapere Gabriele

Gabriele Gualco ha detto...

Ciao Tenebrae, spero tu abbia una soluzione a questo problema.
Ho creato un blog Harbour per me e uno scrittore che dobbiamo lavorare assieme a un libro.
Speravo di poter duplicare la colonna post (in effetti ci sono riuscito) ma in maniera che su una colonna potesse postare lui e sull'altra io.
Mi rendo conto che è complicato, ma conosci un metodo per far apparire le colonne post di due blog in uno oppure di avere due editors per due colonne nello stesso??
Grazie, spero mi risponderai..
Gabriele

kemikonti ha detto...

Ci sto provando e riprovando ma proprio non ci riesco!
io utilizzo il template minima lefty e vorrei portarlo a tre colonne, post nella colonna al centro più 2 colonnne sui lati, per caso hai già dato informazioni per come fare per questo template?
Sei veramente un grande, prima o poi con i tuoi suggerimenti ci riuscirò!
Un saluto
Kemi

Wolfango Free ha detto...

Ciao Orazio, ho scaricato il template e l'ho applicato, volevo chiederti se è possibile allargare la parte centrale, mi sembra un po' strettino. Per visionarlo clicca qui per visitare il mio blog! Ti ringrazio. P.S. ti ho lincato.

Elisabetta ha detto...

ciao Orazio,tempo fa,scaricai il template a 3 colonne gia' pronto..siccome ho aperto un altro blog,vorrei caricarlo anche la'..non ricordo dove inserirlo,quando procedo a modificare l'html..scusami...grazie e buon weekend :)

Tenebrae ha detto...

@elisabetta: ho capito male o non ti ricordi come cambiare il template del blog?

casomai la risposta è qui

Elisabetta ha detto...

si,Orazio..praticamente il template l'ho salvato tempo fa..ma non ricordo a che punto devo inserirlo...ho provato a guardare nel blog principale..ma con tutti i codici e gadget che ho inserito...non lo trovo....non so se sono stata chiara..grazie comunque..:)

Elisabetta ha detto...

tutto a posto,Orazio..un'amnesia momentanea :))avevo scordato che dovevo cancellare il template,per sostiutirlo con quello a 3 colonne...credevo di doverlo inserire sotto qualche porzione di codice.. :( per fortuna la lampadina si è accesa... :))grazie comunque e buona domenica!!:)


Prima di lasciare un commento, leggete qui

Posta un commento