reverse order of posts more 1

obtenir ces boutons

Reverse the order of the posts : more 1

9 ways to reverse the order of messages are described on this site. On the previous page (available here ) , a first approach was explained. Another is described below, and 7 on an other page ...

* * * * *
The second method is to ADD A WIDGET UP TO A LATERAL COLUMN. By clicking on a link, the visitor can reverse the order of messages : either display them in chronological order, or in reverse chronological order.

An example of this is available here.

* * * * *
The method is a little slower to develop. It is necessary to add two widgets at the blog, and, if there are messages with the same date, to make two corrections to the template :

1) At the top of the sidebar, add a widget HTML/JavaScript as follows :

<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;">Posts in chronological order</a>'); else document.write('<a href="/">Posts in reverse chronological order</a>');
</script></h2>

Number of messages displayed must be the same as that provided for the blog in "Layout" - "Blog Posts". If it is different from 7, correct chronPerPage var = 7 in the code above.

Reminder: How to create a widget HTML/JavaScript.

2) In the "Layout" stick below the rectangle "Blog Posts" a widget HTML/JavaScript as follows. This allows to reprogram the key "Home" at the bottom of the page.

<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;">Home</a>'); else document.write('<a href="/">Home</a>');
</script></div>
Reminder : How to create a widget HTML/JavaScript.

3) Optional: when multiple messages were created at the same day, they are grouped under a single date. To force Blogger to display the dates of all messages, modify the template :

- From the Blogger dashboard, click "Model";
- Click on "Edit HTML";
- Check the "Expand Widget Templates of";
- Replace (2 times):

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

by :

<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) Optional: when multiple messages were created at the same day, they remain in the reverse order chronologically. To avoid this, delete 3 times and the closing tag

It is also possible to transform these lines in comments nonexecutable, preceding by <!-- and following by --> as it was done below in a template "simple" of 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 Other methods are described on this page (in French, but a translator is available).

Aucun commentaire: