numeros de page methode manuelle

obtenir ces boutons

Accéder aux messages d'un blog par leur numéro :
méthode manuelle

Une méthode pour ajouter automatiquement des numéros permettant d'accéder aux autres pages est expliquée sur cette page.

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

Exemple :

Autres pages : 12345678910

Si le nombre de messages n'est pas trop élevé et s'il n'y a qu'un message par page, on peut ajouter manuellement une barre de liens vers les numéros des autres pages, en bas et en haut des messages.

Le numéro de la page en cours (4 dans l'exemple) a une présentation différente.

Méthode :

1) Il faut d'abord mettre dans la version HTML de chaque message :
<style type="text/css">.numero4 a{color:green;background:white; cursor:default;}.numero4 a:hover{color:green;background:white; cursor:default;}</style>
en remplaçant 2 fois "4" par le numéro du message. De cette manière, la présentation du numéro du message affiché à l'écran sera différente et ne changera pas au passage du curseur de la souris.

2) Il suffit enfin d'ajouter le code ci-dessous dans un gadget HTML/JavaScript : sous les messages et éventuellement au-dessus. Les adresses "http://..." doivent être remplacées par celles des autres messages.

remarques : - si la barre est affichée en bas ET en haut du message, la partie du code (au début) entre <style type="text/css"> et </style> ne doit être intégrée que dans un des deux gadgets ;

- cela fonctionne aussi pour les "pages statiques" (messages autonomes) de Blogger.

<style type="text/css">.numeros a{color:white;background:green;font-weight:bold;font-size: 15px;padding: 3px 8px;margin:0 4px;text-decoration: none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;-goog-ms-border-radius:3px;border-radius:3px;}.numeros a:hover {color:green;background:white;}</style>

<center><div class="numeros">Autres pages :

<span class="numero1"><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">1</a></span>

<span class="numero2"><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">2</a></span>

<span class="numero3"><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">3</a></span>

<span class="numero4"><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">4</a></span>

<span class="numero5"><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">5</a></span>

<span class="numero6"><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">6</a></span>

<span class="numero7"><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">7</a></span>

<span class="numero8"><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">8</a></span>

<span class="numero9"><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">9</a></span>

<span class="numero10"><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">10</a></span>

</div></center>

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

Explications des couleurs :

1) couleur et fond pour les numéros NON survolés par le curseur de la souris : .numeros a{color:white;background:green;

2) couleur et fond pour les numéros SURVOLÉS par le curseur de la souris : .numeros a:hover {color:green;background:white;}

3) couleur et fond pour le numéro de la PAGE EN COURS :
.numero4 a{color:green;background:white;
.numero4 a:hover{color:green;background:white;
:
ce sont obligatoirement les mêmes couleurs pour le numéro de page survolé ou non par le curseur de la souris : ainsi, en apparence, les couleurs ne changent pas.

Pour changer de couleur, on peut utiliser un nom (red) ou un code (#353535). Pour obtenir en français les codes d'autres couleurs, cliquer ici.

Présentation de type "Google" :

Autres pages : 12345678910

Codes : <style type="text/css">.numeros a{color:blue;font-weight:bold;font-size: 17px;margin:0px 7px;text-decoration: none;border:none;}.numeros a:hover {text-decoration: underline;}</style>
<style type="text/css">.numero4 a{color:black;cursor:default;}.numero4 a:hover{color:black;text-decoration:none;cursor:default;}</style>


Autre présentation :

Autres pages : 12345678910

Codes : <style type="text/css">.numeros a{color:white;background:black;font-weight:bold;font-size: 17px;margin:0px;padding:3px 7px;text-decoration: none;border:none;}.numeros a:hover {color:red;}</style>
<style type="text/css">.numero4 a{color:red;background:black;cursor:default;}.numero4 a:hover{color:red;background:black;cursor:default;}</style>

2 commentaires:

Seylla Hrichi a dit…
Ce commentaire a été supprimé par l'auteur.
Seylla Hrichi a dit…

vous voulez dire quoi avec 'message' ? c'est à dire arcile ou quelque chose différente ? psk moi je trouve pas ! merci