2 nov. 2010

(Blogger) Modifier la zone de navigation

Nous allons modifier le design de la zone de navigation : 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.

MODIFICATION DES POLICES

Message plus récent
#blog-pager-newer-link a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
.post-body a{text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Accueil
.home-link {text-align : center ; color : red!important; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Message plus ancien
#blog-pager-older-link a {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

La zone entière de navigation
#blog-pager {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 la zone entière de navigation
#blog-pager  {border:solid 1px #D8D7D7}
Pour en savoir plus sur les bordures : créer vos encadrements

3 commentaires:

  1. Bonjour,

    J'aimerai enlever le code spam lorsqu'on soumet un commentaire sur mon blog, comment faire ?

    Lucie alias Modeuse timbrée
    http://modeuse-timbree.blogspot.com/

    RépondreSupprimer
  2. Bonjour et merci pour toutes vos astuces !! J'aimerais savoir s'il vous plaît, comment faire pour renommer message plus récents et messages plus anciens par suivant et précédent ? voici mon blog ;
    http://tvkoolstream.blogspot.fr/

    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)