3 colonnes template blogger

obtenir ces boutons

Modèle à 3 ou 4 colonnes pour Blogger

En 2006, Blogger ne diffusait que des modèles (template) à 2 colonnes. On peut les remplacer par des modèles à 3 (ou 4) colonnes.

On peut aussi ajouter une colonne à un blog existant.

Remarque : cette méthode a été appliquée aux templates classiques modernisés à 2 ou 3 colonnes disponibles ici et qui peuvent donc être utilisés immédiatement.

Le code ci-dessous permet de transformer un nouveau blog à 2 colonnes, en blog à 3 ou 4 colonnes (pour ajouter une colonne à gauche d'un blog existant, avec ses gadgets, voir : "Ajouter une colonne à gauche dans un blog").

1) Il faut d'abord élargir la page afin que la troisième colonne puisse s'ajouter (sans cela, les éléments de droite se retrouveront en - dessous à gauche).

Exemple :

body {
.....
width: 924px;

2) A la place de :

#sidebar {
..........
}

insérer :

#left-sidebar-wrapper,
#right-sidebar-wrapper {
background:#9BC3D5;
color: #0000ff;
width: 160px;
float: left;
padding : 10px;
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 */
}

3) à la place de ces deux paragraphes (qui sont inversés si la colonne latérale existante est à gauche) :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog'/>
</b:section>
</div>

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

insérer :

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

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog'/>
</b:section>
</div>

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

Si on veut que la colonne des messages reste à gauche et qu'il y ait deux barres latérales à droite, il suffit d'inverser le 1° et le 2° de ces paragraphes.

Si on veut que la colonne des messages reste à droite et qu'il y ait deux barres latérales à gauche, il suffit d'inverser le 2° et le 3° de ces paragraphes.

* * * * *
Exemple : la technique décrite ci-dessus a été utilisée pour réaliser ce template.

* * * * *
Si on veut ajouter une 4° (5°) colonne, diminuer la largeur ("width") des autres colonnes et ajouter deux paragraphes (comme ci-dessus) avec un autre nom (par exemple "left-sidebar2-wrapper" ou "right-sidebar2-wrapper"), en les plaçant entre les paragraphes relatifs aux colonnes qui devront respectivement se trouver à gauche et à droite de cette colonne supplémentaire.

Aucun commentaire: