Styler le titre des billets du blog

Avant de vous lancer, merci de lire le mode d'emploi ci-dessous !

Mode d'emploi des codes

Où insérer les codes ?

Les codes fournis doivent être insérés dans la fenêtre de saisie qui apparaît quand on clique, en mode "Admin", sur Paramètres > Insérer dans le header.

Modifier le header en admin

Il faut ensuite appuyer sur le bouton d'enregistrement situé sous la fenêtre de saisie pour que les codes soient enregistrés.

Pour voir les effets du code appliqué à votre site, il faut repasser en mode "Visiteur" pour rafraîchir la page.

Peut-on utiliser plusieurs codes ?

Oui, les codes peuvent être combinés, à condition que vous soyez cohérents dans votre choix : ainsi, si vous combinez le code qui empêche l'affichage du trackback des liens avec celui qui permet d'en changer la couleur, il y aura assurément un problème d'incompatibilité !

Que faire en premier ?

Peu importe le nombre de codes que vous comptez insérer ; vous devez commencer par noter ces deux déclarations dans la fenêtre de saisie. Vos codes seront copiés-collés entre ces deux éléments :

<style type="text/css">

C'est ici que vous insérez le(s) code(s)

</style>

Il ne vous reste plus qu'à choisir les codes dont vous avez besoin et à les copier-coller entre ces deux balises.

Flèche vers le haut

Explications préalables : 2 modes d'affichage du blog

Quand on parle des billets du blog, on doit toujours préciser dans quel "mode d'affichage" on se place. En effet, il y a 2 modes d'affichage différents du blog : le mode "Sélection" et le mode "Billet entier". Voyons en détails à quoi correspond chacun de ces modes :

1) Le mode "Sélection" du blog

Ce mode correspond à l'affichage de plusieurs billets du blog sur une page, qu'on ait opté  pour l'option "Teaser" dans les préférences ou pour l'option "Articles".

Affichage d'une sélection du blog
On a cliqué sur "Affichage du blog"

Option "Teaser"

Option "Teaser"
On a opté pour l'option "Teaser"

Ce réglage correspond sur mon site à l'affichage en liste, sur la page d'accueil, des titres des derniers billets publiés sur le blog (titres uniquement, aucun contenu n'est affiché) :

Affichage Sélection Teaser
Cliquez sur l'image pour voir l'exemple en live

Option "Article"

Mode "Article" de l'affichage du blog
On a opté pour le mode "Article"

Ce réglage correspond sur mon site, aux archives mensuelles (voir, par exemple, les archives du mois de février 2010) ou aux archives par catégories (voir, par exemple, la page regroupant les billets de la catégorie "Outils"). Chaque page affiche une sélection de plusieurs articles complets.

Flèche vers le haut

2) Le mode "Billet entier" du blog

Ce mode correspond à l'affichage d'un billet du blog vu en entier.

Exemple de mode "billet entier"
Cliquez pour voir l'exemple en live
Flèche vers le haut

2 modes d'affichage du blog, donc des variations possibles

Comme il y a 2 modes d'affichage des billets du blog, on peut définir le même style pour les 2 types d'affichage ou différencier le style des titres en mode "Billet entier" et celui des titres en mode "Sélection". Ainsi, sur un même site, les titres des billets en mode "Billet entier" pourront être larges, en rouge et soulignés, alors que les titres des mêmes billets affichés en mode "Sélection" seront plus petits, verts et non soulignés.

 

Dans les codes indiqués ci-dessous, je donne à chaque fois 3 variantes des codelets :

  • variante 1 : elle modifie uniformément le style des titres du blog
  • variante 2 : elle modifie le style des titres du blog en mode "Sélection"
  • variante 3 : elle modifie le style des titres du blog en mode "Billet entier"

A vous de décider quelle variante vous voulez appliquer ! Si vous voulez vous faciliter la tâche, je vous recommande d'utiliser la variante 1 (dite "universelle") qui s'applique à tous les modes d'affichage : pas de prise de tête ! Sinon, vous pouvez complètement différencier l'affichage des titres en mode "Sélection" et en mode "Billet entier".

Flèche vers le haut

Enlever le soulignement des titres des billets

Par défaut, les titres des billets du blog sont soulignés :

Titres des billets soulignés

On peut toutefois enlever le soulignement des titres :

Titres des billets non soulignés

... en copiant-collant un (ou plusieurs) de ces codes :

Variante 1 : pour tous les modes

/* Enlever le soulignement des titres du blog */

div.blogselection h1 a,
div.post h1.post-title a { 
text-decoration: none !important;
}

Variante 2 : en mode "Sélection" seulement

/* Enlever le soulignement des titres du blog en mode "Sélection" */

div.blogselection h1 a { 
text-decoration: none !important;
}

Variante 3 : en mode "Billet entier" seulement

/* Enlever le soulignement des titres du blog en mode "Billet entier" */

div.post h1.post-title a { 
text-decoration: none !important;
}
Flèche vers le haut

Changer la couleur des titres des billets

Par défaut, les titres des billets sont de la même couleur que les liens. Cette couleur est définie dans l'onglet Style du mode Admin :

Définition de la couleur des liens
On définit la couleur des liens dans l'onglet "Style"
Couleur des liens et couleur des titres des billets du blog
Les titres des billets du blog étant des liens, ils en ont la couleur

Mais on peut donner aux titres des billets du blog une couleur différente de celle des liens :

Couleur des titres différente de celle des liens

... en copiant-collant un (ou plusieurs) de ces codes :

Variante 1 : pour tous les modes

Dans ce cas, les titres des billets du blog sont d'une autre couleur que les liens.

/* Changer la couleur des titres du blog */

div.blogselection h1 a,
div.post h1.post-title a { 
color: #BF4442 !important;  /* Pour changer la couleur, remplacer #BF4442 */
}

Pour personnaliser ce code et les suivants avec les couleurs de votre choix, utilisez ce sélecteur de couleurs. Il vous donnera le code hexadécimal correspondant à la couleur choisie : c'est ce code (du type #efefef) que vous devez utiliser.

Variante 2 : en mode "Sélection"

Dans ce cas, seuls les titres du blog en mode "Sélection" ont une couleur différente des liens.

/* Changer la couleur des titres du blog en mode "Sélection" seulement */

div.blogselection h1 a {
color: #BF4442 !important;  /* Pour changer la couleur, remplacer #BF4442 */
}

Variante 3 : en mode "Billet entier"

Dans ce cas, seuls les titres du blog affichés en mode "Billet entier" ont une couleur différente de celle des liens.

/* Changer la couleur des titres du blog en mode "Billet entier" */

div.post h1.post-title a {
color: #BF4442 !important;  /* Pour changer la couleur, remplacer #BF4442 */
}

En combinant la variante 2 et la variante 3, vous aurez :

  • une couleur pour les liens
  • une autre couleur pour les titres du blog affichés en mode "Sélection"
  • une autre couleur encore pour les titres du blog affichés en mode "Billet entier" 
Flèche vers le haut

Agrandir / diminuer la taille des titres des billets

Par défaut, les titres des billets du blog sont de la même taille que les titres de la page. Cette taille est définie dans l'onglet Style en mode Admin :

Choisir la taille des titres
Les titres du blog ont la même taille que les autres titres
Les titres du blog ont la même taille

Mais il est possible de fixer soi-même la taille des titres des billets (plus grands ou plus petits) :

Les titres du blog sont plus petits

... en copiant-collant un (ou plusieurs) de ces codes :

Variante 1 : pour tous les modes

Dans ce cas, les titres du blog sont tous de même taille, mais cette taille peut différer de la taille des autres titres fixée dans Style.

/* Changer la taille des titres du blog */

div.blogselection h1,
div.post h1.post-title {
font-size: 15px !important;  /* Pour agrandir la taille, remplacer 15 par un chiffre plus grand */
}

Variante 2 : en mode "Sélection"

Dans ce cas, les titres du blog en mode "Sélection" ont une taille différente. Les titres du blog en mode "Billet entier" sont de la même taille que les autres titres définis dans Style.

/* Changer la taille des titres du blog en mode "Sélection" */

div.blogselection h1 {
font-size: 15px;  /* Pour agrandir la taille, remplacer 15 par un chiffre plus grand */
}

Variante 3 : en mode "Billet entier"

Dans ce cas, les titres du blog en mode "Billet entier" ont une taille différente. Les titres du blog en mode "Sélection" sont de la même taille que les autres titres définis dans Style.

/* Changer la taille des titres du blog en mode "Sélection" */

div.post h1.post-title {
font-size: 15px !important;  /* Pour agrandir la taille, remplacer 15 par un chiffre plus grand */
}

En combinant la variante 2 et la variante 3, vous pourrez avoir :

  • des titres d'une taille définie dans Style
  • les titres du blog en mode "Sélection" d'une taille différente
  • les titres du blog en mode "Billet entier" d'une autre taille encore 
Flèche vers le haut

Changer la police des titres des billets

Par défaut, la police des titres des billets du blog est celle que vous avez choisie, de façon générale, pour les titres dans l'onglet Style :

Choix police du titre dans Style
La police des billets est identique à celle des titres

Il est toutefois possible de choisir une police différente pour les titres des billets du blog :

Police du titres des billets différente

... en copiant-collant un (ou plusieurs) de ces codes :

Variante 1 : pour tous les modes

Dans ce cas, la police est la même pour tous les titres des billets du blog, mais elle peut être différente de la police des autres titres du site.

/* Changer la police des titres des billets du blog */

div.blogselection h1,
div.post h1.post-title { 
font-family: Impact, "Arial Black", sans-serif !important;  /* Vous pouvez choisir une autre famille de police */
}

Voici la liste des types de polices disponibles :

  1. font-family: Times, "Times New Roman", "Liberation Serif", FreeSerif, serif;
  2. font-family: Georgia, "DejaVu Serif", Norasi, serif;
  3. font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
  4. font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  5. font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', 'Luxi Sans', sans-serif;
  6. font-family: Tahoma, Geneva, Kalimati, sans-serif;
  7. font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
  8. font-family: Impact, "Arial Black", sans-serif;
  9. font-family: Courier, "Courier New", FreeMono, "Liberation Mono", monospace;
  10. font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;

Pour visualiser le rendu de ces polices, reportez-vous à cette page.

Variante 2 : en mode "Sélection"

Dans ce cas, la police des billets du blog en mode "Sélection" est différente. La police des billets du blog en mode "Billet entier" est la même que celle des autres titres du site.

/* Changer la police des titres des billets du blog en mode "Sélection */

div.blogselection h1 { 
font-family: Impact, "Arial Black", sans-serif !important;  /* Vous pouvez choisir une autre famille de police */
}

Variante 3 : en mode "Billet entier"

Dans ce cas, la police des billets du blog en mode "Billet entier" est différente. La police des billets du blog en mode "Sélection" est la même que celle des autres titres du site.

/* Changer la police des titres des billets du blog en mode "Billet entier */

div.post h1.post-title { 
font-family: Impact, "Arial Black", sans-serif !important;  /* Vous pouvez choisir une autre famille de police */
}

En combinant la variante 2 et la variante 3, vous pouvez donc avoir :

  • une police pour les titres du site
  • une police différente pour les titres du blog en mode "Sélection"
  • une autre police, encore différente, pour les titres du blog en mode "Billet entier" 
Flèche vers le haut

Aligner l'étiquette de la date à gauche des titres

Ces codes sont devenus obsolètes : en effet, on peut depuis peu personnaliser le design et l'alignement de la date des billets du blog dans l'onglet "style" du mode "admin".

Par défaut, l'étiquette de la date se trouve alignée à droite des titres des billets du blog :

Date à droite par défaut

Mais on peut aussi afficher la date à gauche des titres des billets du blog :

Date à gauche

... en copiant-collant un (ou plusieurs) de ces codes :

Variante 1 : pour tous les modes

Dans ce cas, la date est alignée à gauche du titre des billets du blog partout.

/* Aligner la date à gauche partout */

div.blogselection div.datetime,
div.post div.datetime {
float: left; 
}

Variante 2 : en mode "Sélection"

Dans ce cas, la date est alignée à gauche du titre des billets du blog en mode "Sélection". Elle est à droite ailleurs.

/* Aligner la date à gauche en mode "Sélection" */

div.blogselection div.datetime {
float: left; 
}

Variante 3 : en mode "Billet entier"

Dans ce cas, la date est alignée à gauche du titre des billets du blog en mode "Billet entier". Elle est à droite ailleurs.

/* Aligner la date à gauche en mode "Billet entier" */

div.post div.datetime {
float: left; 
}

Envie de commenter ?

Écrire commentaire

Commentaires : 23
  • #1

    alwgaming (mardi, 10 mai 2011 19:37)

    Génial ! Merci beaucoup

  • #2

    machines2jeux (jeudi, 21 juillet 2011 10:21)

    Super!

  • #3

    Joreau (mercredi, 08 février 2012 23:05)

    Salut Isa, merci pour ces explication très détaillées. malgré tout cela ne semble pas marcher dans mon site Jimdopro. Dès que je mets un bout de morceau proposé dans mon header (est-ce bien le bon endroit?) ...
    voilà le code intégré:
    /* Enlever le soulignement des titres du blog */

    div.blogselection h1 a,
    div.post h1.post-title a {
    text-decoration: none;
    }
    Je reçois à l'enregistrement le message: "une version épurée du code a été enregistrée. Les éléments de code invalides ont été supprimés."

    y a-t-il quelque chose que je n'ai pas vue ? La version de Jimdo a changé ?
    Merci de ton aide.

  • #4

    chrisfo (vendredi, 24 août 2012 13:11)

    Super ces nouveaux tutos !
    Par contre, j'ai intégrer dans le Head entre <style type="text/css"></style>, ce code :
    /* Enlever le soulignement des titres du blog */
    div.blogselection h1 a,
    div.post h1.post-title a {
    text-decoration: none;
    }

    ... Et ça ne marche pas !
    Merci de ton aide.

  • #5

    favoris (vendredi, 24 août 2012 14:26)

    Bonjour Christiane,

    Je suis étonnée, je viens de re-tester la manip sur http://favoris.jimdo.com et ça marche... As-tu vidé le cache et forcé le refresh de la page (Ctrl + F5) ?

    Isa

  • #6

    Dominique BRUYNEEL (mercredi, 17 octobre 2012 18:06)

    Pour rappel, vous DEVEZ insérer le code approprié entre les "balises"
    <style type="text/css">
    /* C'est ici que vous insérez le(s) code(s) */
    </style>

    Logique... mais je m'y suis laissé prendre ;-)
    bDom

  • #7

    Michel Locatelli (vendredi, 11 janvier 2013 23:34)

    Je ne parviens pas donner 2 tailles différentes à la police des titres du blog selon que le billet est en mode sélection (teaser) ou en mode billet entier (article).
    Le code de la variante 2 (en mode sélection-teaser) modifie également le titre des billets en mode "entier" (article).
    Pouvez m'aider à trouver mon erreur.
    Merci

  • #8

    Michel Locatelli (samedi, 12 janvier 2013 09:40)

    complément à mon message précédent :

    Voici les codes que j'ai entrés dans le head. La taille 15 px s'applique aussi bien aux titres des articles en mode teaser (sélection) qu'en mode article entier. J'ai donc supprimé ces codes mais j'aimerais trouvé une solution pour différencier la taille des titres selon le mode teaser ou entier de l'article.

    <style type="text/css">
    div.blogselection h1 a {
    font-size: 15px;
    }
    </style>

    <style type="text/css">
    div.post h1.post-title a {
    font-size: 25px;
    }
    </style>

  • #9

    Isabelle (samedi, 12 janvier 2013 11:50)

    Bonjour Michel !

    2 choses à essayer :

    1) Bien vérifier que vous avez activé le mode "teaser", car vos articles de blog s'affichent en entier sur les deux pages (mode "billet" -> c'est normal) et mode "teaser" (activer Teaser et nombre "1" pour les tests)

    2) Laissez les codes en place sur votre site : c'est la seule façon de débugger (en tout cas, pour moi !... )

    3) (Donc en fait, je ne sais pas compter ;p) Essayez avec le code suivant :

    <style type="text/css">

    div.blogselection h1 a {
    font-size: 15px !important;
    }

    div.post h1.post-title a {
    font-size: 25px !important;
    }

    </style>

    Dites-moi si les choses s'arrangent ; sinon, j'irai voir en "live" sur votre site (si vous laissez les codes en place).

  • #10

    Michel Locatelli (samedi, 12 janvier 2013 13:30)

    Bonjour Isabelle,

    Merci beaucoup pour votre réponse.
    J'ai copié le code dans le head (il y est toujours). Tous les titres des articles du blog (mode teaser ou billet entier) sont passés en taille 15px.
    Mon blog est organisé en 2 catégories :
    1) ACTUALITÉS : en mode article (billet complet)
    2) archives : en mode teaser réglé à 0

    J'ai aussi installé le blog avec 2 autres catégories dans la partie ESPACE ADHÉRENTS dans une zone à mot de passe. Selon Jimdo, les zones à mot de passe ne fonctionnent pas avec le blog. J'ai effectivement constaté qu'une recherche avec google permettait de passer outre le mot de passe. C'est dommage.

    Bien cordialement

    http://www.lyonembellissement.com/actualit%C3%A9s/

  • #11

    Isabelle (samedi, 12 janvier 2013 14:46)

    - Pour le coup du blog, je l'avais remarqué. En fait, nul besoin de passer par Google : il suffit de cliquer sur le plan du site (en pied de page : sitemap) et on a la liste de tous les billets du blog, même ceux qu'on a mis en section protégée par mot de passe...

    - Pour votre problème, j'ai mis longtemps à comprendre... mais en fait, c'est normal ! Vous avez deux modes d'affichage des billets des blogs : 1) quand ils sont rassemblés sur une page (par catégories par exemple) et 2) quand chaque billet s'affiche seul.

    Dans votre cas, quand vos billets sont affichés un par un (par exemple ici : http://www.lyonembellissement.com/2012/10/13/exposition-maquis-les-bars-africains-de-la-guilloti%C3%A8re/), ils ont un titre de 25 px.

    Quand vos billets sont rassemblés en listes filtrées ou non, que ce soit sur la page Actualités (http://www.lyonembellissement.com/actualit%C3%A9s/) ou sur la page Archives (http://www.lyonembellissement.com/actualit%C3%A9s/archives/), ils sont en mode "Blogselection" et ont donc une police de 15px.

    Il n'y a que deux modes de présentation possibles :
    - mode sélection (vos pages Actualités et Archives sont en mode "sélection", la première en mode "Sélection + Article", la seconde en mode "Sélection + Teaser à 0")
    - mode billet entier (les pages du blog prises une par une, avec la date qui s'affiche dans l'URL de la page)

    Il n'y a donc que 2 styles possibles :
    - un pour le mode "Sélection" (qui sera identique pour vos pages Actualités et Archives)
    - un pour le mode "Billet seul" (page où on affiche un seul billet à la fois)

    Après, il y a moyen de particulariser les codes mais ça devient plus complexe... Il faut repérer l'ID de la page Archives et la coupler avec le code "Blogselection", mais c'est difficile à mettre à jour par la suite...

    Désolée que le tuto n'ait pas été plus claire, je fais une mise à jour dans la foulée !

    A bientôt !

    Isa

  • #12

    Isabelle (samedi, 12 janvier 2013 14:48)

    Oups ! Jolie faute d'accord : "Désolée que le tuto n'ait pas été plus CLAIR" ;)

  • #13

    Michel Locatelli (samedi, 12 janvier 2013 15:30)

    Merci pour ces informations très claires. J'ai enfin compris.

    Du coup, j'ai supprimé les codes que j'avais ajoutés dans le head et je suis revenu à la situation initiale.

    J'ai été assez naïf de ne pas m'être rendu compte de la possibilité d'entrer dans la zone à mot de passe en passant par le plan du site, du fait de la présence d'un blog dans cette zone. Merci de m'avoir alerté. C'est un vrai problème.

    Je me suis résolu à supprimer l'onglet "plan du site" dans le pied de page, en attendant de trouver mieux.

    Je cherche une solution de communication réservée aux adhérents de l'association, intégrée dans le site. Auriez-vous une idée à me proposer ?

    Tous mes compliments pour votre site. Il est très utile aux jimdonautes apprentis ou plus expérimentés.

    Bien cordialement

    Michel L.

  • #14

    Isabelle (samedi, 12 janvier 2013 15:58)

    Merci pour vos compliments, qui me motivent pour le prochain tuto ;)

    > Je cherche une solution de communication réservée aux adhérents de
    > l'association, intégrée dans le site. Auriez-vous une idée à me proposer ?
    Sans utilisezr le blog, vous pouvez communiquer sur une page "normale". Créez une sous-page à la page intitulée "Espace Adhérent" dans votre menu de navigation ; donnez-lui le titre "Nouvelles" par exemple et cachez-la en cliquant sur l'oeil dans le menu de navigation. Ainsi, elle n'apparaît ni dans votre menu (en mode Aperçu, elle disparaît ; en mode Admin, elle est barrée) ni dans votre plan du site. Vous remplissez cette page "Nouvelles" avec les messages que vous réservez aux membres, mais sans passer par le blog (en gros, vous écrivez le titre vous-même, ainsi que la date, rien de très sorcier... ) Vous pouvez ajouter un élément "Livre d'or" sous chaque nouvelle publiée sur cette page pour que les membres communiquent et réagissent. Puis, vous insérez un élément "séparation" pour ajouter une autre nouvelle suivie d'un élément "Livre d'or", etc.

    Il y a deux pages cachées de cette sorte sur mon site ;)

    A bientôt !

  • #15

    Michel L. (lundi, 14 janvier 2013 11:24)

    Bonjour Isabelle,

    Encore merci pour ces indications. J'ai modifié mon site en conséquence :
    - suppression du blog dans la zone à mot de passe, en le remplaçant par votre suggestion (utilisation de la fonction livre d'or). Ça complique un peu l'archivage, mais c'est vraiment très bien. Et au moins la confidentialité de cette zone est mieux garantie.
    - modification du blog (=ACTUALITÉS et ARCHIVES BLOG)
    - j'ai rétabli le plan du site en bas de page.

    Merci de votre aide. Un tuto concernant les possibilités d'utilisation de la fonction "livre d'or" pourrait être utile. Pour ma part je n'avais jamais songé à l'utiliser.

    Bien cordialement


  • #16

    gallicia (mardi, 20 août 2013 22:32)

    Bonjour,
    Avez-vous une astuce pour diminuer ou augmenter les espacements au sein des articles ou entre ces derniers ?

    J'aimerais diminuer l'espace entre le titre d'un article et son texte, ainsi qu'augmenter l'espace entre les différents articles du blog.

    Bien cordialement.

  • #17

    Isabelle (vendredi, 04 octobre 2013 21:18)

    Bonjour,
    Pour augmenter l'espace entre les différents articles du blog, essayez ceci :

    .j-blogarticle {
    margin-top: 40px !important;
    }

    ou

    div.j-blogarticle {
    margin-bottom: 30px;
    }

    à mettre entre <style> et </style> dans "Modifier le header". Modifiez la valeur en pixels à votre guise.
    A bientôt !

  • #18

    actucorot (samedi, 08 février 2014 13:06)

    Bonjour Isabelle,

    Et une fois de plus, merci pour votre site très enrichissant et pratique.

    J'utilise Jimdo (pro) pour le site d'actualité d'une classe.
    Pour le moment, nous fonctionnons avec une page par thématique, avec onglet correspondant (france, mode, culture,..), et nous allons nous même changer les articles à la Une, en fonction des dernières publications.
    Ne trouvant pas ce système très pratique, j'ai décidé d'activer le blog. J'ai fait quelques tests et j'ai vu que les derniers articles apparaissaient bien sur l'accueil, ce qui est très pratique mais en revanche, je ne sais pas comment faire pour qu'ils soient publiés dans la page désirée. Cela est-il possible ? J'ai l'impression que sur votre site vous mêlez blog et site.
    Aussi, je suppose que c'est uniquement avec le blog que l'on peut mettre en place le système d'archive comme c'est le cas sur votre site ?
    Et enfin, j'ai testé quelques-uns des moteurs de recherche intégrés, mais je n'ai pas trouvé celui que vous utilisez.

    Un grand merci d'avance pour vos réponses !
    corotzive.com

  • #19

    Isabelle (samedi, 08 février 2014 17:01)

    Bonjour !

    Impressionnant ce que vous faites avec les élèves ! Vous me donnez des idées ;)

    Je commence par le moteur de recherche : j'utilise l'excellent Swiftype (https://swiftype.com/pricing). Il est gratuit pour un seul site, avec des limitations. La version payante plus complète et moins bridée est très abordable. Je reçois par mail les requêtes de recherche de mes visiteurs (parfois, ça me fait bien marrer, surtout quand je vois que quelqu'un a cherché Justin Bieber ici !... )

    Pour le reste, vous auriez en effet très très très intérêt à activer le blog ! Je n'ose imaginer la maintenance que votre système vous oblige à faire !...

    Par défaut le blog apparaît sur la page d'accueil lorsque vous le créez, mais vous pouvez l'afficher n'importe où par la suite. Dans votre cas, il faudrait que :
    - chaque élève écrive une chronique dans un article de blog en la "taggant" avec le mot-clé de la rubrique, par exemple "Monde" ou "Chelles" (voyez le tutoriel que j'ai fait à ce sujet sur le site : http://realia.jimdo.com/personnaliser-le-blog/archiver-les-billets-du-blog/)

    - sur la page "Chelles" du blog, vous ajoutiez un élément "Affichage du blog" en sélectionnant l'affichage des articles taggés "Monde" uniquement (en filtrant). Vous faites de même pour toutes vos rubriques thématiques : sur "Culture", on n'affiche que les articles taggés "Culture", etc.

    Sur mon site, je mélange blog pour les actus et pages statiques pour les tutos. Mais sur le prochain site de tutoriels que je suis en train de faire, je ne garde que la publication par articles du blog car c'est plus souple et recommandé pour avoir un meilleur référencement sur Google.

    J'espère que cela vous aura aidé. Bonne continuation et longue vie à la classe Médias !

  • #20

    actucorot (mercredi, 12 février 2014 00:00)

    Un très très grand merci pour votre réponse !
    J'ai testé ce que vous m'indiquez et c'est parfait !

    J'aurais cependant encore quelques questions à vous poser :
    1. Sur la page d'accueil, je voudrais ajouter les derniers articles, mais je n'arrive, avec le mode teaser, qu'à faire apparaître soit le titre uniquement (=0), soit le billet en entier (=1), mais pas seulement les premières lignes. Savez-vous s'il est possible de ne faire apparaître que quelques lignes ?
    2. Est-il possible de modifier encore plus le titre du billet ? Avec le design que nous avons choisi, les titres apparaissent sur un fond grisé avec une barre bleu au dessus et on voudrait quelque chose de plus simple.
    3. Vous proposez un tuto pour styler la date mais j'ai l'impression que les codes ne sont plus là ou alors j'ai mal regardé ... (l'affiche que vous utilisez est par exemple très chouette).

    Une fois de plus, merci ! Et merci pour vos remarques sur ce travail avec les élèves, j'espère surtout qu'ils vont écrire régulièrement maintenant pour que le site soit vivant !

  • #21

    Isabelle (jeudi, 13 février 2014 17:59)

    @actucorot : je réponds dans l'ordre puis je vous pose une question de prof trop curieuse ;)
    1. Il est possible de ne faire apparaître que quelques lignes. Quand l'élève rédige son billet, il écrit le titre de l'article, puis il insère un bloc (soit un texte, soit une imagen soit, mieux, un élément texte avec image). Ce bloc sera le chapeau de l'article. Ensuite, il rédige dans d'autres blocs le reste de l'article. Quand vous affichez le blog, vous sélectionnez "Teaser" +1. Seul le premier bloc (le chapeau donc), sera affiché. Mais il faut bien découper l'article, au moment de l'écriture, en titre + chapeau + reste du contenu.

    2. Oui, c'est possible. En regardant les portraits chinois in english des élèves, j'ai vu que c'était pas jojo en effet... Voici un code à entrer dans Modifier le Head. Il enlève le fond gris, la barre bleue, le dégradé et aligne à gauche le titre. Sobre, efficace, simple ;)

    <style>
    #gj-contents h1 {
    text-align: left !important;
    background: none !important;
    }
    </style>

    Testez et dites-moi si cela fonctionne.

    3. En effet, Jimdo a modifié les codes d'affichage de la date au moment où je me lançais dans mes tests. Le tuto n'a donc pas été achevé car modifier le code de la date est plutôt difficile désormais ;( Heureusement, Jimdo propose plusieurs styles de dates (dans Styles > Style du blog) et certains sont simples et sobres.

    Ma question maintenant : quel est le statut de la classe "médias" de votre collège ? J'ai vu qu'il s'agissait d'une classe de 3e, mais est-ce une classe à PAC, une classe standard avec un projet annuel dont les heures sont prises sur votre DHG et assurées par des profs en HSE ou autre chose encore ?... Et, question subsidiaire, comment est-elle financée ? (fonds propres de l'établissement, subventions, aides du CG, équivalent de Micaco dans le 77 ?... ) Nous n'avons pas de classe "médias" dans mon établissement, mais je trouve l'idée bien alléchante !...

  • #22

    actucorot (vendredi, 14 février 2014 16:08)

    Bonjour Isabelle et encore un très grand merci !
    Tout ce que vous m'indiquez fonctionne très bien.
    Je réponds avec plaisir à votre question (pour une fois que j'ai une réponse) : nous avons monté cette classe médias dans le cadre des classes à PEM (projet d'éducation aux médias). Le CLEMI de Créteil propose une subvention (36 hse soit 1h/semaine) à ceux qui souhaitent monter ce type de classe : un dossier est à remplir, il faut bien indiquer ce que l'on compte faire et essayer d'impliquer le plus possible d'enseignants de la classe. Par ailleurs nous avons demandé une subvention au CG (dans le cadre des Projets Éducatifs 77), nous avons obtenu de quoi rémunérer un journaliste intervenant, acheter quelques ouvrages, sortir visiter les locaux de Libé, payer l'abonnement à jimdopro...
    Nous intervenons à deux, une heure par semaine, mon collègue d’histoire s'est vu attribuer une heure de la DHG et je suis rémunérée avec l'hse du clemi. Nous avons "imposé" le projet à une classe de 3e, cette heure est inscrite dans leur emploi du temps. Ça fonctionne plutôt bien, le tout est maintenant d'arriver à garder le rythme !

  • #23

    Isabelle (vendredi, 14 mars 2014 13:49)

    Merci beaucoup pour ces explications, que je réserve par devers moi pour une ultérieure année, comme on dit dans la langue ampoulée ;) C'est vraiment très intéressant et prometteur ! Je vais suivre le blog de la classe avec plaisir !
    A bientôt !

Ruban