numeros de page autre code

obtenir ces boutons

Accéder aux pages d'un blog par leur numéro :
autre code

Page 1 of 3 Préc.123Suiv.

Précédent123Suivant

Préc.123Suiv.

Préc.123Suiv.

Préc.123Suiv.

NOUVEAU : un nouveau code est disponible sur cette autre page.

L'ancien code fonctionne toujours et reste disponible ci-dessous.

* * * * *
Pour voir 3 exemples de blogs (créés avec Blogger) dont les pages sont accessibles par un des numéros affichés en bas de page comme dans les exemples ci-dessus :
- cliquer ici : voir en bas de la page : 24 messages et 4 pages ;
- cliquer ici : le même exemple avec la barre de numéros placée en haut de l'écran et 16 messages ;
- cliquer également ici : voir en bas de page l'accès aux pages de 1 à 73.

La navigation est améliorée puisqu'on n'est plus limité aux seuls "messages suivants" et "précédents".

Méthode :

1) Pour ajouter la mise en page de la barre de numéros sur le blog, il faut insérer le code qui suit dans un gadget HTML/JavaScript:
<style type="text/css">
#blog-pager{font-size:normal;padding:10px 0;}
.showpagePoint{color:white;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;
border:1px solid green;background:green;-webkit-border-radius:3px;-moz-border-radius:3px;-goog-ms-border-radius:3px;border-radius:3px;}
.showpageNum a,.showpage a{color:green;padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid green;background:#ddd;-webkit-border-radius:3px;-moz-border-radius:3px;-goog-ms-border-radius:3px;border-radius:3px;}
.showpageNum a:hover,.showpage a:hover{border:1px solid #888;background:#ccc;}
.showpageOf{margin:0 8px 0 0;}
</style>

On peut modifier le code en remplaçant "green" (4 fois) par un autre nom ou un code de couleur.

On peut aussi apporter d'autres modification comme dans les exemples disponibles ici.

Rappel : comment ajouter un gadget HTML/JavaScript sur un blog

2) Un second code doit être ajouté dans le template, juste avant </body> :

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Préc.';
var downPageWord ='Suiv.';
</script>
<a href='http://modifier-les-modeles-de-blogger.blogspot.com' style='display:none;'>blogger</a>
<script src='https://sites.google.com/site/rvdmarcrailcatrain/home/pagesparnumeros.js' type='text/javascript'></script>

3) Il faut adapter :
- var postperpage=7;
- var numshowpage=4;

"Postperpage" : nombre de messages par page ;
"Numshowpage" : nombre de numéros de pages affichés.

4) Enregistrer le template.

5) Encoder le nombre de messages à afficher ayant le même libellé :

- remplacer 'data:label.url' par 'data:label.url + &quot;?&amp;max-results=7&quot;'

- corriger le chiffre "7" : nombre de messages par page : ce nombre doit correspondre à celui qui est encodé au point 3 : "postperpage=..".

6) Enregistrer le template.

7) La barre de numéros remplace les mentions "Messages suivants - Accueil - Messages précédents". SI ON PLACE LE GADGET EN HAUT DE LA PAGE, ces mentions s'affichent un bref instant avant de disparaître. On peut éviter cet effet inesthétique en supprimant dans le template (modèle) les instructions qui suivent. Mais il faut le faire avec prudence car ces mentions servent si on affiche un message individuellement par son adresse (http://...). Tout dépend donc du blog et de la manière d'accéder aux messages :

<data:newerPageTitle/>
<data:olderPageTitle/>
<data:homeMsg/>

8) Il faut enfin corriger l'heure des messages publiés à la même date ET à la même heure.

9) Si on veut placer la barre de numéros A GAUCHE plutôt qu'au centre des messages, il suffit de remplacer, dans le template (modèle) du blog, :

#blog-pager {
text-align: center;
}

par

#blog-pager {
float:left;
}

10) Les numéros de page remplacent la navigation par "Page précédente - Accueil - Page suivante".

Si on veut changer l'emplacement de ces numéros, il suffit de déplacer, dans le code du "template" ("modèle") du blog, les instructions qui en ordonnent l'affichage, soit :

<-- navigation -->
<b:include name='nextprev'/>

IMPORTANT : LE GADGET FONCTIONNE EN HAUT OU EN BAS DE LA PAGE, MAIS PAS AUX 2 ENDROITS EN MÊME TEMPS. IL FAUT DONC FAIRE UN CHOIX.

11) Les couleurs sont celles des autres liens du blog. Pour les changer, ajouter une instruction "color: ...;" dans les codes disponibles à la page suivante, aux endroits où on trouve déjà "background : ...;".

* * * * *
On peut aussi ajouter manuellement des numéros pour accéder aux messages d'un blog.

La méthode est expliquée ici.

1 commentaire:

AirbusA330 a dit…

Bonjour,
Merci beaucoup pour ce précieux tutoriel.

Je constate néanmoins un petit problème tant sur mon site que dans vos modèles de démo : un point servant de lien vers une page inexistante est présent en dessous à droite de la pagination.

Y aurait-il moyen de supprimer ce lien ?