3 nov. 2010

(Blogger) Modifier le widget Messages les plus consultés

Nous allons maintenant modifier le widget Messages les plus consultés : police, background et encadrements.

Vous devez vous rendre dans votre CSS : Présentation > Modifier le code HTML
Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

Ce widget s'appelle  #PopularPosts1, s'il est présent plusieurs fois sur le blog, le suivant s'appellera #PopularPosts2. Pour vérifier son "nom" :
  • Dans Présentaion > Eléments de la page > vous cliquez sur Modifier sur le pavé représentant ce widget
  • Dans la fenêtre qui s'ouvre, vous trouvez son "nom" tout à la fin de la ligne dans la barre à droite du B orange de Blogger

MODIFICATION DES POLICES

La titre du widget
#PopularPosts1 h2 {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Le titre du message
#PopularPosts1 a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Le résumé du message
#PopularPosts1 {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que
text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police
MODIFICATION DES FONDS

Le widget en entier
#PopularPosts1 {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}
Le titre du widget
#PopularPosts1 h2 {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;padding:5px}
Le contenu du widget
#PopularPosts1 .widget-content{background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}
Le titre du message
#PopularPosts1 a {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}
Le résumé du message
#PopularPosts1 .item-snippet {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Vous effacez ce qui ne vous convient pas, sachant que
background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas
Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer le widget en entier
#PopularPosts1  {border:solid 1px #D8D7D7}
Pour encadrer le titre du widget
#PopularPosts1 h2 {border:solid 1px #D8D7D7}
Pour encadrer le contenu du widget
#PopularPosts1 .widget-content {border:solid 1px #D8D7D7}
Pour encadrer le titre du message
#PopularPosts1 a {border:solid 1px #D8D7D7}
Pour encadrer le résumé du message
#PopularPosts1 .item-snippet {border:solid 1px #D8D7D7}
Pour en savoir plus sur les bordures : créer vos encadrements

6 commentaires:

  1. hello annak, ces changements sont'ils fiables, car j'avais fait un test sur des petites modifs comme tu mls présentent, trouvé je ne sais plus ou mais cela avait planté mon blog

    merci

    RépondreSupprimer
  2. Bonjour Thierry :) Les modifications de CSS ne peuvent pas planter un blog. La difficulté sur Blogger est qu'HTML, Javascript et CSS sont placés dans la même feuille. Es-tu certain de bien placer les modifications de CSS au bon endroit (avant ]]> )? La question peut sembler bête :D mais je ne connais pas ton niveau en CSS.

    RépondreSupprimer
  3. Merci pour cette astuce. Votre blog est une bonne source bonnes astuces. Bon courage

    RépondreSupprimer
  4. Marche pas du tout! Je voulais simplement mettre la police du résumé de message un peu plus petite pour que le texte ne dépasse pas la vignette mais ça ne change rien.

    Pourtant #PopularPosts1 {font-size : 11px ;}
    est bien juste avant ]]>

    RépondreSupprimer
  5. merci pour ton suivi de l'actu Blogger j'ai appliqué tout vos consignes à la lettre sur mon blog couverture facebook et les résultats sont très positifs..

    RépondreSupprimer

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