Comment cacher la colonne des widgets et modifier la largeur des Pages Blogger

Depuis plusieurs semaines je cherche un moyen SIMPLE pour cacher le barre latérale (les widgets) dans certaines pages pour:
  1. Utiliser de grandes images.
  2. Mettre en place une gallery.
  3. Alléger le chargement de ces pages: Widget=Javascript= plusieurs secondes d'attente.
  4. Créer des contenus sur 2 voir 3 colonnes, c'est plus beau.
  5. Ne pas afficher les commentaires pour améliorer le chargement de ces pages.
Heureusement maintenant avec la nouvelle fonctionnalité des Pages, Blogger a simplifié les choses: les Pages ne s'affichent pas dans la page d'accueil, des archives et des libellés.
Exemple Page Blogger sans Widgets

Comment faire !

Il faut ajouter une condition b:if pour que lorsqu'on visite une Page (et pas un article):
  1. La colonne latérale ne s'affiche pas.
    Ceci est possible en ajoutant la propriété CSS: display:none;
    Vous pouvez cachez n'importe quelle partie de votre blog avec cette méthode: l'enête, la barre horizontale, le bas de page, etc.

  2. La barre centrale occupe toute la largeur.
    Ceci est possible en ajoutant le code CSS : width: LargeurdeVotreBlog px;
    (Pour connaitre la largeur exacte de votre blog, recherchez quelques chose qui commence par #outer-wrapper et localisez la ligne width:....px;
Voilà vous avez compris pourquoi et comment ça marche, il ne reste plus qu'à copier/coller ce petit code AVANT </head>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper{display:none;}
#main-wrapper{width: 970px;}
</style>
</b:if>
Remplacer le chiffre en rouge par la largeur totale de votre blog.
Pour le code en bleu, ça dépend des Templates mais les 2 valeurs fonctionnent avec les Templates par défaut de Blogger et la plupart des designer utilisent les même.
Si vous avez un problème n'hésitez pas à laisser un commentaire °_._°

Pour l'instant je n'ai créé qu'une seule page: Archives - liste de l'ensemble des articles de LeBlogger.com
J'ai simplement caché les widgets de droite, enlevé les commentaires et j'ai affiché le contenu sur 2 colonnes. Résultat: la page se charge beaucoup plus rapidement même si les scripts sont assez lourds.

Alors qu'est ce que pensez-vous de cet astuce ? est ce utile ? vous allez l'utiliser ? Si oui, n'hésitez pas à nous montrez votre travail en laissant un lien vers vos pages dans les commentaires...
Libellés : Publié le samedi, janvier 23, 2010
69 Commentaires
  1. Salut Soufiane. Tout d'abord je voulais te dire que j'adore ton blog. Je suis un tout nouveau blogger (depuis la semaine dernière) et il m'a beaucoup aidé dans la customisation du mien (je t'ai d'ailleur ajouté en lien sur mon blog et je te suit sur twitter :D ...

    En ce qui concerne ta dernière astuce, je voudrais savoir s'il était possible d'ajouter dans une page nouvellement créée un widget "diaporama" du style de celui présent dans l'onglet "ajouter un gadget" des élements de la page. Je voudrait en effet créer une page photos sans avoir une suite de photos de haut en bas de la page.

    Mon blog : http://ogeek-laranjinha1986.blogspot.com/

    Merci d'avance de ta réponse et longue vie à ton blog!

    RépondreSupprimer
  2. C'est bon j'ai trouvé... j'ai tout simplement utilisé l'option "inséré un diaporama dans une page web" de picassa qui te fournit le code html à coller dans ton message =))

    RépondreSupprimer
  3. Salut Soufiane,
    Félicitations, tu es été le premier à réaliser l'idée de Aneesh... Je dois dire que fonctionne, j'ai eu quelques doutes ...

    RépondreSupprimer
  4. Salut Ernesto,
    Merci je trouve que l'astuce est très utile mais le référencement des Pages est un peu plus long que pour les Articles ...

    Oui j'avais parlé à Aneesh de cette astuce il y a 3 jours ...

    Ne sois pas surpris si il (ou je) sort un widget "Commentaires Récents avec Avatar" dans les prochains jours ...

    RépondreSupprimer
  5. @Laranjinha1986
    DSL j'ai pas pû repondre avant mais tu as trouvé =)(
    j'ai vu le diapo dans ta page Photo, ça va .....

    RépondreSupprimer
  6. merci sofien pour ton effort
    tu donnne une autre demention pour blogger
    soufiaen mlhrsm je ai cmpis quelques instrctions, notamment qui depend de ces 2 paragraphe
    *
    Il faut ajouter une condition b:if pour que lorsqu'on visite une Page (et pas un article):

    1.La colonne latérale ne s'affiche pas.
    Ceci est possible en ajoutant la propriété CSS: display:none;
    Vous pouvez cachez n'importe quelle partie de votre blog avec cette méthode: l'enête, la barre horizontale, le bas de page, etc.


    2.La barre centrale occupe toute la largeur.
    Ceci est possible en ajoutant le code CSS : width: LargeurdeVotreBlog px;
    (Pour connaitre la largeur exacte de votre blog, recherchez quelques chose qui commence par #outer-wrapper et localisez la ligne width:....px;
    *

    RépondreSupprimer
  7. Merci pour tous ces merveilleux gadgets ....:)
    J'ai fait un essai ; je n'arrive pas à créer deux colonnes ; p.ex mettre les photos côte à côte (en format "petit")
    La galerie-photos dans ce blog est une lère ébauche
    C'est juste pour montrer .... !!!!!!!!!

    RépondreSupprimer
  8. J'ai installé le code



    Au secours ça ne marche pas dans ce blog

    RépondreSupprimer
  9. @Francine
    Dans le code que tu ajoutes, Remplaces #sidebar-wrapper par #sidebar-wrap et #main-wrapper par #main-wrap1 ça devrait marcher .....

    RépondreSupprimer
  10. Youpi ça maaaarche ...... =))
    Merci 1000 x

    RépondreSupprimer
  11. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  12. khoya sofien pafhamtch kifach ndir , momkin tgoli achnahoma les etapes lli ndir wa7da wa7da allah y7afdak liya

    RépondreSupprimer
  13. @Mr Bakkali
    Wa dakechi bayen a chef :x makayen manfesser....

    RépondreSupprimer
  14. khoya ghi sma7li bghit na3raf ina code nzido f code xml de template w ach ya3ni had condition *b:if* w kifach na3raf chno ndir hnaya width: 970px;}
    khoya allah yar7am alwalidin
    wach momkin na3tik le nom d utilisteur et le mot de passe bach tdir dakchi ila kan 9ass7 bezaaf

    RépondreSupprimer
  15. Bonjour Soufiane,

    tout d'abord merci beaucoup pour ces trucs et astuces !
    Je viens de créer une page statique sur mon blog (http://unraleurdeplus.blogspot.com)et j'ai caché les widgets à gauche comme tu l'as expliqué en rajoutant tes lignes de code :

    ...#sidebar-wrapper{display:none;}
    #main-wrapper{width: 870px;}....

    La largeur du blog étant 870.
    Pourtant, si les widgets sont bien cachés je n'arrive pas à à avoir une colonne (où j'ai rajouté une vidéo youtube) qui fasse 870 de largeur.
    Elle conserve la largeur qu'elle a dans la page où je publie les billets (page d'accueil)
    As-tu une idée ?
    Merci à toi

    RépondreSupprimer
  16. Dessous ton #main-wrapper{width: 870px;}, tu rajoutes #main .Blog {width: 870px;}

    Enfin j'ai fait ça chez moi et ça marche (après quelques grands moments de solitude !)

    RépondreSupprimer
  17. @ La Mère,
    Bonjour, merci pour votre message !
    Je viens d'essayer et il n'y a rien à faire j'ai toujours la colonne des widgets qui prend de la place bien qu'ils soient cachés.
    Au fait, félicitations pour la personnalisation !

    RépondreSupprimer
  18. Alors peut-être que c'est comme chez moi et pas #main-wrapper mais #main-wrap1

    Essaie :

    #sidebar-wrap{display:none;}
    #main-wrap1{width: 870px;}
    #main .Blog {width: 870px;}

    Sinon cherche le code .main .Blog
    Et regarde ce que tu as comme valeur 'width'

    RépondreSupprimer
  19. Coucou, je te remercie !
    Ca marche !
    En fait j'avais mis le code de Soufiane dans le html principal du blog. Mais en fouillant tes codes sur une de tes pages statiques (je me suis permis, dsl !) je me suis rendu compte que je devais rajouter en plus le bloc complet de codes
    #sidebar-wrap{display:none;}
    #main-wrap1{width: 870px;}
    #main .Blog {width: 870px;}
    sur l'html de la page statique elle-même.
    Bref ça marche, merci encore c'est troooop sympaa
    ;)

    RépondreSupprimer
  20. Cool !
    Je savais même pas qu'on pouvait faire ça !
    Regarder le code HTML d'un vrai blog de filles ;-)
    Rhooooooo !

    RépondreSupprimer
  21. Eh bien, elle est pas mal La Mère.....
    Comme je l'ai dit dans l'article, #main-wrapper et le marqueur par défaut dans Templates Blogger pour les autres Templates c'est au cas par cas....

    RépondreSupprimer
  22. Ah vous pouvez aussi jetez un coup d'oeil sur cet article (et pas une Page) où j'ai utiliser la même technique qu'en haut:

    http://www.leblogger.com/2009/06/template-modele-blogger.html

    RépondreSupprimer
  23. @ La mère : tu affiche le "code souce" de n'importe quelle page. Ca dépend de ton navigateur, tu vas dans fichier... ou encore en cliquant sur le bouton droit...
    @ Soufiane
    En fait en mettant Wrapper ça marche. Mais pour profiter de toute la largeur j'ai rajouté sur l'espace html de la page statique les 3 lignes de code sans condition if...
    Par contre tes codes à rajouter dans la structure html principale sont nécessaires pour cacher les widgets, pour ça y'a pas de souci.
    Merci encore à vous !

    RépondreSupprimer
  24. Bon j'en profite pour dire merci !!!
    Enfin merci pour tout !
    Ca fait 2 jours que je ne jure plus que par Soufiane et Rodney !
    L'homme va finir par être jaloux!

    RépondreSupprimer
  25. @Vlad
    Tu utilises une Template Minima ;) Je viens de retester avec une Template Minima et le code dans l'article suffit pour ET cacher la colonne des widget ET élargir la colonne centrale ;) ;)
    Regard ça http://leblogger2.blogspot.com/p/top-astuces.html (avec un ctrl+U et ctrl+f pour trouver les /head ....)

    @La Mère
    :(( :((

    RépondreSupprimer
  26. Soufiane, je viens de regarder...Je crois qu'il y a un malentendu/quiproquo dès le départ. Lorsque j'ai mis tes lignes de code avec la condition if...la page est statique...alors diplay des widgets = none...
    Ca cachait juste les widgets dans la page statique (d'ailleurs je ne trouve pas trace de cette condition dans la page en Template Minima que tu m'a envoyé)
    Il a fallu que je rajoute les lignes de code sans la condition dans l'html de la page statique elle-même. Enfin ça marche, et pis je ne veux pas polluer ton espace avec 15000 commentaires.
    Faut que je rajoute un lien vers ton site sur mon blog pour tous ceux qui comme moi cherchent à optimiser blogger. Merci encore

    RépondreSupprimer
  27. @Vlad
    D'accord d'accord le plus important c'est que ça marche, et ça marche :D
    le fait d'ajouter les code directement dans la page est très intéressant, je teste .....
    15000 commentaires ;) tu peux vraiment le faire ;) je suis à ~4100 :z :((

    RépondreSupprimer
  28. Bonjour,

    merci pour ce site très utile.
    Je rencontre les mêmes problèmes que Vlad.
    J'ai une template Minima et les codes fournis cachent effectivement les gadgets; cependant la nouvelle page occupe la place d'un message.

    D'autre part, je ne sais pas comment modifier le code HTML d'une page statique.

    Je suis un peu benêt. Ne m'en voulez pas.

    Merci de vos conseils.

    RépondreSupprimer
  29. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  30. Bonjour boolo,
    je suis pas spécialiste mais d'après moi voici la manipulation : dans l'espace où tu peux écrire un texte dans ta page statique, clique sur HTML et incorpore un code tout en haut. Ci-après un lien vers une copie d'écran où tu comprendras tout.
    http://i92.photobucket.com/albums/l37/lestat-75/blog.jpg
    Le code à copier est celui surligné en bleu. Change la largeur 870 avec celle propre à ton blog. Voilà.

    Dis-moi si c'est OK

    RépondreSupprimer
  31. @Vlad

    Merci beaucoup pour le conseil. Ça marche.
    Tant que j'y suis, pourquoi ne pas demander, à toi ou à Soufiane, ou aux autres contributeurs, comment enlever unb gadget qui se trouve en haut (ou en bas) de chaque page.
    Je n'ai pas trouvé l'équivalent de #sidebar-wrapper pour les widgets du haut.
    Merci encore.

    RépondreSupprimer
  32. Yessss!!! Un grand merci :D
    Je suis enfin parvenue à faire ce que je voulais: des pages sans le pied de page et sans le gadget texte juste au dessus du corps d'article:

    #footer{display:none;}
    #Text1{display:none;}

    Et en plus, j'ai tout compris :)
    (Bon, j'ai fait mes essais au brouillon... reste à passer au "vrai blog" demain. Stop pour ce soir!)

    Vraiment merci pour tes tuyaux et ta réactivité sur les nouveautés blogger et vive les nouvelles pages! :D

    RépondreSupprimer
  33. @Cathy B
    Merci et bravo tu y es arrivé :D

    Tu devrait peut être t'abonner au Flux RSS ou me suivre dans Twitter/Facebook parce que les Pages existes depuis plusieurs jours et c'est seulement maintenant que tu t'en rend compte ;)

    En plus tu as ratté pas mal de chose, c'était trop marrant :

    1) Blogger a annoncé la venue des Pages.
    2) Plusieurs semaines après les pages sont disponible via Blogger Draft.
    3) à peine quelques minutes et voilà que les Pages sont indisponible. Blogger a rencontré des problème et a bloqué la création/modification des Pages. (Mais j'avais déjà publier le tuto avec les captures d'écran =)( )
    4) Quelques heures plus tard les Pages reviennent dans Blogger Draft mais un gros bug est apparu: impossible de sauter des lignes ou de faire un retour à la ligne....
    5) Blogger a résolue le problème en ajoutant les Pages dans la version Standard.

    Bien sûr j'ai parlé de tout ça sur LeBlogger.com et dans Twitter :)

    RépondreSupprimer
  34. @Vlad
    Merci pour tes repenses, c'est très sympa de ta part :))

    RépondreSupprimer
  35. @tous,
    merci tout plein.

    RépondreSupprimer
  36. Bonsoir, merci beaucoup à Soufiane pour ce super blog! je me suis inscrite il y a quelques jours sur cette plateforme. mais la je pete un cable avec cette histoire de page! En effet la colonne s'est bien enlevée mais le problème est que si je réduite la fenetre, au lieu que le texte se "déforme" il s'efface... je ne sais pas si je me fait comprendre:
    si je réduis ma fenetre, le texte se tronque...
    http://comandgreenwahsing.blogspot.com/p/bienvenue-sur-mon-nouveau-blog.html
    Help!

    RépondreSupprimer
  37. bon finalement j'ai pris le modele minima stretch normal au lieu de lefty et apparament le problème est résolu!

    RépondreSupprimer
  38. Bonjour Soufiane,

    J'ai bien mis en place l'astuce pour les pages seulement l'affiche de mes pages créées restent avec la taille d'origine du blog soit 460px alors que j'ai rentré le code suivant :
    ....
    #sidebar-wrapper {display:none;}
    #main-wrapper{width: 1000px;}...

    Impossible de faire comme tes pages "Gallery" ou "Archives"...

    Je ne vois pas où ça coince...
    Ex de page : http://www.nord-quotidien.info/p/archives.html (j'ai mis une ligne qui fait la longueur du message pour que tu voies ou ça se coupe)

    Merci de m'aider si possible...
    Stéphane

    RépondreSupprimer
  39. Salut Soufiane,
    Tu as pu voir pour mon petit pb?

    RépondreSupprimer
  40. @
    En fait ça dépend des Templates et les marqueurs peuvent êtres différents:
    #sidebar-wrapper
    #main-wrapper

    RépondreSupprimer
  41. Bonjour Soufiane, ayant récemment changé le vieux template minima par un modèle document à l'aide du nouvel outil création de modèle je suis en train de reconstruire mon blog petit à petit. Par contre impossible d'enlever la colonne gadget et d'élargir la colonne centrale avec les codes que tu as donné.
    Ces codes marchaient très bien avec le template minima mais pas avec le nouveau mis en place. Apparemment c'est plus les dénominations sidebar-wrapper et outer-wrapper...
    Tu as une idée sur le sujet ?
    Est-ce que tous ceux qui ont changé leur template à l'aide du nouvel outil ont le même problème que moi ?
    A bientôt

    RépondreSupprimer
  42. @Vald

    Même problème que toi !!

    Au secours !!!

    RépondreSupprimer
  43. Bonjour,

    Je viens de suivre pas à pas la méthode pour cacher les gadgets et profiter de la taille max du blog, mais impossible d'appliquer le changement ?

    Je suis débutant dans le blog, j'ai peut-être louper un code dans le Html ?

    Voici l'adresse du blog: http://bikeparkstluc.blogspot.com/

    Quelqu'un sait comment résoudre ce problème ?

    Merci d'avance ! Et encore merci à LeBlogger.com

    Christophe

    RépondreSupprimer
  44. @Vlad
    @Jabamiah
    Oui j'ai pas testé avec le concepteur de modèle qui a été lancé après que j'ai publié cet article...
    je vais essayer de faire une Mise à jour dans les prochains jours ;)

    RépondreSupprimer
  45. Bonne chance pour ta mise à jour et tiens-nous au courant !
    ;)

    RépondreSupprimer
  46. Bravo et merci pour tous ces "trucs et astuces"! C'est génial! :D

    RépondreSupprimer
  47. Pour la mise à jour ?? car cela ne marche toujours pour cacher la colonne de droite des widgets.

    Merci ;)

    RépondreSupprimer
  48. Bonjour !
    =/ Je suis dans la même impasse que Jabamiah..
    Toujours pas de news pour les nouveaux modèles ?? :(
    Cette petite colonne de widgets et tellement embetante :o

    RépondreSupprimer
  49. Bonjour
    Après plusieurs recherches pour masquer la colonne des Widgets dans mes autres pages, je ne tombe que sur ce tuto mais malheureusement il ne marche pas. Merci quand même, en espérant que dans un futur proche quelqu'un puisse trouver la solution à ce problème.
    http://rayonbleu.blogspot.com/

    RépondreSupprimer
  50. Bonjour Soufiane - et merci infiniment pour ce tuto que j'ai essayé et qui marche à merveille
    voici la page d'accueil de mon blog : http://okibou.blogspot.com/

    cette fois, je voudrais supprimer ce widget sous le titre dans mes pages "autonomes" tout en le gardant dans la page d'accueil
    svp, pouvez-vous m'indiquer quel code ajouter au "b:if" ?
    merci là-aussi infiniment et bravo pour votre blog que je consulte beaucoup
    AGAP

    RépondreSupprimer
  51. Bonjour Soufiane,
    Comment fait-on pour cacher une barre latéral dans une page mais pas dans une autre ?
    J'ai en effet enlevé la barre latérale pour la page contenant ma google maps; en revanche du coup pour une autre page contenant du texte, le texte sort des marges du blog.
    Merci de ton aide !
    Guillaume

    RépondreSupprimer
  52. pardon Soufiane ! n'avais pas lu le commentaire d'Anonyme (06/02/2010)
    cependant l'ai essayé en l'insérant dans le b:if de ton astuce à la suite de
    #main-wrapper{width } et ça ne marche
    faut-il insérer l'astuce d'Anonyme dans le css du widget ?

    encore et encore et encore merci pour votre blog !!!

    RépondreSupprimer
  53. Et pour ne l'appliquer qu'à certaines pages en particulier, quel est le code ? Ou alors faut-il l'ajouter ailleurs ? Merci !!! (et super ce blog ...)

    RépondreSupprimer
  54. Je ne comprend pas ...
    Je voudrais cacher la barre de droite d'une seule page ... est-ce que c'est possible ?

    RépondreSupprimer
  55. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  56. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  57. Bonjour,

    Tout d'abord merci Soufiane grâce à toi mon blog à un peu plus de geule.

    J'ai retiré les commentaires et ma colonne de gauche de ma page d'accueil en utilisant l'astuce trouvé sur ce blog:
    http://www.anandraj.co.cc/2011/04/hide-blog-posts-from-blogger-home-page.html

    J'ai juste viré /div> à la fin parceque ça buggait sinon par rapport à l'astuce du blog.

    En esperant que ça donne des idées.

    ps: désolé pour les 2 commentaires supprimés, c'est la 1ère fois que je poste.

    RépondreSupprimer
  58. ça me branchais bien cette astuce moi aussi, mais là c'est un peu confus, pensez aux débutants en html ! (un abonné et fan)

    RépondreSupprimer
  59. Ah oui mon blog: http://picoulet.blogspot.com/ (avec plein de pages statiques qui aimeraient être débarrassées de leur colonne de droite ;)

    RépondreSupprimer
  60. Salut Soufiane, j'adore ton blog. Je suis novice sur blogger. Ton blog m'a beaucoup aidé. Merci ;-)

    Je voudrais supprimer la colonne de droite sur mon blog et laisser ainsi toute la place pour le message...

    J'ai tout essayé, mais aucun moyen!! Rhaaa

    Voici le template que j'ai choisi...

    http://btemplates.com/2011/blogger-template-shutter-shot/

    Si tu pouvais jetter un coup d'oeil...

    Merci beaucoup

    RépondreSupprimer
  61. Hello cold anyone help regarding this post, I could find in my static page...can any one help me, where to find it...Thanks in advance

    RépondreSupprimer
  62. Ton code ne fonctionne pas sur les nouveaux blogues créés par l'outil de création de modèles. Les anciens codes CSS ont été remplacés. Tu devrais mettre à jour tes informations et tes articles également. Merci ! ;)

    RépondreSupprimer
  63. Oui ça ne marche pas
    (http://benenohitoritabi.blogspot.fr/)

    RépondreSupprimer
  64. Bonjour,
    Je suis encore débutant, quand j'ai téléchargé mon nouvelle template sur mon Blog, mon article dans ce blog divise en deux, en haut et bas et les article qui s'affiche sont identique! donc je veux supprimer l'un dans les 2, aidez moi svp, grand merci!

    RépondreSupprimer

Copyright 2015 Soufiane.fr