samedi 26 septembre 2009

Un blog de A à Z, partie 4

Les deux vidéos d'aujourd'hui vous présentent une façon de réaliser un blog à 3 colonnes, comme mon blog personnel est disposé présentement.

Il y a sûrement d'autres façons, mais celle-ci fonctionne bien.

Dans l'étape 1, veuillez m'excuser du petit problème de zoom!

Dans l'étape 2, je vous conseille de mettre les barres de liens d'une largeur d'au moins 200px car 150px est un peu trop petit pour pouvoir y mettre des gadgets...

À l'étape 4, je vous propose d'ajouter un "padding" pour l'instant. Je vous proposerai quelque chose de mieux au prochain vidéo.

Afin de vous aider à mieux voir les codes utilisés, j'ai préparé un document Word contenant les informations importantes. Pour le recevoir, écrivez-moi à blogscraptus@hotmail.com et je vous l'enverrai.

Le mot de passe pour visionner ces deux vidéos est: b3c






Questions, commentaires, suggestions... écrivez-les sous ce message!
Kim

20 commentaires:

Marie4poches a dit…

Encore une fois, très intéressante comme chronique (je suis ça comme un téléroman, hihihihi!).

Je me demandais, est-ce que le fait que tu aies mentionné au départ que le newside wrapper était à gauche (left) et le newside wrapper à droite (right) doit être modifié si tu décides de mettre tes deux colonnes du même côté (les deux à droite ou les deux à gauche).

J'espère que ma question est claire. :?

Kimmieprout a dit…

Oui, c'est clair. Tu peux laisser les mots "left" et "right". Je ne crois pas que ça change qqchose.

C'est en bas, dans "body", que tu choisis comment placer tes colonnes.

En plaçant tes deux codes par-dessus celui "div...main-wrapper..." les deux colonnes seront à gauches.

Si tu les mets en dessous du main-wrapper, ils seront à droite.

Le premier sidebar écrit dans "body" sera à gauche et l'autre à droite, tout simplement.

Boo a dit…

Si on a déjà commencer à faire un blog et qu'on voudrais faire ce modèle comme toi à trois colonnes disons que j'ai beaucoup de temps devant moi est-ce que je pourrais effacer mes gadgets au complet et faire toutes les étapes où je vais perdre les messages que j'ai déjà...

Boo a dit…

Ah oui j'oubliais un gros merci de faire cette chronique c'est super enrichissant vraiment!

Liette alias Pixelle a dit…

ça y est, j'ai compris le tout et ça marche pour mon nouveau blog, il me restera à y déménager mes gadgets, c'est FANTASTIQUE Kim....
merci merci merci merci merci merci !!!

Kimmieprout a dit…

Boo, oui, tu peux le faire ainsi et tu ne perdras pas tes messages, ni quelques-uns de tes gadgets. Par contre, tu devras en effacer quelques-uns (surtout ceux qui requiert du html, les listes de liens) pour que ça fonctionne.

Pixelle, je vois que ça fonctionne!
Tu changes de site? Tu perdras ainsi tes messages. Ou est-ce que tu déménageras ton design de ton nouveau blog sur ton vieux?

Merci pour vos commentaires!

Kim Larivière a dit…

Bravo Kim! Comme toujours c'est très bien expliqué!

Tanya a dit…

Super ça! mais je n'y arrive pas! EJe veux me créer un blog pour mes parents du cpe...j'utilise la même adresse et le même mot depasse pour les deux blogs. Est-ce pour cela que je ne suis pas capable d'y arriver? Dois-je faire de même pour mon blog de scrapbooking, le vider et recommencer??? Ouin, ça n'en faitr de questions, hein?

Tanya a dit…

Bon ça marche finallement! Merci!

Boo a dit…

Woow je suis subjuguée grâce à toi j'ai réussi à faire quelque chose de pas si mal avec mon blog!! Merci vraiment c'est super!!

Bonne journée!

klolo a dit…

ahhhhhhhhh merci je venais de demander aux filles de m'aider ça fait un moment que j'y pense faire un 3 colonnes et ça semblait vraiment difficile!!! je vais attendre ta chronique pour la déco ;) et je vais modifier tout ça!!! wowowow merci ma chère!! :)

Tanya a dit…

Juste une question...
Comment faire en sorte qu les colonnes de chaque côté soit plus large comme les tiennes par exemple? Je trouve que les miennes sont bien étroites...
Est-ce clair ce que je demande?

Kimmieprout a dit…

À ceci...


#sidebar-wrapper {
width: 220px;
float: right;
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 */
}

(même chose pour newsidebarwrapper...)

Change "width: 220px;". Plus le nombre de pixel est grand, plus les colonnes sont larges.

Dans mon vidéo, je crois que j'ai mis un nombre pas mal plus petit. Mais j'ai ajusté à 220px par la suite. Je trouvais ça trop petit aussi.

Tanya a dit…

Merci...donc si je comprends bien, je dois aussi changer celui de l'ensemble et le mettre à 900 au lie de 750...

Kimmieprout a dit…

oui, tu dois agrandir le outer-wrapper pour que tout entre bien

Tanya a dit…

Merci beaucoup pour tout!

Boo a dit…

Est-ce que c'est possible d'inserer des bordures entre les colonnes??? J'ai hâte à samedi pour voir la suite!

Kimmieprout a dit…

Oui, c'est possible. ça fera partie d'une prochaine chronique!!!

Fabienne a dit…

Merci bcp pour les video, tout un travail !!

Boo nous parle de modifier son blog 2 colonnes pour un 3.
Faut il recreer un nouveau blog ou peux t on travailler l'ancien en sauvegardant qqpart les gadgets deja en place ?
Parce que mettons que dans ces gadgets la j'ai une tonne de liens depuis le temps.

Sinon, s'il faut recreer un blog nouveau peut on garder le meme tire de blog pour le nouveau et ensuite transferer les donnees une fois le body du nouveau realisé ?

Pas certaine d'etre claire dans ma question mais merci pour ton beau travail

Emy a dit…

un gros merci !! depuis le temps que je n'osais pas passer au 3 colonnes de peur de merdouiller... et bien désormais c'est fait, et grâce à vous, ça c'est passé tout seul, sans aucun problème ! et même tout mes widgets ont été sauvés, liens compris : je n'ai rien eu à refaire (mais j'avais quand même fait une sauvegarde au cas où ;) )!!

MERCI !!!