laziale95
laziale95 - Erectus - 50 Punti
Rispondi Cita Salva
ciao a tutti volevo sapere come faccio a creare un template per blogger a tre colonne
Diogens
Diogens - Genius - 66517 Punti
Rispondi Cita Salva
ho trovato questo:


Da quando Blogger utilizza il nuovo template in XML, quasi tutti i template pubblicati sono a 3 colonne. Avere una colonna in più permette di gestire meglio lo spazio a disposizione e in particolare si rivela utile per chi vuole inserire una colonna verticale di banner pubblicitari. Per prima cosa vi raccomando di eseguire il backup del template di Blogger, e di leggere l'articolo su come cambiare la larghezza del template: per aggiungere un'ulteriore colonna, avremo bisogno di più spazio.
Dopo aver allargato la larghezza del template come illustrato nel precedente articolo, mantenete la larghezza del main-wrapper a 410px e cercate la seguente porzione di codice:
#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 */
}
Copiatela e subito sotto incollatela cambiando la prima riga nel seguente modo:
#new-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 */
}
In questo modo abbiamo creato un nuovo "identificatore" di area che si chiama new-sidebar-wrapper. La larghezza è 290 perchè il nostro obiettivo (come sempre rimando al precedente articolo) è arrivare a 920 pixel: 410px + 220 + 290px = 920px (più 30 di margine fanno 950, la larghezza del nostro template di prova). Adesso cerchiamo la seguente porzione di 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 righe evidenziate in blu potrebbero essere diverse a seconda del contenuto della colonna che già avete nel template. Fondamentalmente dovete cercare l'area che comincia con <div id='sidebar-wrapper'>. Subito prima delle righe sopra, incollate la seguente porzione di codice:
<div id='new-sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
Salvate le modifiche effettuate e andate in Layout->Elementi pagina. Adesso dovreste vedere la terza colonna: aggiungete degli elementi e salvate il template. Visualizzate il blog e il gioco è fatto:

Per avere entrambe le colonne laterali della stessa larghezza (come nell'immagine sopra), impostate in entrambi i wrapper la width (larghezza) a 255 px:
#sidebar-wrapper {
width: 255px;
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
#new-sidebar-wrapper {
width: 255px;
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 */
}
mentre il main-wrapper sarà il seguente:
#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 */
}
e l'outer-wrapper:
#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Come guadagno Punti nel Forum? Leggi la guida completa
In evidenza
Classifica Mensile
Vincitori di novembre
Vincitori di novembre

Come partecipare? | Classifica Community

Community Live

Partecipa alla Community e scala la classifica

Vai al Forum | Invia appunti | Vai alla classifica

pizzibutti

pizzibutti Blogger 284 Punti

VIP
Registrati via email