numeros de pages presentation

obtenir ces boutons

Numéros de pages : présentation

RAPPEL : cette page permet seulement de choisir une présentation. Il suffit de copier le code qui convient le mieux et de retourner à la page précédente qui précise ce qu'il faut en faire.

Le code figurant à la page précédente permet de réaliser cette présentation :

Page 1 of 3 Préc.123Suiv.

Variantes (on peut aussi combiner les couleurs) :

Page 1 of 3 Préc.123Suiv.

Page 1 of 3 Préc.123Suiv.

Page 1 of 3 Préc.123Suiv.

Page 1 of 3 Préc.123Suiv.

Page 1 of 3 Préc.123Suiv.

Page 1 of 3 Préc.123Suiv.

Précédent123Suivant

Préc.123Suiv.

Préc.123Suiv.

Préc.123Suiv.

Préc.123Suiv.

Préc.123Suiv.

Pour adapter le code à chaque blog, on peut se contenter de corriger 4 fois la couleur "green" du fond et des bordures, par un autre nom ou un code. La couleur des chiffres est celle qui est utilisée pour les liens du blog.

La mise en page concerne :
- le numéro de la page affichée :.showpagePoint
- les autres numéros de page : .showpageNum a
- les boutons page suivante - précédente : .showpage a
- les autres numéros de page survolés par la souris : .showpageNum a:hover,
- les boutons page suivante - précédente survolés par la souris : .showpage a:hover
- page 1 of 3 : .showpageOf

Sauf pour Internet Explorer, les numéros de pages sont placés dans des carrés aux coins arrondis.

Pour obtenir des liens carrés sans coins arrondis, supprimer (2 ou 3 fois):
-webkit-border-radius:3px;-moz-border-radius:3px;
-goog-ms-border-radius:3px;border-radius:3px;


Pour supprimer "Page 1 of 3", remplacer
.showpageOf{
margin:0 8px 0 0;
}
par
.showpageOf{
display:none;
}

* * * * *
Précédent123Suivant

Pour obtenir une présentation de type "Google" (voir ci-dessus), le code à utiliser est le suivant :

/*numéros de page*/
/*page en cours*/
.showpagePoint {
font-size: 14px;
color:black;
padding: 0px 10px;
font-weight: bold;
text-decoration: none;
}
/*liens*/
.showpageNum a:link{
font-size: 14px;
color:blue;
padding: 0px 10px;
font-weight: bold;
text-decoration: none;
}
.showpageNum a:visited{
font-size: 14px;
color:blue;
padding: 0px 10px;
font-weight: bold;
text-decoration: none;
}
.showpageNum a:hover{
text-decoration: underline;
}
.showpage a:link{
font-size: 14px;
color:blue;
padding: 0px 12px;
font-weight: bold;
text-decoration: none;
}
.showpage a:visited{
font-size: 14px;
color:blue;
padding: 0px 12px;
font-weight: bold;
text-decoration: none;
}
.showpage a:hover {
text-decoration: underline;
}
.showpageOf{
display:none;
}
.blog-pager{
height:27px;}
#blog-pager{
line-height: 24px;
}

Remarques :
1) "Suivant " et "Précédent" ne peuvent rester soulignés en permanence (comme dans le moteur de recherche "Google") car les mêmes instructions gèrent l'affichage de ces mentions et des chiffres.
2) Dans les instructions qui figurent sur la page précédente, il faut remplacer "Suiv." et "Préc." par "Suivant " et "Précédent".

Le code qui précède peut parfaitement être utilisé pour créer n'importe quelle présentation affichant des chiffres sans cadre ni couleur de fond. On peut changer la couleur ("color:"), la taille des chiffres ("font-size:"), l'espacement entre les chiffres ("padding:"), ...

* * * * *
Préc.123Suiv.

Préc.123Suiv.

Préc.123Suiv.

Les présentations ci-dessus offrent l'avantage d'occuper un minimum de place en largeur, et donc permettent d'afficher plus de chiffres.

Le code nécessaire pour la version verte figure ci-dessous. Pour obtenir une autre couleur, il suffit de remplacer "#693" par un autre code ou nom de couleur.

/*numéros de page*/
/*liens*/
.blog-pager,#blog-pager{
font-size: 13px;
font-family:verdana;
padding: 0.2em 0.5em;
margin-right: 0.1em;
border:1px solid #FFF;
background: #FFF;
text-decoration: none;
}
.showpageNum a,.showpage a {
color: #693;
text-decoration: none;
border: 1px solid #E3E3E3;
padding: 0.2em 0.5em;
}
.showpageNum a:hover,.showpage a:hover {
color: #693;
text-decoration:underline;
border: 1px solid #693;
}
.showpageOf{
display:none;
}
/*page en cours*/
.showpagePoint {
border: 1px solid #693;
padding: 0.2em 0.5em;
font-weight: bold;
background: #693;
color: #FFF;
}
.showpage a:hover {
text-decoration: underline;
}
/*Page 1 of*/
.showpageOf{
display:none;
}
.blog-pager{
height:25px;}
#blog-pager{
line-height: 24px;
}
On peut encore réduire la largeur des barres de numéros en remplaçant "Préc." et "Suiv." par "<" et ">". Les mentions "Préc." et "Suiv." à modifier se trouvent dans le second code à ajouter qui se trouve à la page précédente. Pour que les caractères "<" et ">" puissent être lus correctement par l'ordinateur, il faut remplacer "Préc." et "Suiv." par des codes, soit respectivement
&lt;
et
&gt;

* * * * *
Préc.123Suiv.

Le code nécessaire pour obtenir une barre de numéros sur fond noir figure ci-dessous.

/*numéros de page*/
/*liens*/
.blog-pager,#blog-pager{
font-size: 15px;
font-family:verdana;
padding: 0.2em 0.5em;
margin-right: 0.1em;
border:none;
text-decoration: none;
}
.showpageNum a:link,.showpageNum a:visited {
font-weight: bold;
color: white;
background: black;
text-decoration: none;
border:none;
padding: 0.2em 0.5em;
}
.showpage a:link,.showpage a:visited {
font-weight: bold;
color: white;
background: black;
text-decoration: none;
border:none;
padding: 0.2em 0.5em;
}
.showpageNum a:hover,.showpage a:hover {
text-decoration:underline;
border:none;
}
.showpageOf{
display:none;
}
/*page en cours*/
.showpagePoint {
font-weight: bold;
border:none;
padding: 0.2em 0.5em;
background: black;
color: red;
}
.showpage a:hover {
text-decoration: underline;
}
/*Page 1 of*/
.showpageOf{
display:none;
}
.blog-pager{
height:25px;}
#blog-pager{
line-height: 24px;
}

* * * * *
Préc.123Suiv.

Le code nécessaire pour obtenir cette barre de numéros avec une image en arrière-plan figure ci-dessous.

/*numéros de page*/
/*liens*/
.blog-pager,#blog-pager{
font-size: 15px;
font-family:verdana;
padding: 0.2em 0.5em;
margin-right: 0.1em;
border:none;
text-decoration: none;
}
.showpageNum a:link,.showpageNum a:visited {
font-weight: bold;
color: white;
background: url('http://storage.canalblog.com/27/32/794548/58887868.jpg') no-repeat;
text-decoration: none;
border:none;
padding: 0.2em 0.5em;
}
.showpage a:link,.showpage a:visited {
font-weight: bold;
color: white;
background: url('http://storage.canalblog.com/27/32/794548/58887868.jpg') no-repeat;
text-decoration: none;
border:none;
padding: 0.2em 0.5em;
}
.showpageNum a:hover,.showpage a:hover {
text-decoration:underline;
border:none;
}
.showpageOf{
display:none;
}
/*page en cours*/
.showpagePoint {
font-weight: bold;
border:none;
padding: 0.2em 0.5em;
background: url('http://storage.canalblog.com/27/32/794548/58887868.jpg') no-repeat;
color: yellow;
}
.showpage a:hover {
text-decoration: underline;
}
/*Page 1 of*/
.showpageOf{
display:none;
}
.blog-pager{
height:25px;}
#blog-pager{
line-height: 24px;
}

7 commentaires:

Valérie Perlin Démonstratrice Stampin up ! a dit…

Merci pour ce super truc encore une fois
par contre je ne sais pas a quel endroit copier tout ça
merci

Meiser a dit…

C'est expliqué à la page précédente :

http://modifier-les-modeles-de-blogger.blogspot.com/2011/06/numeroter-les-pages.html


Anonyme a dit…

Merci beaucoup pour le cours en ligne. Nous souhaiterions cher formateur que vous donniez un peu plus d'informations pour les tous nouveaux; c'est à dire les balises avant lesquelles placer les codes!

Meiser a dit…

Comme pour le correspondant précédent, je rappelle que toutes les informations nécessaires figurent en fait à la page précédente qui renvoie à celle-ci où l'on se contente de copier le code qui convient le mieux.


Staff a dit…

@Meiser
bonjour,

j'ai réussi de mettre les numéros de page a la page d'accueil.

est il possible de m’orientai un peu pour mettre "P.prec" et "P.suiv" aux autres pages et comment?

Cordialement

Meiser a dit…

Les numéros de pages remplacent "page suivante - page précédente" sur toutes les pages.

Il faut donc faire un choix.

Cependant, il est possible d'ajouter page précédente - suivante à un autre endroit, par exemple en haut de la page :

http://modifier-les-modeles-de-blogger.blogspot.com/2010/03/doubler-mentions-messages-recents.html


deirdre27 a dit…

Merci beaucoup pour cette explication super claire. J'ai réussi sans problème intégrer les numéros de pages pour mon blog (http://happy-grossesse.blogspot.fr/) alors que je ne suis pas une spécialiste du html!
C'est quand même beaucoup mieux comme ça!
Encore merci.