15 sept. 2010

(Blogger) Scinder la colonne en deux sidebar.

Pour afficher des widgets de petite largeur, il peut être utile de scinder la colonne en 2 sidebar. Bien sûr, Blogger propose des configurations déjà scindées. D'ailleurs, j'en utilise une :


Mais je désirais la scinder à nouveau en bas de colonne. Ainsi :


Voici une solution très simple à mettre en oeuvre.

1ère étape : vous positionnez dans Présentation > Eléments de la page, 2 modules en fin de colonne.

2ème étape : vous trouvez leur "nom".

Vous cliquez sur Modifier sur le 1er widget.Dans la barre Blogger, tout en haut de la fenêtre, tout à la fin de la ligne, il apparaît.
Dans ce cas précis, il s'appelle LinkList2 (il est encadré en rouge)


Vous répétez l'action avec le 2ème widget. Dans mon cas, il s'appelle BlogList1.

3ème étape : Vous allez dans le CSS, Présentation > Modifier le code HTML et rajoutez
#Nom du widget1 {width:47%;float:left;}
#Nom du widget 2 {width:47%;float:right;}
dans mon cas
#LinkList2 {width:47%;float:left;}
#BlogList1 {width:47%;float:right;}
Vous personnalisez ce qui est en rouge.

Et j'obtiens :

6 commentaires:

  1. hello annak y'a t'il une possibilité de scinder en deux en dessous des messages du blog?

    merci a toi

    RépondreSupprimer
  2. coucou Annak :)
    Me voici de retour, fini la copie des blogs, là je mets à jour peu à peu avec les posts en retard maintenant :)

    j'ai voulu diviser, ma méthode est prise de tête et je dois me refaire des heures de visionnage de codes pour retrouver comment j'ai fait, pas le temps maintenant

    par contre ta méthode est super rapide et facile à utiliser :) Donc j'ai opté pour celle-ci sur mon blog poupettes et ca m'a permis de raccourcir rapidement la taille de ma colonne,

    (j'ai essayé ta méthode sur mon blog http://poupettesetchocolat.blogspot.com et pour éviter les décalages j'ai du ne le faire que sur des colonnes faisant la meme longueur a droite et a gauche)

    par contre j'ai un souci, quand la colonne de droite est moins longue que celle de la gauche (dans les 2 demi colonnes) alors le grand widget d'en dessous (car j'ai placé ces colonnes scindées entre 2 emplacements non scindés) remonte dans l'espace libre à droite et ce n'est pas joli bien sur :((

    aurais tu une solution s'il te plait pour que même si la seconde colonne est plus courte, il y ait vraiment une séparation avant la reprise des autres widget?

    j'ai essayé avec le code:


    < div class='clear' > < /div >

    mais bon ca ne marche pas

    Donc je me demandais si tu avais une solution aussi rapide et efficace à installer pour ne pas me relancer dans des creations de colonnes de widgets supplementaires s'il te plait?

    Bisousss :):x:x:x

    RépondreSupprimer
  3. Bonjour Thierry :) tu voudrais faire 2 colonnes de modules sous l'article ou 2 colonnes des articles suivants ?

    RépondreSupprimer
  4. Bonjour Loulou :) désolée, débordée en ce mois de décembre. Pour ton pb, je pense :
    - soit un margin-top (marge de haut) dans le CSS de ce module
    - soit mettre le module en position: relative.
    j'ai regardé sur http://poupettesetchocolat.blogspot.com et ça semblait bon.

    RépondreSupprimer
  5. Salut !

    Désolé je viens de faire ta méthode, cela me reparti effectivement les gadget mais ils deviennent inutilisable, non clikable... non fonctionnel koi...

    http://kochou-mmmm.blogspot.com/

    Merci de ton retour..

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)