AJOUTER UNE TROISIEME COLONNE A VOTRE BLOG

A la demande d'une petite Corse nommée Réo, voici comment ajouter une troisième colonne à votre blog !

Bin oui après tout ça peut servir...
Si vous avez des colonnes qui n'en finissent plus de s'allonger, ça va leur tailler un short pour cet été...

Commençons pas ouvrir la feuille de style pour y ajouter un bloc, ou plutôt faire un copier coller d'un bloc existant auquel nous allons juste ajouter un petit 1 pour le différencier de l'autre...(l'autre colonne de droite bien sur).

Dans cet exemple nous allons ajouter une deuxième colonne sur la droite, personnellement je trouve plus pratique de naviguer dans une colonne à droite de mon écran, mais c'est une question de goût...

Comme nous venons d'ajouter une colonne de 200px, pour quelle puisse s'afficher correctement sur le blog, il faut rajouter 200px au bloc #Container ! (car tout ce beau petit monde loge chez Mr Container, sympa le type).

Donc si avant d'ajouter votre colonne le #Container était à 900px...je vous le donne en mille ?
Bravo il passe à 1100px !
Trop dur le calcul, j'ai mal au crâne...

Vous pouvez donc Valider et ouvrir votre Page d'accueil.

Vous devez descendre sur la ligne qui annonce le début de votre colonne de droite, c'est à dire cette ligne :

<$CBControlNavLinks$></div></div><div id="rightbar"><div class="navlinks">

Copiez cette ligne et collez la en dessous des blocs de codes quelle contient comme ceci, puis ajoutez le 1 à rightbar :

Vous devez placez les blocs (albums photo, les flux rss etc...) que vous voulez voir apparaitre dans cette nouvelle colonne de droite, sous la ligne de code que nous venons de coller, puis ajoutez 2 balises </div> comme ceci :

Voilà...c'est tout !

Enfin non, pas tout à fait...comme nous avons agrandit notre #Container de 200px, du coup notre bannière n'est plus à la bonne taille...

Il faut donc la passer à 1100px elle aussi et ne pas oublier d'augmenter la valeur height dans les blocs #topbar-logo et div.logolink dans la feuille de style.

Car le fait d'augmenter la largeur à 1100px la hauteur augmente aussi, pour garder les proportions de votre bannière.

Avec une bannière qui faisait auparavant 900x150 elle fait maintenant 1100x183 !

Voilà, c'est fois c'est tout...

Pour ceux qui ne savent pas comment agrandir leur bannière :

Importez votre bannière dans Photofiltre :

Cliquez droit sur l'image, puis sur Taille de l'image, ensuite changez la largeur (ce doit être la même que celle de votre #container!)

Retenez la hauteur de votre nouvelle bannière...

"Enregistrer sous" au format jpeg de préférence pour les photos et gif pour les écritures...

Comments

[Mirlitou]

Juste un grand MERCI que je pourrais mettre sur beaucoup d'autres tutos de ce blog. Grâce à vous j'ai pu passer au mode avancé même si ça a été un peu dur (vu mon âge je ne suis pas née avec un ordinateur dans les mains!!!). Mais j'ai pu transformer mon blog dans un premier temps comme je le désirais. Alors mille merci!

[Nathalie]

bonsoir... j'aurais besoin d'aide... je veux rajouter une colonne sur la gauche de mon blog et j'y arrive pas [Non]

merci d'avance

[yoyo45]

..as-tu mis ton ordi portable dans tes valises?...faut pas être en manque pendant les vacances!![Super]
Repose-toi bien quand même,on va pouvoir mettre en œuvre tout ce tu nous proposes...[Bravo]
[Salut][Fleur]

[sylpo]

Ca marche ....
Merci MA BELLE !!!!
[Coeur][Fleur][Coeur][Fleur][Coeur]

[sylpo]

Il ne manque jamais de rosé au frais pendant l'été !!!!
Je re-teste l'avatar !!!!
Quelle horreur de vieillir ... [Non]