Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Créer un page d'accueil statique sur Blogger

Suite à mon tutoriel pour afficher du contenu sur certaines page du blog, vous avez été nombreux à me demander comment créer une page statique sur Blogger. Comment cacher les articles et la barre latérale sur la page d'accueil, et les remplacer par des gadgets qui ne s'afficheraient que sur la page d'accueil ?

Et bien je vous explique tout dans ce nouveau tutoriel !

Créer un page d'accueil statique sur Blogger

Sommaire

  1. Faire une sauvegarde de votre blog
  2. Ajouter une nouvelle section pour la page d'accueil
  3. Modifier l'apparence de la section
  4. Cacher les articles et la barre latérale sur la page d'accueil
  5. N'afficher la nouvelle section QUE sur la page d'accueil
  6. Rectifier l'affichage des articles dans les aperçus

Faire une sauvegarde de votre blog

Comme toujours, faites une sauvegarde de votre thème avant d'y apporter des modifications !
Si vous faites une erreur vous pourrez alors facilement revenir en arrière !
Pour savoir comment faire une sauvegarde de son blog / thème et comment la charger en cas d'erreur, suivez le tutoriel  ;)

Ajouter une nouvelle section pour la page d'accueil

Une fois que vous avez fait une sauvegarde de votre blog, cliquez sur Modifier le code HTML :

Créer un page d'accueil statique sur Blogger

Cliquez n'importe où dans la boîte de code. Appuyez sur Ctrl et F en même temps (ou Cmd et F pour Mac). Un champ de recherche doit apparaître en haut à droite de la boîte de code. Si le champ de recherche apparaît en haut de la page web, cliquez bien à l'intérieur de la boîte de code et appuyez à nouveau sur Ctrl et F.

Dans le champ de recherche qui apparaît en haut à droite de la boîte de code collez :
<div class='main-outer'>
Et appuyez sur Entrer.
Vous serez dirigé vers ce code

Créer un page d'accueil statique sur Blogger

Au-dessus de cette ligne de code, nous allons ajouter une section. Une section est un bloc pouvant contenir des gadgets.
Voici le code que nous allons ajouter pour ajouter une section :
<b:section id='gadgets-accueil' showaddelement='yes' name='Gadgets Accueil'></b:section>
Collez ce code avant la ligne :
<div class='main-outer'>
Comme ceci :

Créer un page d'accueil statique sur Blogger

Enregistrez votre thème.

Maintenant vous pouvez ajouter des gadgets à cette nouvelle section. Pour cela allez dans Mise en Page, puis rechargez la page pour que la section apparaisse.

Vous verrez une nouvelle zone qui s'appelle Gadgets Accueil.
Ajoutez les gadgets que vous voulez afficher sur votre page d'accueil, en cliquant sur le lien Ajouter un gadget.

Créer un page d'accueil statique sur Blogger

Dans mon exemple, j'ai ajouté un gadget Image et un gadget Texte, ce qui donne :

Créer un page d'accueil statique sur Blogger

Modifier l'apparence de la section

Vous pouvez modifier l'apparence de votre section en utilisant le code CSS de cette section :
#gadgets-accueil {
}
Ajoutez ce code CSS avant al ligne suivante de votre thème :
]]></b:skin>

Cacher les articles et la barre latérale sur la page d'accueil

Maintenant que vous avez défini les gadgets que vous voulez afficher sur la page d'accueil, il faut cacher les articles et la barre latérale sur cette page.

Pour cela, il faut utiliser le code conditionnel pour la page d'accueil.
Vous pouvez retrouver toutes les infos sur ces codes sur ce tutoriel !
Le code pour la page d'accueil est donc :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
</b:if>
Collez ce code avant la ligne suivante dans votre thème :
</body>
Nous allons ajouter à ce code, un code CSS qui va simplement cacher le contenant des articles et de la barre latérale du blog.

Commencez par ajouter le code qui permet d'utiliser du code CSS dans le code conditionnel :
<style type='text/css'>
/* Codes CSS ici */
</style>
Comme ceci :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
/* Codes CSS ici */
</style>
</b:if>
Le code CSS pour cacher le contenant des articles et de la barre latérale est :
.main-outer {
    display: none;
}
Remplacez :
/* Codes CSS ici */
Par ce code CSS, comme ceci :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.main-outer {
    display: none;
}
</style>
</b:if>
Visuellement on obtient :

Créer un page d'accueil statique sur Blogger

Mais sur les autres pages du blog on a :

Créer un page d'accueil statique sur Blogger

N'afficher la nouvelle section QUE sur la page d'accueil

Maintenant, il faut cacher les gadgets de la nouvelle section sur toutes les autres pages du blog. Pour cela, il suffit de cacher la section en utilisant le code conditionnel pour toutes les pages du blog sauf le page d'accueil.

Si vous avez bien suivi mon tutoriel sur les codes conditionnels, vous savez qu'il suffit de remplacer le signe == du code pour la page d'accueil, par le signe != comme ceci :
<b:if cond='data:blog.url != data:blog.homepageUrl'>
</b:if>
Vous pouvez tout à fait utiliser ce code. Mais il existe une méthode un peu plus rapide si vous utilisez déjà le code conditionnel pour la page d'accueil (ce que nous faisons dans ce tutoriel).

Reprenez votre code conditionnel :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.main-outer {
    display: none;
}
</style>
</b:if>
La petite astuce consiste à ajouter :
<b:else/>
Avant la ligne :
</b:if>
Comme ceci :
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<style type='text/css'>
.main-outer {
    display: none;
}
</style>

<b:else/>

</b:if>
Cette ligne de code remplace le code conditionnel inverse. En gros, tout ce qui se trouve entre <b:else/> et </b:if> concernera toutes les autres pages du blog à part la page d'accueil.

On veut cacher la nouvelle section sur toutes les autres pages du blog sauf la page d'accueil. Il faut donc ajouter le code CSS pour cacher cette section :
#gadgets-accueil {
    display: none;
}
Comme ceci :
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<style type='text/css'>

.main-outer {
    display: none;
}

</style>

<b:else/>

<style type='text/css'>

#gadgets-accueil {
    display: none;
}

</style>

</b:if>
Votre code ressemblera à :

Créer un page d'accueil statique sur Blogger

Rectifier l'affichage des articles dans les aperçus

Le problème c'est que ces changements vont aussi s'appliquer sur les pages d'aperçu de vos articles, lors de la création de vos articles ou pages.

Voici ce que vous verrez sur la page d'aperçu d'un article :


Créer un page d'accueil statique sur Blogger

Pour rectifier cela, commencez par vérifier que vous avez installé jQuery sur votre blog.
Cherchez le terme suivant dans votre thème :
jquery
Si vous le trouvez, passez à l'étape suivante. Sinon, collez le code suivant :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Avant la ligne suivante dans votre thème :
</head>
Maintenant, ajoutez le code suivant :
<script>
//<![CDATA[ 
  var val = $(location).attr('href');
  if ( val.indexOf('/b/post-preview') !== -1 ) {  
    document.write("<style type='text/css'>.main-outer {display: block !important;} #gadgets-accueil {display: none !important;}</style>");
  }
//]]> 
</script>
Avant la ligne suivante de votre thème :
</body>
Comme ceci :

Créer un page d'accueil statique sur Blogger

Ce qui donne :

Créer un page d'accueil statique sur Blogger

Et voilà ! A vous de jouer avec les gadgets et de créer votre propre page d'accueil sur Blogger ! ;)

Autres articles

71 commentaires:

  1. J'adore ce tutoriel ! Par contre, est-il possible de faire apparaître une sorte de diaporama qui défile à la place d'une seul image comme tu le présente dans ce tutoriel ?

    RépondreSupprimer
    Réponses
    1. Bonjour Manon,
      Tu peux ajouter tous les gadgets que tu souhaites.
      Je n'ai pas fait de tutoriel pour créer un diaporama sur Blogger. Mais il en existe de nombreux sur internet. Généralement ce sont des codes HTML, CSS et JavaScript. Au lieu de coller les codes dans ton thème, tu peux simplement coller les codes dans un gadget HTML/JavaScript ;)

      Supprimer
  2. Bonsoir !
    Merci encore pour tous :)

    Peux tu me dire pourquoi Les widgets mis dans la page d’accueil s'affiche partout ? même sur mes pages etc.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu bien ajouté les codes pour cacher les gadgets de la page d'accueil sur le reste du blog ?
      Si oui, vérifies qu'il n'y a pas d'erreur : oubli de code, code en trop, etc.

      Supprimer
  3. Je suis en retard de quelques tutos à exécuter mais celui-ci correspond à ce que je pouvais attendre le plus. Merci énormément et à bientôt pour d'éventuels retours d'expérience !

    RépondreSupprimer
  4. Trop bien ce tuto! :D

    Par contre, petit truc sur lequel je coince: comment faire pour que ma page "Sommaire général" du blog occupe toute la page d'accueil? https://anskarad.blogspot.fr/p/sommaire-general.html
    Ce que je voudrais, c'est qu'on voit cette page à l'accueil en entier, comme si on avait cliqué sur le lien y conduisant, et pas simplement en mettant sur la page d'accueil le lien cliquable.

    Je sais pas si c'est très clair. ^^'
    (En gros, sur la page d'accueil, je voudrais qu'on voit exactement le contenu qu'il y a dans ma page "sommaire". (C'est peut-être plus clair comme ça. ^^' ))

    RépondreSupprimer
  5. *A moins qu'il soit possible de diviser cette section en 2 ou 3, à l'instar du footer? :/ (ça serait plus pratique! ^^)

    RépondreSupprimer
    Réponses
    1. Bonjour, avez-vous réussi à diviser la section en 3 et si oui comment avez-vous fait ? J'aimerais beaucoup avoir une page avec trois colonnes et dans chacune des widgets différents. J'ai créer mes widgets mais malgré toutes mes tentatives, ils restent les uns au dessus des autres. Merci d'avance pour votre aide.

      Supprimer
    2. Bonjour Arlé,
      Tu peux créer une section à plusieurs colonnes. Il faut remplacer le code qui créé la nouvelle section par un code qui va créer plusieurs sections sous forme de colonnes :

      2 COLONNES :
      -------------------

      <table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-accueil'>
      <tbody>
      <tr>
      <td class='first columns-cell'>
      <b:section id='gadgets-accueil-gauche' name='Gadgets Accueil Gauche' showaddelement='yes'></b:section>
      </td>
      <td class='columns-cell'>
      <b:section id='gadgets-accueil-droite' name='Gadgets Accueil Droite' showaddelement='yes'></b:section>
      </td>
      </tr>
      </tbody>
      </table>

      Tu auras 2 colonnes dans Mise en page et pourras y ajouter les gadgets de ton choix.
      Voici les codes CSS correspondants pour cibler chaque colonne si besoin :

      #gadgets-accueil-gauche {
      }

      #gadgets-accueil-droite {
      }



      3 COLONNES :
      -------------------

      <table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-accueil'>
      <tbody>
      <tr>
      <td class='first columns-cell'>
      <b:section id='gadgets-accueil-gauche' name='Gadgets Accueil Gauche' showaddelement='yes'></b:section>
      </td>
      <td class='columns-cell'>
      <b:section id='gadgets-accueil-centre' name='Gadgets Accueil Centre' showaddelement='yes'></b:section>
      </td>
      <td class='columns-cell'>
      <b:section id='gadgets-accueil-droite' name='Gadgets Accueil Droite' showaddelement='yes'></b:section>
      </td>
      </tr>
      </tbody>
      </table>

      Tu auras 3 colonnes dans Mise en page et pourras y ajouter les gadgets de ton choix.
      Voici les codes CSS correspondants pour cibler chaque colonne si besoin :

      #gadgets-accueil-gauche {
      }

      #gadgets-accueil-centre {
      }

      #gadgets-accueil-droite {
      }

      Supprimer
  6. Yop! ^^
    Désolée d'avance du spam, du coup inutile de répondre ou même publier mes 2 autres commentaires précédents, j'ai trouvé un moyen! (Par contre j'ai pleins de questions.... >. <)

    **Le souci étant que ce moyen est un slider, que j'ai bien galéré pour en trouver un dans ce que je cherchais et qui marche. Celui que j'ai trouvé est actuellement en ligne sur mon blog, mais comme je l'ai fait sur un site, je contrôle pas vraiment le code...
    Du coup, y'a une méchante pub qui clignote en dessous mon slide et c'est très moche, mais je ne sais pas comment l'enlever... :/

    J'ai créé mon slide à cette adresse: https://www.powr.io/tutorials/how-to-add-image-slider-widget-to-your-blogger-site

    Et ça me fait une pub pour cette page: https://www.powr.io/?via=freewebsitetools

    Aurais-tu une solution....? :/
    (Ou un site ou un code pour créer un slide "maitrisable"? >. <)

    ** La partie rectifier les affichages des articles dans l'aperçu ne marche pas pour ma part.. :/

    ** C'est un détail ceci, mais le titre de mon image dans la section "gadget accueil" est visible (alors que les autres sont configurés pour ne pas l'être). J'ai mis un vrai titre du coup, mais je n'arrive pas à trouver où faut-il taper du code dans le template pour le customiser (font/ font-size, etc...). :/

    **Je voulais aussi savoir comment faire pour que l'on puisse voir seulement le gadget d'attribution sans voir les autres du foot-outer? Il faut les cacher un par un?

    **Grâce à mon slider et ton tuto (!), j'ai réussi à créer une page d'accueil façon "entrer dans le site", lorsqu'on clique sur une slide en particulier, on peut accéder à mon blog en entier, sous le label "." (on le voit pas dans la barre URL, mais à bien y regarder les libellés des articles, il y ait!). Sauf que j'avais pas prévu que ça me montrerait TOUS les articles, sans un nombre max d'affichés (contrairement à avant). Et du coup c'est très long... :/
    Y'a-t-il un moyen de limiter le nombre d'articles affiché à l'écran dans les libellés, et de voir les suivants/ précédents avec des boutons "suivant" et "précédent"? :/

    Si tu pourrais m'aider à résoudre tous ces petits problèmes (ou une partie), je t'en serais très reconnaissante!

    Mille mercis d'avance! >.<

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour le diaporama, je n'ai pas créé de tutoriel sur le sujet mais c'est noté sur ma liste de tutos à faire ;)
      Par contre pour le texte qui clignote, c'est les credits pour le diaporama. En utilisant le diaporama, ils demandent d'inclure un texte et lien vers le site.

      ** Tu peux cacher le titre de ton gadget Image en retrouvant le nom de ton gadget. Pour savoir comment retrouver le nom d'un gadget tu peux suivre ces instructions.
      Le nom de ton gadget image est Image7. A ça il faut cibler le titre du gadget qui est h2. Donc tu peux utiliser le code CSS suivant pour cacher le titre de ce gadget :

      #Image7 h2 {
      display: none;
      }

      ** Pour cacher les gadgets de ton pied de page, sauf le gadget attribution tu peux utiliser le code CSS suivant :

      table.section-columns.columns-3, #footer-1 {
      display: none;
      }

      Ensuite il faut rectifier un espace au-dessus de ton gadget Attribution :

      #Attribution1 {
      margin-top: 0 !important;
      }

      Utilise ces codes dans le même code conditionnel que pour la page d'accueil statique.

      ** Pour limiter le nombre d'articles affichés sur tes pages de libellés, ajoute le code suivant à la fin des URL dans ton slider :

      ?max-results=3

      Par exemple, au lieu d'avoir les URL suivants :

      https://anskarad.blogspot.fr/search/label

      On obtient :

      https://anskarad.blogspot.fr/search/label?max-results=3
      https://anskarad.blogspot.fr/search/label/Coup%20de%20coeur?max-results=3

      Remplace 3 à la fin de :

      ?max-results=3

      Par le nombre max d'articles que tu souhaites afficher. Et voilà ;)

      Supprimer
    2. Merci beaucoup pour ta réponse! :D

      Concernant le gadget d'attribution, j'ai essayé mais ça ne marche pas, même avec !important. J'ai essayé à tous les codes " ", mais ça ne veut marcher sur aucun d'entre eux. Lequel faut-il utiliser?

      Et le code pour rétablir l'aperçu correct des articles ne marche pas non plus.. :/

      Supprimer
    3. Pour les gadgets de ton pied de page, essaie d'ajouter !important après la valeur, comme ceci :

      table.section-columns.columns-3, #footer-1 {
      display: none !important;
      }

      Attention aussi à bien supprimer ton code CSS qui cache le pied de page sur la page d'accueil ;)

      Supprimer
  7. Bonjour Catherine,

    Je me permets de vous contacter car j'ai plusieurs soucis par rapport à ce tutoriel. (pour information, je n'ai pas suivis le précédant tutoriel (AFFICHER DU CONTENU SUR CERTAINES PAGES DU BLOG SUR BLOGGER), en espérant que ce n'est pas ceci la cause!). Voici mes (multiples...) questions:

    1. J'ai bien suivis les indications pour rectifier l'affichage des articles dans les aperçus, et pourtant lorsque je clique sur aperçu de l'article, je tombe toujours sur la page d'accueil. Est-ce que je me suis trompée dans le code, ou, est-ce qu'il manque un élément?

    2. Ma deuxième question est liée à la mise en page de cette page d'accueil. Après plusieurs essais, je n'ai pas réussis à trouver comment centrer le titre du gadget "texte", ainsi que le gadget "image". De plus, lorsque j'ai créé mon gadget "image", je suis obligée de mettre un titre, alors que je n'en souhaiterais pas (et j'ai aperçu sur votre exemple qu'il n'y en avait pas). J'ai relu et relu votre tutoriel, mais rien n'y fait, je n'ai pas réussis à le supprimer.

    3. Mon dernier problème est lié à deux autres tutoriels, mais je me permets de le poser ici avec les autres. Je n'arrive pas à centrer mes boutons valider sur ma barre de recherche ainsi que dans mon formulaire de contact. Je suis persuadée que ce n'est qu'un petit élément à ajouter, mais je n'ai pas réussis à trouver quoi...

    Je vous remercie d'avance pour votre précieuse aide et surtout un grand MERCI pour tous vos tutoriels sans lesquels je ne serais pas arrivée à un tel visuel !

    Florence

    PS: L'adresse de mon blog: http://carnetsdaventure.blogspot.ch/

    RépondreSupprimer
    Réponses
    1. Bonjour Florence,
      1. Essaye avec le code suivant à la place de celui donné dans le tutoriel :

      <script>
      //<![CDATA[
      var val = $(location).attr('href');
      if ( val.indexOf('/b/post-preview') !== -1 ) {
      document.write("<style type='text/css'>.main-outer {display: block !important;} #gadgets-accueil {display: none !important;}</style>");
      }
      //]]>
      </script>

      2. Pour centrer le titre de ton gadget Texte, il faut d'abord trouver le nom de ton gadget, qui est HTML7. ensuite on va cibler le titre du gadget en ajoutant h2. Tu peux donc utiliser le code CSS suivant pour centrer le titre de ce gadget :

      #HTML7 h2 {
      text-align: center;
      }

      De la même manière, tu peux cacher le titre de ton gadget Image avec le code CSS suivant :

      #Image6 h2 {
      display: none;
      }

      En remplaçant Image6 par le nom de ton gadget Image.

      3. J'ai vu que tu as réussi à régler ce problème :)

      Supprimer
    2. Hello!

      Concernant l'aperçu, j'ai le même problème et ce code ne m'aide pas plus... J'ignore d'où peut venir l'erreur. :/

      Supprimer
    3. Bonjour,
      Dans ce cas colle le code suivant :

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

      Avant la ligne suivante de ton thème :

      </head>

      Supprimer
    4. Génial, ça marche! Merci beaucoup! :D

      Supprimer
    5. Rebonjour Catherine,

      Je viens de voir votre réponse et voici les résultats:

      1. J'ai essayé avec le code que vous m'avez donné, mais cela n'a pas fonctionné. Après quoi, j'ai aussi ajouté le code que vous avez donné à Arlé et maintenant cela fonctionne ! :D

      2. J'avais finalement fait la mise en page souhaitée dans un article, puis j'avais copié/collé le code dans un gadget HTML/JavaScript. Je testerai votre réponse la prochaine fois que je modifie ma page d'accueil.

      3. Oui j'ai finalement trouvé le moyen avec encore un peu plus de recherche et un soupçon de bon sens ;)

      Encore merci pour vos réponses!

      Florence

      Supprimer
  8. merci beaucoup ! C'est rop bien ce que tu fais

    RépondreSupprimer
  9. Bonjour Catherine,
    Je ne savais pas trop ou laisser mon commentaire alors je le laisse sur ton dernier article. Je tenais vraiment à te dire merci du fond du cœur car grâce à toi j’ai tout appris sur les codes CSS et HTML. Depuis que j’ai connu ton blog (il y’a 2 ans) j’ai appris grâce à tes explications comment manier les codes et aujourd’hui je me retrouve assez facilement devant des codes. J’ai téléchargé un Template gratuit que j’ai entièrement modifié et tout cela grâce à toi, et tes précieux conseils et tes explications faciles à comprendre. Merci, merci, merci, merci !
    S’il y’avais moyen de faire une donation je pense que je l’aurais déjà fait.
    Bien à toi

    RépondreSupprimer
    Réponses
    1. Merci pour ton message ! Ça me fait très plaisir ^^
      Je suis contente d'avoir pu t'aider avec ton blog qui est très sympa au passage ;)

      Supprimer
  10. Bonjour,
    j'ai un petit problème dans le code html de mon blog (http://miss--fashionista.blogspot.fr/). J'ai voulu incorporer ma propre écriture pour les titres de mes articles, mais je n'y arrive pas et pourtant j'ai fais avec font-face, j'ai suivi un tutoriel mais rien ne s'affiche et je ne vois pas quel est le problème. J'espère que tu pourras m'aider et bonne continuation j'adore ton blog ! ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      J'ai eu des problèmes avec les @font-face sur Blogger. En fait, la solution qui a fonctionné pour moi est de charger les fichiers de la police dans un dossier public Dropbox. C'est un dossier spécial que tu peux avoir avec les comptes payants Dropbox. Dans ce dossier, les fichiers ont une adresse url spéciale qui permet l'accès public. Il faut utiliser cette adresse url dans les paramètres @font-face.

      Supprimer
    2. Ah okay d'accord. ET il n'y a pas d'autres solutions non payantes, d'autres hébergeurs ?

      Supprimer
    3. Bonjour,
      j'ai remarqué qu'on pouvait aussi faire un dossier public avec Drive, mais pourtant cela ne fonctionne pas, est-ce qu'il s'agit d'une erreur de ma part ?

      Supprimer
    4. Bonjour,
      Je ne sais pas si c'est possible avec Drive.
      Le mieux serait de mettre les fichiers sur un serveur hébergé. Par exemple en achetant un nom de domaine on a souvent un espace sur le web où est installé le site web associé à ce nom de domaine. Mais cette solution est également payante car il faut acheter un nom de domaine et un hébergement.

      Supprimer
  11. aah merci pour ce tuto que j'attendais avec impatience ! mais malheureusement je suis déja bloqué des le début ^^
    J'ai bien réussi a ajouter la selection Acceuil et mettre le premier gadjet mais je ne comprends pas la suite du tuto ... Je ne comprends pas comment on fait pour personnaliser. J'ai ajouter une image mais je ne comprends pas comment je peux la center par exemple ...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Dans ce tutoriel j'explique comment créer une zone de gadgets qui ne s'affiche que sur la page d'accueil du site. Je n'entre pas dans les détails de la personnalisation des gadgets car ce serait beaucoup trop long, chaque gadget étant différent ;)
      Néanmoins, tu peux ajouter des codes CSS pour tes gadgets en trouvant le nom de ton gadget.
      J'explique ici comment trouver le nom d'un gadget.
      Si, par exemple, le nom de ton gadget est Image7, et que tu souhaites modifier le titre de ce gadget, il faut utiliser le code CSS pour les titres qui est h2. Donc tu peux utiliser le code CSS suivant pour modifier l'apparence du titre de ce gadget :

      #Image7 h2 {
      }

      Ajoute les paramètres à modifier avant le signe } de ce code CSS.
      Ajoute ce code CSS avant le ligne suivante de ton thème :

      ]]></b:skin>

      Supprimer
    2. Je n'arrive toujours pas à centrer l'image de ma " page d'accueil " :'(

      Supprimer
    3. Bonjour,
      Je pense que le problème vient de ton erreur dans le code CSS de ton menu. Je t'ai donné les codes en question dans ton autre commentaire. Si cela ne change rien, alors il faut vérifier tes codes CSS et ceux qui les précèdent. Vérifie qu'il ne manque pas un des signes suivants (ou qu'il n'y en ai pas un en trop) :

      { : ; } /* */

      Supprimer
  12. Bonjour Catherine,

    Tout d'abord, merci énormément pour tout ce travail que tu fais, c'est très généreux de mettre à notre disposition autant d'informations et de tutoriels!

    J'ai pu modifier mon site/blog ces derniers jours en utilisant tes tutos, mais j'ai un problème que je n'arrive pas à résoudre, peut-être pourras-tu m'aider.

    J'ai créer une page d'accueil fixe, et j'ai ajouter deux gadgets (ou bien ce sont des widgets?) via la mise en page. Il y a un gadget texte et un gadget image, sauf qu'ils sont l'un en dessous de l'autre, et moi j'aimerais que le texte soit à droite de l'image.

    J'ai chercher des codes (#Text1 {
    float:left;
    } par exemple), mais ça ne fonctionne jamais. Pourrais-tu m'indiquer comment procéder s'il te plait?

    Une fois que j'aurais réussi à mettre le texte à droite, j'aimerai le personnaliser. Quel genre de code dois-je insérer dans mon gadget texte pour le modifier?

    Je te remercie encore!
    Julie

    RépondreSupprimer
    Réponses
    1. Bonjour Julie,
      Tu peux mettre 2 gadgets côte à côte avec ce code CSS :

      #nomdugadget1, #nomdugadget2 {
      display: inline-block;
      width: 49%;
      vertical-align: top;
      }

      Remplace #nomdugadget1 et #nomdugadget2 par le nom de tes gadgets.

      Ensuite pour modifier l'apparence de ton gadget texte, il faut également utiliser le nom de ton gadget :

      #nomdugadget1 {
      }

      Si tu veux modifier l'apparence du titre de ce gadget utilise :

      #nomdugadget1 h2 {
      }

      Si tu veux modifier un lien :

      #nomdugadget1 a {
      }

      Supprimer
    2. Bonsoir Catherine,

      Merci pour ta réponse!

      Pourrais-tu m'expliquer ou je dois insérer le premier code que tu m'as écris stp? Cela ne marche pas quand je le fais, il doit y avoir un truc.

      Merci à toi et joyeuses fêtes!

      Julie

      Supprimer
    3. Bonjour Julie,
      Colle ces codes avant la ligne suivante de ton thème :
      ]]></b:skin>

      Si cela ne fonctionne pas c'est qu'il y a une erreur dans tes codes CSS. Elle peut être dans les codes que tu as collé ou dans n'importe quel code le précédent.
      Vérifie qu'il ne manque pas un des signes suivants (ou qu'il n'y en ai pas un en trop) :

      { : ; } /* */

      Une seule erreur et tout ce qui suit n'est pas, ou mal, pris en compte par le navigateur.

      Supprimer
  13. Bonjour, merci pour vos précieux tutos. Je viens de créer un blog pour une nouvelle association et n'y connaissant pas grand chose, vos tutos m'ont bien aidé. Cependant il persiste un problème. En effet j'ai crée une Page "Article" dans un onglet qui, via du code, affiche certaines catégories d'articles. Or depuis que j'ai ma page d'accueil statique, lorsque je clic sur l'une des catégories, le lien Afficher tous les articles pointent vers ma page d'accueil statique alors que je souhaiterais que ça pointe sur l'ensemble de mes articles. Ai-je raté une étape ? Y a t'il un moyen de faire cela ? Merci en tout cas

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En fait c'est normal, car ce lien renvoie vers la page d'accueil du blog qui contient normalement les articles. Or maintenant il contient la page statique.
      Pour changer ce lien, il faut modifier le code HTML du blog. Je pense qu'il faudrait que j'en fasse un tutoriel.
      Néanmoins, tu peux ajouter un lien manuellement sur ta page Articles, par exemple, qui renvoie vers ce lien :

      https://bloglavieapres.blogspot.fr/search?=%27%27

      Ce lien affichera tous les articles du blog.

      Supprimer
  14. Bonjour,
    ce n'est peut-être pas le bon endroit pour poster ça, mais je me demandais si c'était facile de faire des tableaux de conversion en html/css pour blogger, et comment le faire ? Genre une case à gauche ou on peut rentrer une valeur (x) et une à droite avec le résultat de l'équation (y), parce que je n'ai pas trouvé de tuto pour ça ...
    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour Ed.,
      Je t'avoue que je n'ai jamais regardé pour faire des opérations comme ça. Pour le réaliser il faudrait utiliser du JavaScript ou du Jquery car le HTML ne concerne que la structure des pages et le CSS leur apparence ;)

      Supprimer
    2. D'accord, je vais regarder mais je ne pense pas être assez doué en codage pour ça, mais merci quand même !

      Supprimer
  15. Bonjour Catherine,
    Merci pour le tuto, c'est bien utile, or nous avons un petit pb: nous n'arrivons pas à faire disparaitre le titre de l'image de la page d'accueil statique. Nous avons essayé au moins 30 emplacements différents pour mettre le code dans le code HTML mais rien ne fonctionne.
    Merci de nous donner un coup de pouce ;)

    Laura & Cyril

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour cacher le titre d'un gadget il faut d'abord trouver le nom du gadget.
      Si, par exemple, le nom de ton gadget est Image7, et que tu souhaites modifier le titre de ce gadget (ou le cacher), il faut utiliser le code CSS pour les titres qui est h2. Donc tu peux utiliser le code CSS suivant pour modifier l'apparence du titre de ce gadget :

      #Image7 h2 {
      }

      Ajoute les paramètres à modifier avant le signe } de ce code CSS.
      Par exemple, pour cacher le titre ajoute display: none; comme ceci :

      #Image7 h2 {
      display: none;
      }

      Ajoute ce code CSS avant le ligne suivante de ton thème :

      ]]></b:skin>

      Si cela ne fonctionne pas c'est qu'il y a une erreur dans tes codes CSS. Elle peut être dans les codes que tu as collé ou dans n'importe quel code le précédent.
      Vérifie qu'il ne manque pas un des signes suivants (ou qu'il n'y en ai pas un en trop) :

      { : ; } /* */

      Une seule erreur et tout ce qui suit n'est pas, ou mal, pris en compte par le navigateur ;)

      Supprimer
  16. Bonjour,
    je suis entrain de construire le site internet du site historique pour lequel je travailles, en utilisant un blog blogger.
    Merci beaucoup pour ce tutoriel (et pour tous les autres). Ils m'ont été indispensables pour créer une page d'accueil différente du reste du site.
    Mon ultime soucis, c'est dans la répartition des différents gadgets que j'ai inséré sur la page d'accueil statique.
    Je souhaiterais diviser le "gadget accueil " en trois colonnes, comme on le ferait pour un pied de page. De cette manière, je pourrais organiser mes différents widgets en superposant certains ou en alignant d'autres.
    Est-ce que c'est possible ? Et si oui, auriez-vous une méthode à me donner ?
    J'ai essayé plusieurs techniques, notamment l'utilisation de balises "div" directement de le code de section mais ça ne fonctionne pas.
    Pour l'instant, le site n'est pas publié donc invisible.
    Merci par avance.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il y a plusieurs options :
      - Si tu souhaites afficher 3 gadgets les uns à côté des autres alors tu peux simplement avec du code CSS les placer sur la même ligne. Tu peux, par exemple, ajouter ce code CSS :

      #gadgets-accueil .widget {
      display: inline-block; /* Dispose les éléments sur la même ligne */
      width: 32%; /* Définit la largeur à environ un tiers de la largeur du contenant */
      margin-left: 0.25%; /* Définit la marge à gauche des éléments */
      margin-right: 0.25%; /* Définit la marge à droite des éléments */
      }

      Il faudra peut-être jouer sur le pourcentage des marges pour que les éléments soient bien sur la même ligne. S'ils ne le sont pas, réduit un peu la marge de chaque côté jusqu'a ce que les 3 éléments soient bien sur la même ligne.

      - Autre méthode : Créer une section à 3 colonnes comme le pied de page du blog.
      Dans ce cas, il faut remplacer le code qui créé la nouvelle section par un code qui va créer 3 sections sous forme de 3 colonnes :

      <table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-accueil'>
      <tbody>
      <tr>
      <td class='first columns-cell'>
      <b:section id='gadgets-accueil-gauche' name='Gadgets Accueil Gauche' showaddelement='yes'></b:section>
      </td>
      <td class='columns-cell'>
      <b:section id='gadgets-accueil-centre' name='Gadgets Accueil Centre' showaddelement='yes'></b:section>
      </td>
      <td class='columns-cell'>
      <b:section id='gadgets-accueil-droite' name='Gadgets Accueil Droite' showaddelement='yes'></b:section>
      </td>
      </tr>
      </tbody>
      </table>

      Tu auras 3 colonnes dans Mise en page et pourras y ajouter les gadgets de ton choix.
      Voici les codes CSS correspondants pour cibler chaque colonne si besoin :

      #gadgets-accueil-gauche {
      }

      #gadgets-accueil-centre {
      }

      #gadgets-accueil-droite {
      }

      Supprimer
  17. Coucou !
    Oh bah zut c'est justement le tutoriel que j'aurais toujours voulu connaitre et maintenant que tu le publies je n'ai pas du tout ce codage sur mon blog ( et compagnie ! ) crotte :(
    En tout cas merci pour ce merveilleux tuto !!
    ( Et bonne année 2017 !!)

    RépondreSupprimer
  18. Bonjour Catherine ! Merci pour ce tuto ! Pour ma part je voudrais qu'apparaisse le dernier article publié avec le lien directement dessus et pas simplement une image et du texte. Y a t-il un code en particulier ?
    Merci beaucoup et bonne journée !

    RépondreSupprimer
    Réponses
    1. Bonjour Romane,
      On peut créer un code pour afficher le dernier article publié avec un lien sur l'image de l'article. Je vais bientôt faire un tutoriel qui affiche les derniers articles du blog sous forme de diaporama, mais je vais également en faire un qui affiche les derniers articles du blog. Tu pourras t'en inspirer pour créer ce que tu souhaites faire ;)

      Supprimer
  19. Bonjour ! Je viens de tomber sur ton blog, il est vraiment super ! J'aimerais bien me lancer aussi mais je ne comprends presque rien... Aurais-tu fait un article pour les débutants ? Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je n'ai pas fait d'article pour débuter sur Blogger, mais pour comprendre les codes CSS et HTML tu peux lire mes premiers tutoriels qui expliquent plus en détail les codes CSS. Tu peux trouver tous mes tutoriels en cliquant sur Tutoriels dans le menu en haut de page ;)

      Supprimer
  20. Bonjour Catherine,

    je te félicite pour le graphisme de ton blog, tout en douceur et délicatesse, quand au contenu merci de consacrer un peu de ton temps pour nous transmettre une partie de ton savoir :)

    Je viens de publier un nouveau blog cette année pour partager aussi un peu de mon expérience culinaire, la version de test se trouve ici :
    http://paparafmott-test.blogspot.fr/

    j'ai appliqué tes correctifs pour ajouter une page d'accueil statique avec 3 colonnes de gadgets et j'ai une petite question complémentaire à ce sujet :

    est-ce que je peux gérer individuellement la largeur des 3 colonnes (je voudrais régler les même largeurs que pour l'affichage des articles soit 1500px pour la colonne centrale et 250px pour les colonnes latérales) ?

    Bonne journée

    RépondreSupprimer
  21. j'ai ajouté la largeur de colonne dans les entêtes du tableau :
    td class='first columns-cell' width='250px'
    je ne sais pas si c'est académique mais ça fonctionne

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui tu peux tout à fait spécifier la largeur des colonnes en rajoutant width='250px' comme tu l'as fait :)

      Supprimer
    2. il me reste un problème d'affichage en double de l'entête sur la version mobile, je ne sais pas si on peut accéder au code ?

      Supprimer
    3. Bonjour,
      Il me semble que ton gadget d'en-tête ne se trouve pas dans le contenant Header. A la place tu as 2 gadgets d'en-tête, un premier dans ta section accueil, et un autre dans ta section principale.
      Si tu déplaces un des 2 en-têtes dans la partie Header, et que tu supprimes l'autre, alors ça devrait régler le problème :)

      Supprimer
    4. Ce commentaire a été supprimé par l'auteur.

      Supprimer
    5. Bonjour,
      C'est une bonne idée de partager des menus. Généralement on trouve facilement des recettes mais pas forcément des menus :)
      C'est une bonne question. Je ne sais pas si cela est faisable sur Blogger. On est assez limité dans les informations des articles dans le flux d'articles. Généralement on peut accéder à la première image de l'article, le titre, la date, le libellé, le nombre de commentaire, l'url de l'article. Mais pas sûr que l'on puisse récupérer le titre ou le text-alternatif d'une image. Je vais m'informer sur le sujet :)

      Supprimer
    6. Bonjour Catherine,
      as-tu trouvé un moyen de rechercher des images à partir du titre ?

      Supprimer
    7. Bonjour,
      Malheureusement il me semble que cela ne soit pas possible. Cette information n'est pas dans le flux d'articles du blog. Je te conseil donc d'utiliser les libellés des articles pour créer des mots-clés pour les différents menus / recettes.

      Supprimer
  22. Bonsoir Cath ! J'ai découvert ton blog depuis peu et je me régale pour la modification de mon blog. J'ai suivi ce tuto pour créer cette page d'accueil, j'y ai mis deux gadgets, une image et un texte, puis j'ai vu dans le commentaire qu'on pouvait créer une section à deux colonnes. Alors j'ai voulu remplacer comme tu as dis le code du la section "gadget-accueil" par celui des deux section. Seulement me voilà bloqué, dans "mise en page" dans blogger, j'ai toujours qu'une seule section accueil qui apparaît, avec mes deux gadgets dedans (je ne peux les supprimer, et l'image est réduite à 150px). Je suspecte une partie du code HTML de garder en archive ce qu'on a écrit précédemment mais je ne suis pas sur de ça. Peux-tu jeter un oeil à mon problème s'il te plait ? J'aimerais retrouver mes deux colonnes sur cette page d'accueil, une pour l'image, une pour le texte.

    Le lien de mon blog: lamuseaplumes.blogspot.fr

    Merci beaucoup, et continue comme ça !!

    RépondreSupprimer
    Réponses
    1. Bonjour Guillaume,
      Blogger ne conserve pas en archive le code du thème.
      Par contre une fois les modifications effectuées dans le code vas sur Mise en page. Recharge ensuite la page Mise en Page en appuyant sur F5 (sur PC). Cela permet de mettre à jour la page dans le navigateur avec les nouvelles modifications ;)
      Si les modifications ne s'affichent toujours pas, vérifie que tu n'as pas fait d'erreur en collant/modifiant le code de la nouvelle section.

      Supprimer
    2. Bonjour Catherine,

      Merci beaucoup pour cette réponse aussi rapide. Effectivement je me suis rendu compte de cette manipulation peu de temps après avoir posté mon commentaire. Merci pour tous tes petits tutoriels, j'ai refais entièrement mon blog grâce à toi. Continue comme ça je te souhaite le meilleur !

      Supprimer
  23. Bonjour, Merci pour ces informations très utiles :)
    J'ai installé une page d'accueil statique, mais il me semble que ces changements ne sont pas appliqués sur tél portables et tablettes. J'ai dû annuler la version tel portable, mais le résultat est assez moche, ce qui est dommage. Y'aurait-il un moyen de résoudre ça?
    Merci :)
    http://www.horizonfrance.com.br/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème peut venir des gadgets qu'il faut activer sur la version mobile.
      Fait une sauvegarde de ton thème.
      Ensuite retrouve le code de ta nouvelle section.
      Repère les lignes suivantes à l'intérieur de cette section :

      <b:widget id='Image1'

      Image1 est le nom de ton gadget et peut changer selon le gadget.
      A la suite de ce morceau de code colle :

      mobile='yes'

      Comme ceci :

      <b:widget id='HTML3' mobile='yes'

      Supprimer
  24. C'est super, je vous remercie énormément pour cette réponse. Elle a fonctionné! Par contre, je me trouve face à 2 pb sur la version mobile.
    1. Le premier est la disparition de la barre latérale où il y a bcp d'informations importantes. J'image que la solution pour la rétablir inclut le code mobile='yes' mais je ne sais pas où trouver le code de la barre latérale (je suis novice en programmation)
    2. Le second est que la taille du texte ne s'adapte pas à la taille de l'écran, ce qui gêne la lecture.... y'a-t-il une astuce disponible pour arranger ça?
    Encore une fois, un énorme merci pour votre site et toutes ses précieuses informations :)

    RépondreSupprimer
    Réponses
    1. Bonjour Sonia,
      Oui par défaut les gadgets sont désactivés sur mobile. Pour retrouver les gadgets de la barre latérale, tu peux chercher ce code :

      sidebar-right-1

      Si ta barre latérale est à gauche, cherches :

      sidebar-left-1

      Pour que la taille du texte s'adapte à la taille de l'écran il faut remplacer toutes les tailles de texte en px pour les remplacer par des em. Tu peux consulter cet article qui explique comment ça marche ;)

      Supprimer
  25. Merci! C'est vraiment génial de répondre ainsi !
    J'ai essayé de faire apparaître la sidebar, mais ça n'a pas fonctionné. Il doit y avoir un détail dans le code que je ne domine pas.
    Pour le Em, c'est vraiment très bien expliqué. Comme c'est assez technique, j'ai un peu peur de m'y coller et de tout chambouler....
    En tout cas, c'est super! J'ai un site tout neuf et tout beau grâce à toi! :)

    RépondreSupprimer
    Réponses
    1. Bonjour Sonia,
      Par défaut sur mobile la barre latérale est désactivée car prendrait trop de place à l'écran et réduirait la zone des articles. Les gadgets de la barre latérale (si activés) sont donc déplacés dans le pied de page. C'est une mise en page classique sur mobile pour assurer une lisibilité optimale sur petit écran ;)

      Supprimer
  26. Bonsoir!
    Merci beaucoup pour ce tutoriel, mais une question me reste.
    Comment puis-je faire pour masquer un seul article de ma page d'accueil ?
    En fait il s'agit de l'article sur lequel j'ai établis le sommaire de mon blog. J'ai spécialement créé un onglet "sommaire" pour faire apparaître cet article à cet endroit, et j'aimerais bien qu'il disparaisse de ma page d'accueil. Comment faire ?
    Je vous remercie chaleureusement!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      On ne peut pas cacher un article en particulier sur le blog. Pour créer du contenu qui ne s'affiche pas dans le flux d'articles il faut utiliser créer une page au lieu d'un article. Les pages ne s'affichent pas dans les articles car ne sont pas datés. Utilise les pages pour créer un sommaire, une page de contact, un page A propos, etc. ;)

      Supprimer
    2. Bonjour,
      Merci pour cette précision!

      Supprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger