inverser ordre messages : suite 1

obtenir ces boutons

Inverser l'ordre des messages : suite 1

9 méthodes pour inverser l'ordre des messages sont décrites sur ce site. Sur la page précédente (accessible ici), une première méthode a été expliquée. Une autre est décrite ci-dessous et 7 autres sur la page suivante ...

* * * * *
La seconde méthode consiste à AJOUTER UN GADGET EN HAUT D'UNE COLONNE LATÉRALE. En cliquant sur un lien, le visiteur pourra inverser l'ordre des messages : soit les afficher dans l'ordre chronologique, soit revenir à l'ordre inverse de départ.

Un exemple de ce que cela donne est disponible ici.

* * * * *
La méthode est un peu moins rapide à mettre en place. Il faut ajouter 2 gadgets au blog et, s'il y a des messages avec la même date, faire 2 corrections du template :

1) En haut de la colonne latérale, il faut ajouter le gadget HTML/Javascript suivant :

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<script>if(window.location.href.indexOf('order=ASC') > -1) {document.getElementById("main").style.marginTop = "400px";}</script>
<script src='https://sites.google.com/site/rvdmarcrailcatrain/home/ordre_chrono_1.js';>
</script>
<script style="text/javascript">
var chronPerPage = 7;
window.addEventListener ? window.addEventListener("load",doChronLink,false) : window.attachEvent && window.attachEvent("onload",doChronLink);
</script>
<h2><script>
if(window.location.href.indexOf('order=ASC') == -1) document.write('<a id="chronLink" href="/search?max-results="+chronPerPage+"#order=ASC" style="visibility:hidden;">Articles par ordre chronologique</a>'); else document.write('<a href="/">Articles classés du plus récent<br/>au plus ancien</a>');
</script></h2>

Le nombre de messages affichés doit être le même que celui qui est prévu pour le blog dans "Mise en page" - "Messages du blog". S'il est différent de 7, corriger var chronPerPage = 7; dans le code ci-dessus.

Rappel : Comment créer un gadget HTML/JavaScript.

2) Dans l'écran "Mise en page", il faut coller en-dessous du rectangle "Messages du blog", le gadget HTML/Javascript qui suit. Cela permet de reprogrammer la touche "Accueil" en bas d'écran.

<style>.home-link{visibility:hidden;}
#blog-pager-newer-link{float:right}
#blog-pager-older-link{float:left}
</style>
<div style="position:absolute;top:-46px;left:270px;"><script>
if(window.location.href.indexOf('order=ASC') != -1) document.write('<a id="chronLink2" href="/search?max-results="+chronPerPage+"#order=ASC" style="visibility:hidden;">Accueil</a>'); else document.write('<a href="/">Accueil</a>');
</script></div>

Rappel : Comment créer un gadget HTML/JavaScript.

3) Facultatif : lorsque plusieurs messages ont été créés à la même date, ils sont regroupés sous une seule date. Pour l'éviter, il faut obliger Blogger à afficher la date de tous les messages.

Pour cela, il faut modifier légèrement le template :
- depuis le tableau de bord de Blogger, cliquer sur "Modèle" ;
- cliquer sur "Modifier le code HTML" ;
- remplacer (2 fois) :

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'> <data:post.dateHeader/> </h2>
</b:if>

par :

<b:if cond='data:post.dateHeader'>
<script> var datechaquemessage = '<data:post.dateHeader/>'; </script>
<h2 class='date-header'> <data:post.dateHeader/> </h2>
<b:else/>
<h2 class='date-header'>
<script> document.write (datechaquemessage); </script>
</h2>
</b:if>

4) Facultatif : lorsque plusieurs messages ont été créés à la même date, ils resteront dans l'ordre inverse à l'ordre chronologique. Pour éviter cela, il faut supprimer 3 fois <b:if cond='data:post.isDateStart'> et la balise fermante correspondante : </b:if>

On peut aussi transformer ces lignes en commentaires non exécutables en les faisant précéder de <!-- et suivre de --> comme cela a été fait ci-dessous dans un template "simple" de Blogger :

<!-- <b:if cond='data:post.isDateStart'> -->
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
<!-- </b:if>-->

<!-- <b:if cond='data:post.isDateStart'>-->
<div class="date-outer">
<!-- </b:if>-->

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

<!-- <b:if cond='data:post.isDateStart'>-->
<div class="date-posts">
<!-- </b:if>-->

* * * * *
7 autres méthodes sont décrites sur la page suivante (également accessible ici).

5 commentaires:

Denis Laugt a dit…
Ce commentaire a été supprimé par l'auteur.
Xavier Zanone a dit…

Bonjour,
J'ai un petit problème.
Si je laisse le nombre d'articles sur 7, ça marche.
Si je le change (sur 30 p.ex.) ça ne marche plus ( var chronPerPage = 30;)
Egalement modifié dans "mise en page - articles du blog" sur 30.
Merci de votre réponse.

Meiser a dit…

Bonjour.

Il faudrait faire des essais et corriger ce problème. Cela prendra du temps.

En attendant, votre remarque aidera les autres utilisateurs.


Emma Admirat a dit…

Bonsoir,

je n'arrive pas à obtenir le même résultat que vous. j'ai portant fait des copier-coller pour les 2 gadgets à insérer mais je n'ai pas de lien actif.

Avez-vous une solution à me proposer ?

D'avance, merci

Emma

astaformation a dit…

Bonsoir,
Je cherche une méthode qui affiche sur la page d'accueil, les articles en ordre croissant, ainsi que l'affichage des articles lors d'une recherche sur un libellé donné, se fasse dans l'ordre croissant également.

Est-ce possible ?
D'avance merci.

Evelyne