Flèches flottantes "Messages plus anciens/Messages plus récents" à mi-hauteur de l’écran (suite sans fin...)

 Bon... Voici ma nouvelle version des flèches flottantes de navigation (anciens messages- Messages précédents). Article #3. 

Tous les 3 anciens messages en relation ont été regroupés sous celui-ci. 

Ne vous mélangez pas les pinceaux! Tous ces articles sont avant-tout des notes personnelles.

Faites impérativement des sauvegardes de votre blog avant toute manipulation hasardeuse...

Tous les articles concernant ce "bidouillage" sont visibles dans le libellé liens précédent et plus récents

Ce n'est pas encore parfait. Les liens qui se trouvent au-dessous de l'étroit tableau invisible ne sont pas accessibles. Problème récurrent. Mais maintenant quelque soit le type d'écran (= ou supérieur à 800 px, ou dans un iframe), les flèches ne changeront pas de position. En principe! car cela fait bien longtemps que je n'ai pas utilisé IE...

Ce code est à placer après <div class='blog-pager' id='blog-pager'> Chez moi, c'est la deuxième occurrence qui se trouve à la ligne 1425 (Ça peut être différent chez vous, mon modèle étant allégé). Les modifications précédentes (voir précédents messages) ont été annulées.

Le tableau est en bleu et le code d'origine de Blogger est en noir (le code d'origine avait cependant déjà été modifié précédemment).

<table cellpadding='0' cellspacing='0' style='border: none; width: 100%; text-align: left; position: fixed; top: 50%; left: 0%; height: 0px; margin: auto; visibility : visible;z-index : 1;'><tbody><tr><td style="text-align: center;">

<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVUM-PLyYlPTThR65M4wov6i9oF_6aQ7Uw_Pmc2-3vmvMPtG8Aa0CsJ4jM9jBFjEYSBAms1gNPE2ONw0lOXycCp5lRROB3r48vHsG5gGibtFkofquSfumXc8_rqeXHQKkOT-zsrN7ypy5T/s1600/1px.png" style="width: 1px; height: 1px;" /></td>

<td style="text-align: center; white-space: nowrap; vertical-align: middle; width: 640px;">

<b:if cond='data:newerPageUrl'>

      <span id='blog-pager-newer-link'>

      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmTFaaH1AmEYFf863UI5q3MY6s7EUNrwUwBB-x8lOHVuPVOp5uZ_MYHQ6jEuPe9295MqT5w7mdTwHsTYxQaHxTeY5ZNjOQIg_fx4GwEcw3F8hFSQcf9hHcmwuGGPHOP3xezTKjVPoyby0/s1600/arrow-blue-left.png' style='border: 0 none;vertical-align: middle;'/></a>

      </span>

    </b:if>

    <b:if cond='data:olderPageUrl'>

      <span id='blog-pager-older-link'>

      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5z-4cPURRmiSZrO4ivQp0g7-N_IbsdT3rMdQ5Qocv2jRexsaXNlMwz1uAsJSDNwKq8CSP7WQAsri_yRK9zITAc1OE0mkMdFTq9nm3WTB1aJFYuH3R8zowqoKnysFlge3_6c1_BvgnUB0/s1600/arrow-blue-right.png' style='border: 0 none;vertical-align: middle;'/></a>

      </span>

    </b:if>

</td>

<td style="text-align: center;">

<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVUM-PLyYlPTThR65M4wov6i9oF_6aQ7Uw_Pmc2-3vmvMPtG8Aa0CsJ4jM9jBFjEYSBAms1gNPE2ONw0lOXycCp5lRROB3r48vHsG5gGibtFkofquSfumXc8_rqeXHQKkOT-zsrN7ypy5T/s1600/1px.png" style="width: 1px; height: 1px;" /></td>

</tr></tbody></table>