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
mais il peut avoir bien d'autres formes.
