Archiver les billets du blog

Mise à jour du 1er janvier 2013 : j'ai rafraîchi le tutoriel (nouvelles captures, mises à jour) et j'ai ajouté une section expliquant comment styler le menu déroulant aux couleurs de votre site.

Jimdo n'archive pas automatiquement les billets du blog. C'est une fonction qui manque cruellement à ce génial système de publication en ligne. Heureusement, on peut la simuler manuellement sans difficultés. Traditionnellement, on classe les billets d'un blog de deux manières : par catégories ou par mois. Je vous recommande de faire cohabiter les deux méthodes de classement sur votre blog, afin de laisser à vos visiteurs le choix entre une navigation temporelle et une navigation thématique.

Dans ce tutoriel, nous allons donc voir comment :

  • Créer des archives thématiques : on opère un regroupement thématique de tous les billets en rapport avec la cuisine, puis de tous ceux qui sont en lien avec le bricolage, et ainsi de suite.
  • Créer des archives mensuelles : sur une page, on liste tous les billets publiés en décembre 2012, puis sur une autre tous les billets qui datent de janvier 2013, etc.
  • Des menus déroulants compacts et pratiques : pour gagner de la place sur le site, on gère les archives grâce à des menus déroulants aux couleurs personnalisables

Créer des archives thématiques des billets

C'est la classification la plus facile à faire. Elle consiste à afficher sur une seule page tous les billets appartenant à une même catégorie. Pour cela, il faut "tagger" les billets au moment où on les crée avec des étiquettes thématiques. Voici les étapes à suivre :

1. Création du billet du blog

On crée un billet en lui attribuant une ou plusieurs catégories, comme ici : "Cuisine" et "Dessert".

Création d'un billet auquel on affecte un ou plusieurs tags
Création d'un billet auquel on affecte un ou plusieurs "tags"
Tutoriel Jimdo - image 8
Voici le résultat une fois le billet enregistré

2. Création du menu des archives

Dans le menu de navigation du site, on crée une nouvelle page intitulée Catégories du blog (par exemple), puis on crée une sous-rubrique nommée Cuisine (par exemple). Désormais, on utilisera le tag Cuisine pour catégoriser toutes les recettes afin qu'elles soient archivées sur cette page.

Screenshot : création des pages dans le menu
On crée une page par catégorie
Screenshot : dans le menu les pages apparaissent
Les pages créées apparaissent dans le menu

3. Création de la page d'archives

On clique, dans le menu de navigation du site (cf. ci-dessus), sur le lien "Catégories du blog", puis sur "Cuisine". On édite cette page Cuisine en y ajoutant un élément Affichage du blog :

On insère le blog dans la page "Cuisine"
On insère le blog dans la page "Cuisine"

On paramètre l'affichage du blog de manière à filtrer les billets de la catégorie Cuisine uniquement :

Screenshot : paramétrage du blog bêta
Paramétrage du blog en fonction de la catégorie à afficher

Sur la page Cuisine, les billets taggés Cuisine s'affichent, et eux seuls : on a bien simulé un classement des billets du blog par catégories.

Screenshot : résultat sur la page "Cuisine"
Le résultat obtenu !
Flèche vers le haut

Créer des archives mensuelles

L'idée est de regrouper sur une page tous les billets publiés en janvier 2013. Pour ce faire, il faut "tagger" les billets au moment où on les crée avec une sorte de tampon dateur ou de marqueur temporel.

1. Création du billet du blog

On crée un billet en ajoutant un marqueur temporel de la forme [mois-année], comme 01-2013 pour janvier 2013. (Avant, on peut aussi lui attribuer une ou plusieurs catégories thématiques, comme ici par exemple : CuisineDessert.)

Screenshot : création du billet et tags
On ajoute le marqueur temporel qui servira de filtre par la suite
Screenshot : résultat du billet taggé
Voici le billet obtenu après enregistrement - notez le marqueur temporel

2. Création du menu

Dans le menu de navigation du site, on crée une nouvelle page intitulée Archives du blog, puis on crée un sous-menu pour chaque mois. La page intitulée Janvier 2013 affichera tous les billets publiés ce mois-là.

Screenshot : création du menu d'archives
On crée dans le menu l'archive de janvier 2013
Screenshot : résultat dans le menu
Dans le menu : les archives sont créées

3. Création de la page d'archives

Sur la page Janvier 2013 qu'on vient de créer, on insère un élément Affichage du blog en le paramétrant pour qu'il affiche tous les billets de la catégorie 01-2013.

Screenshot : insertion da l'affichage du blog
On paramètre l'affichage du blog pour n'afficher que les billets taggés 01-2013

Quand on clique sur la page Janvier 2013, seuls les billets publiés ce mois-là s'affichent. Il faudra, par la suite, créer une nouvelle page intitulée Février 2013 et y afficher les billets correspondants en les filtrant grâce au marqueur 02-2013, et ainsi de suite pour les autres archives...

Screenshot : les archives de janvier
Seuls les billets publiés en janvier 2013 s'affichent sur la page
Flèche vers le haut

Des menus déroulants compacts et pratiques

L'archivage des billets me semble nécessaire pour faciliter la navigation des visiteurs sur le site. Mais il peut, à terme, encombrer la barre de navigation : au bout d'un an, il y aura déjà 12 pages d'archives mensuelles qui se déplieront dans la barre latérale du site et allongeront d'autant la page. Pour remédier à ce problème, Angela a eu l'idée d'installer sur son site des menus déroulants, qui sont à la fois compacts, esthétiques et pratiques. Je l'ai imitée sans tarder :

Screenshot : des menus déroulants
Les menus déroulants du blog

Etape 1 : insertion du script dans le header

On commence par insérer dans le header le script qui va faire fonctionner les menus déroulants. En admin, on clique sur Paramètres > Modifier le header :

Screenshot : modifier le header
Paramètres > Modifier le header

Et on copie-colle dans la fenêtre de saisie qui s'affiche ce script :

<script type="text/javascript">
//<![CDATA[
function ChangeUrl(formulaire)
        {
        if (formulaire.ListeUrl.selectedIndex != 0)
                {
                location.href = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
                }
        else
                {
                alert('Veuillez choisir une destination.');
                }
        }
//]]>
</script>

On n'oublie pas de sauvegarder les changements opérés en pressant le bouton "Enregistrer" sans se préoccuper de l'éventuel message qui pourrait apparaître à ce moment-là (il est purement informatif).

Flèche vers le haut

Etape 2 : création des menus déroulants

On installe les menus déroulants dans la barre latérale de navigation, sous le menu de navigation standard en ajoutant un bloc + Widget/HTML dans lequel on colle le code des menus :

Code du menu déroulant des archives mensuelles

Ce code doit être modifié en fonction de vos intitulés (en bleu) et de vos liens (en vert) :

<div style="text-align: center; margin: 10px auto;">
  <form action="">
   <select name="ListeUrl" size="1" onchange="ChangeUrl(this.form)">
     <option selected="selected" value="#">Archives mensuelles</option>
     <option value="http://votresite.jimdo.com/archives-du-blog/mars-2009">Mars 2009</option>
     <option value="http://votresite.jimdo.com/archives-du-blog/février-2009">Février 2009</option>
   </select>
  </form>
</div>

Ce code affiche ce menu déroulant (les liens sont volontairement désactivés) :

Code du menu déroulant des archives thématiques

Ce code doit être modifié en fonction de vos intitulés (en bleu) et de vos liens (en vert) :

<div style="text-align: center; margin: 10px auto;">
  <form action="">
    <select name="ListeUrl" size="1" onchange="ChangeUrl(this.form)">
      <option selected="selected" value="#">Catégories du blog</option>
      <option value="http://votresite.jimdo.com/catégories-du-blog/cuisine">Cuisine</option>
      <option value="http://votresite.jimdo.com/catégories-du-blog/photo">Photo</option>
    </select>
  </form>
</div>

Ce code affiche ce menu déroulant (les liens sont volontairement désactivés) :

Comment récupérer les adresses des liens du blog ?

En mode Afficher (surtout pas en mode Modifier), cliquez-droit sur les liens du blog dans le menu et, dans le menu contextuel qui s'affiche, sélectionnez Copier l'adresse du lien. L'adresse de la page se copie-colle automatiquement dans le presse-papiers. Vous pouvez alors l'insérer dans le code du menu déroulant à la place des liens en vert.

Screenshot : copier l'adresse du lien
Il faut être en mode Afficher (aperçu)
Flèche vers le haut

Comment mettre les menus déroulants à jour ?

Il suffit d'éditer le widget (en cliquant dessus en mode Modifier) et d'insérer une ligne de ce type sous les autres du même genre :

<option value="http://votresite.jimdo.com/votre-lien">Texte du lien</option>

Etape 3 (facultative) : styler les menus déroulants

On peut aisément personnaliser l'aspect des menus déroulants pour l'adapter aux couleurs de son site grâce à un peu de code CSS. On obtient alors des menus de toutes les couleurs :

Screenshot : des menus colorés
Des menus colorés
Screenshot ; autres menus colorés
D'autres menus tout en couleurs

Le code à personnaliser

Si vous voulez avoir la main sur l'aspect de votre menu déroulant, c'est-à-dire :

  • choisir la couleur de fond
  • choisir la couleur de la police
  • choisir la couleur de la bordure
  • choisir la police d'écriture
  • choisir la taille de la police
  • écrire en gras

... alors utilisez ce code en l'adaptant à vos besoins :

<div style="text-align: center; margin: 10px auto;">
    <form action="">
        <select name="ListeUrl" size="1" onchange="ChangeUrl(this.form)" style=
        "width: 240px; background-color: orange; color: red; border-color: black; font-family: Courier New; font-size:14px; font-weight: bold;">
            <option selected="selected" value="#">
                Archives mensuelles
            </option>
            <option value="http://votresite.jimdo.com/archives-du-blog/mars-2009">
                Mars 2009
            </option>
            <option value="http://votresite.jimdo.com/archives-du-blog/février-2009">
                Février 2009
            </option>
        </select>
    </form>
</div>

Guide de personnalisation du code

J'ai souligné dans le code les valeurs que vous pouvez changer. Suivez le guide pour ce faire :

  • width : largeur du menu déroulant
    • 240px : valeur dans le code
    • choisissez une autre valeur, plus petite ou plus grande
  • background-color : couleur de fond du menu
    • orange : valeur dans le code
    • choisissez une autre couleur en entrant sa valeur hexadécimale (#333333 par exemple)
  • color : couleur de la police du menu
    • red : valeur dans le code (rouge)
    • choisissez une autre couleur en entrant sa valeur hexadécimale (#333333 par exemple)
  • border-color : couleur de la bordure du menu
    • black : valeur dans le code (noir)
    • choisissez une autre couleur en entrant sa valeur hexadécimale (#333333 par exemple)
  • font-family : police d'écriture du menu
    • Courier New : valeur dans le code
    • vous pouvez aussi choisir : Georgia, Verdana, Arial, Cursive, Times New Roman, Lucida Console
  • font-size : taille de la police du menu
    • 14px : valeur dans le code
    • choisissez une autre valeur, plus petite ou plus grande
  • font-weigth : épaisseur de la police du menu
    • bold : valeur du code (police épaisse, grasse)

Aperçus du résultat

Flèche vers le haut

Etape 4 : cacher les archives dans le menu

Il nous reste à rendre les pages d'archives thématiques et mensuelles invisibles dans le menu de navigation, puisqu'elles sont maintenant accessibles par les menus déroulants. Il suffit de cliquer sur l'oeil. Côté admin, les pages invisibles apparaissent barrées ; côté visiteurs, elles n'apparaissent plus du tout dans le menu.

Screenshot : cacher les pages d'archives du menu
On clique sur l'oeil pour cacher les pages
Screenshot : le menu avec les pages cachées
En mode Modifier, les pages apparaissent barrées

That's all, folk ! ;-)

Questions, remarques, critiques ?

Écrire commentaire

Commentaires : 34
  • #1

    elpibe (lundi, 02 mars 2009 13:53)

    tres pratique , merci

  • #2

    laulau2802 (lundi, 27 avril 2009 08:50)

    Excellent tutoriel, très simple et efficace.
    Par contre, il est vraiment dommage que tout doive se faire "à la main" et que Jimdo ne le fasse pas automatiquement.

  • #3

    balorre (mercredi, 20 mai 2009 15:21)

    Oui un archivage automatique par date, comme dans n'importe quel outil de blog, serait le bienvenu ;-)

  • #4

    2FTK (lundi, 10 août 2009 15:23)

    Merci beaucoup pour l'idée de regroupement par tags !

  • #5

    chrisfo (samedi, 22 août 2009 23:47)

    Tutoriel très bien expliqué.
    Merci pour ce coup de main !

  • #6

    tupeuxcourir (lundi, 02 novembre 2009 18:49)

    Bonjour,
    je ne peux que rajouter mes remerciements à cette longue liste !
    Encore merci,
    Sylvain

  • #7

    pabajo (samedi, 12 décembre 2009 15:56)

    Merci pour ces explications . très utile !

  • #8

    Frédéric Jean Gilles (samedi, 19 décembre 2009 15:09)

    superbe site Madame Isa! Je pensais être nul dans ce domaine, mais bien accompagné, je dois dire que je me prends au jeu avec beaucoup d'entrain. Merci Isa!
    Fréd.

  • #9

    phg-jardinsecret (dimanche, 31 janvier 2010 23:10)

    Bonjour et je viens de découvrir votre super blog ! extra !
    Je souhaite archiver mes billets par catégorie mais malheureusement je ne peux pas passer à l'étape "insertion du blog bêta"... J'ai l'élément "Affichage du blog"... Si vous pouviez m'éclairer ^_^. Merci.
    Hong-Gi

  • #10

    Gilot Ivan (lundi, 05 avril 2010 14:51)

    Très bien expliqué; encore merci
    Je vais m'y mettre

  • #11

    Centre Culturel d'Enghien (dimanche, 23 mai 2010 13:44)

    Bonjour,
    mais comment supprime t'on une entrée (un tag).
    J'ai pas trouvé.

    Dominique

  • #12

    Frédéric, Windcom (vendredi, 06 août 2010 17:17)

    Genial !

  • #13

    scrablim (vendredi, 13 août 2010 15:39)

    Bonjour,
    Tout d'abord merci pour tous ces supers tutos qui donnent envie de chercher pour aller plus loin surtout quand on n'y connait pas grand chose voire rien au html et tout ce qui va avec...Moi j'aurais aimé que les menus déroulants des archives du blog soient en couleur, et le fond et la police. J'ai essayé pas mal de manips mais aucune ne fonctionne, quand je mets background : teal entre les guillemets, le fond dépasse largement le cadre du texte et je ne peux pas non plus changer la couleur de la police. A quel endroit faut-il intégrer tout ça ? Merci d'avance
    site : http://www.scrabblelimousinperigord.com/

  • #14

    scrablim (samedi, 14 août 2010 15:35)

    J'ai trouvé la solution au problème évoqué ci-dessus ! En faisant un mix de ce tuto et de celui de Filmdelover trouvé sur le forum et ça marche. Par contre, je n'arrive plus à centrer mon widget, alors pour masquer le problème j'ai agrandi le fond sur la totalité de ma colonne. Affaire à suivre...à creuser, si quelqu'un trouve...merci

  • #15

    retm1 (samedi, 22 janvier 2011 17:36)

    Merci pour les infos

  • #16

    angeliquescheltienne (mardi, 01 mars 2011 13:12)

    Bonjour , j'ai un probleme , je n'arrive pas à afficher mon blog , mes article dans mon menu , une fois sur mon site je retrouve pas le contenue de mon blog , pour l'ajout il ne s'affiche meme pas ??? HELP !!!!!
    Merci d'avance

  • #17

    o-di-c (lundi, 02 mai 2011 10:04)

    Bonjour,
    je n'arrive pas à trouver la fonction blog beta dans les éléments d'ajouts.
    Pouvez vous m'éclairer svp?

    merci!

  • #18

    machines2jeux (lundi, 25 juillet 2011 17:11)

    Merci beaucoup pour ce tuto très clair !
    o-di-c : La fonction blog beta n'existe pas à proprement parlé, c'est juste un second affichage de blog standard.

  • #19

    corsenetinfos (dimanche, 04 décembre 2011 15:47)

    Bonjour,

    vous pourrez peut-être m'aider nous avons donc réalisé nos archives à partir de votre tutoriel tout a très bien fonctionné mais nos archives antérieures au moi de mai ne sont plus consultables un message indique que la page n'existe pas ou plus alors qu'elle est bien sauvegardé mais nos articles de blog n'apparaisse plus, est-ce que vous auriez une idée d'où ça peut venir ?

    Par avance merci de l'attention que vous porterez à ce problème.

  • #20

    Wilde (lundi, 30 juillet 2012 14:28)

    bonjour,
    qui peut m'éclairer ?
    le "bloc béta" n'existe plus... donc comment fait-on pour créer les archives mensuelles ?
    Les explications données ci-dessus ne sont plus valables si "bloc beta" n'est plus d'actualité !
    je vous remercie
    cordialement

  • #21

    Dominique BRUYNEEL (mercredi, 05 septembre 2012 22:29)

    LE TRUC,
    on ne met qu'1 seul tag
    par bloc de type"BLOG"
    MAIS vous pouvez mettre
    autant de bloc de type"BLOG"
    que vous voulez
    dans UNE page... la MÊME page !

    Vous avez ici un exemple type
    http://www.ccenghien.com/les-balades-cont%C3%A9es/
    Dans cette page il y a 3 blocs de type "BLOG" mais
    il n'y a qu'un seul TAG par bloc
    bloc 1 = balade2011
    bloc 2 = balade2010
    bloc 3 = balade2009
    Et quand vous cliquez sur 1 événement,
    apparaît 2 TAG en plus - moisANNÉE - genreANNÉE

    Ce n'est pas intuitif... je le reconnaît !

    J'utilise le blog comme agenda
    dans les homepages
    et cela fonctionne très bien.
    Exemple pour un Centre Culturel
    http://www.ccenghien.com/

    Voici encore un exemple sur le même site,
    dans une rubrique où j'utilise ce système: http://www.lacaseboischeri.com/nos-%C3%A9v%C3%A9nements-2012/

    Et voici le site ou j'invite à le pratiquer
    en homepage pour rendre le site vivant
    www.mapetiteentreprise.mobi

    Cordialement

    bDom



  • #22

    3aspie (lundi, 05 novembre 2012 18:27)

    Bonjour,
    J'ai mis en place depuis longtemps avec succès les fonctions archivages et catégories. Aujourd'hui, j'ai voulu créer un archivage par année (ex: 2011) pour éviter d'avoir un menu déroulant trop long. Cela fonctionne sauf que le nombre de billets du blog apparaissant sur la page "2011" est limité à 30. Comment faire s'il y en a plus ? Merci d'avance.
    Cordialement,
    Chris
    PS. dans l'immédiat, j'ai supprimé le bloc correspondant dans le widget.

  • #23

    Pitou (dimanche, 30 décembre 2012 15:16)

    Le filtrage des catégories est bien mais il manque un filtre plus complexe avec un opérateur "et". Par exemple si on souhaite afficher uniquement les billets concernant les voitures jaunes, il faudra créer une catégorie voiture_jaune alors qu'avec un filtrage plus sophistiqué, on pourrait afficher les billets des catégories "voiture" et "jaune". C'est peut être possible mais je n'ai pas trouvé comment.

  • #24

    Isabelle (mardi, 01 janvier 2013 15:43)

    A Pitou : à l'heure actuelle, tu peux quand même afficher les billets avec un filtrage un peu plus avancé en combinant les tags "voiture" et "jaune" (il suffit de cliquer ces deux tags au moment où tu crées ton filtrage par catégories).

    A 3aspie : je viens de vérifier et je n'ai rencontré aucune limitation sur le nombre de billets à afficher dans un bloc. Je peux aller au-delà de 100 par page même. Mais peut-être est-ce un changement récent ?

  • #25

    Richoult (lundi, 21 janvier 2013 21:21)

    Merci Isabelle, pour ce tuto.
    Par contre, il m'est arrivé deux fois que je soit obligé de remettre le script dans l'header, car il s’effaçait ... Peut être parce que je changeais de design ...

    Enfin, bref, j'ai quelques beug, mais je sais d'ou ca viens et ca re-marche.

  • #26

    Isabelle (lundi, 21 janvier 2013 21:38)

    Je ne suis pas étonnée : un changement de design fait forcément sauter quelques trucs... (d'où l'importance de tenir à jour une copie du contenu de tout ce qu'on insère dans Paramètres > Modifier le Header : codes CSS, scripts, etc). Merci pour ton passage ici et bravo pour ton blog très régulièrement alimenté - quel univers déjanté ;)

  • #27

    aloeverasante (mercredi, 02 octobre 2013 10:14)

    Hello Isabelle,
    après avoir déja mis une centaine d'article, je viens de m'attaquer a la réalisation de 5 pages d'archives thématique ouuuuuuuups, c'est long! :( le temps de mettre a jour tous les tags, mais cela vaux le coup a l'arrivée sur la page principale je me retrouve avec 20 articles au lieu de 100 environ, c'est super car la page met 5 fois moins de temps à charger!
    donc un grand merci!
    plus tard jeferais un menu déroulant ;)

  • #28

    landart-ecriture-loiret (vendredi, 22 novembre 2013)

    Bonjour,
    Tous mes articles se placent dans la catégorie "nature" et l'archive "novembre 2013" que je viens de créer.
    Lorsque j'enregistre le choix d'une catégorie dans le bas de la page pour filtrer, ça ne change rien. Pouvez-vous m'aider SVP ?
    Quand j'ai commencé mon blog je n'avais pas ce problème.
    Merci d'avance

  • #29

    Isabelle (lundi, 20 janvier 2014 15:10)

    @landart-ecriture-loiret : apparemment, le problème est réglé. Il faut bien veiller à "tagger" chaque article du blog avec les catégories thématiques (nature, exposition, concert... ) et avec les catégories temporelles (septembre-2013, octobre-2013... ) Ensuite, on filtre pour chaque page créée en sélectionnant le tag qui va bien.

  • #30

    flurisam (samedi, 01 février 2014 20:49)

    Bonjour,
    Merci pour ces bonnes infos. Comment faire pour mettre les deux menus déroulants l'un à côté de l'autre et non pas l'un en dessus de l'autre?
    Cordialement,
    Samuel

  • #31

    Isabelle (jeudi, 06 février 2014 09:49)

    Bonjour !
    Pour mettre les deux menus côte-à-côte, il faut les mettre dans une seule DIV englobante, comme ceci :

    <div style="text-align: center; margin: 10px auto;">

    <form action="">
    <select name="ListeUrl" size="1" onchange="ChangeUrl(this.form)">
    <option selected="selected" value="#">Archives mensuelles</option>
    <option value="http://votresite.jimdo.com/archives-du-blog/mars-2009">Mars 2009</option>
    <option value="http://votresite.jimdo.com/archives-du-blog/février-2009">Février 2009</option>
    </select>
    </form>

    <form action="">
    <select name="ListeUrl" size="1" onchange="ChangeUrl(this.form)">
    <option selected="selected" value="#">Catégories du blog</option>
    <option value="http://votresite.jimdo.com/catégories-du-blog/cuisine">Cuisine</option>
    <option value="http://votresite.jimdo.com/catégories-du-blog/photo">Photo</option>
    </select>
    </form>

    </div>

    Dans la DIV, le premier code correspond au menu déroulant des archives thématiques, le second au menu déroulant des archives mensuelles. C'est le code que j'utilise sur ce site pour afficher mes menus déroulants.

    Cordialement,

    Isa

    PS : J'ai regardé votre site avec attention, que dis-je ? admiration ! J'envie votre "huge trip"... enfin, sauf l'aspect "vélo" ;)
    Je me permets une suggestion : sur la page d'accueil (celle du blog), vous devriez ajouter, avant l'affichage du blog, une présentation, même brève, de ce qu'est votre site en expliquant votre initiative / projet, afin que les visiteurs se sentent moins égarés et perplexes en arrivant. A quoi correspond ce voyage exactement ? Je me demande même si vous n'auriez pas intérêt à insérer cette courte description (comme une "tagline") en haut des pages de niveau 1 du site.

  • #32

    george-michael-fanathitude (jeudi, 06 mars 2014 08:17)

    merci isabelle

  • #33

    george-michael-fanathitude (jeudi, 06 mars 2014 09:16)

    re,pour le réèrencement cela ne change rien? comme page seront cachées????

  • #34

    Isabelle (vendredi, 14 mars 2014 14:15)

    @george-michael-fanathitude : bonne question, mais je ne pense pas car les pages du blog (les billets) ne sont pas cachées, elles. Ce sont les pages-index qui le sont. En tout cas, dans mon cas, le référencement du site ne me semble avoir été affecté.

Ruban