Barre-menu

11.5.17

Fin des travaux chez DarkRiketz

Je l'ai évoqué plusieurs fois sur Twitter, vous l'aurez évidemment remarqué si vous êtes passés sur mon blog pendant ou après leur réalisation, j'ai récemment procédé à une réhabilitation et une refonte de la structure du blog.
J'en ai donc profité pour mettre à jour la Carte du blog, qui était du coup obsolète.
Le présent article est un état des lieux de fin de travaux, afin que les modifications soient claires pour tout le monde, que vous puissiez comprendre ce qui a changé, pourquoi et comment.

Avant toute chose, je tiens à remercier très sincèrement et aussi chaleureusement que la froideur des pixels et des lignes de codes le permettent la blogueuse Lady Bird Red, chez qui j'ai trouvé tout ce dont j'avais besoin pour procéder aux changements que je voulais (à savoir un seul ^^), mais aussi tout ce à quoi je n'avais pas pensé (donc tout le reste ^^) et que j'ai donc modifié également à l'occasion de ces travaux.
Dame Rougeoiseau, apparemment extrêmement douée sinon experte en codage, en CSS et en HTML, écrit sur son site des tutos afin de personnalisés et de perfectionner le style style visuel ou structurel des blogs, ils sont illustrés par les lignes de codes engagées dans chaque modif, par le résultat obtenu à chaque fois, c'est clair et détaillé, étape par étape bref, facile à reproduire.
Je précise également que, grâce au souci du détail de Lady Bird Red, absolument toutes les modifications fonctionnelles qu'elle propose dans ses tutoriels peuvent être personnalisées visuellement par le CSS et le HTML, et j'me suis pas privé de le faire.

Passons maintenant aux travaux proprement dits sur mon Journal culturel, volume 42.



Je garde le modèle de base en 3 colonnes que j'utilisais déjà sur Cowblog, mais on m'a déjà signalé plusieurs fois, de différentes manières et s'agissant de personnes variées (y compris Alex Effect pour qui je n'éprouve un respect que formel et une estime inexistante (crétin mégalo, narcissique et control-freak va !)) que la navigation sur mon blog était rendue malaisée par la taille de chaque page, elle-même dépendant de celle des articles.
C'est donc le premier et le plus rapide des tutos que j'ai suivis : désormais, seule l'introduction des articles est visible sur la page de navigation courante. Cliquer sur le titre d'un article affiche l'intégralité de celui-ci, et cliquer sur le bouton "Lire la suite" vous amène à la fin de l'introduction, juste après le bouton en question.
Vous allez vite constater si c'est pas déjà fait que grâce à ça, le blog est beaucoup plus léger. Il va charger plus vite sur les tablettes et smartphones et encore plus vite sur les PC.

Le nouveau cœur de la navigation, vous l'aurez remarqué, est désormais la barre de menu. Elle est fixée en haut d'écran (et pas en haut de blog), c'est-à-dire que si vous descendez pour parcourir les articles suivants, la barre suit le mouvement et reste affichée.
En créant cette barre, j'y ai ajouté plusieurs choses via autant de tutos :
 - des boutons permettant d'accéder à la 1ère page du blog, aux sommaires, aux pages de présentations et aux 5 derniers articles.
 - j'ai changé ces boutons en menus déroulants afin d'éviter de  surcharger la barre.
 - j'ai ajouté un bouton de contact par mail à la suite des menus précédents.
 - est venu ensuite un bouton de recherche. Il ne recense pas les mots-clés (que je n'utilise toujours pas) ni les catégories, mais les termes et thèmes évoqués dans les articles. Par exemple si vous tapez "politique", vous aurez tous les articles, rangés par date ou par pertinence selon votre choix, évoquant la politique.

Évidemment, la présence de cette barre de navigation et des menus déroulants a rendu obsolètes les modules associés, donc j'ai supprimé les trois, rendant d'un coup les colonnes latérales plus légères et plus visuelles.


Ensuite, j'ai créé un encart de présentation au sommet d'une colonne (d'abord la droite, puis par souci d'équilibre des barres entre elles, il est allé à gauche. Ce qui est normal, je vais pas à droite moi, faut pas déconner).
C'est pas très utile ni très fonctionnel mais bon, c'est joli et ça mange pas de pain (de fait, c'est Black Panther dans un joli avatar rond, et vive le CSS). Et puis ça rappelle ma PP sur Twitter, j'aime ça.

Après, j'me suis intéressé au bloc de mots-clés, que, comme je le dis déjà sur la Carte du blog, j'utilise comme des catégories. Afin de les rendre à la fois plus lisibles et moins envahissantes dans l'équilibre des colonnes, j'en ai fait un menu déroulant (encore, c'est sympa ces choses-là). Dans ce menu, les catégories sont en outre rangées par ordre de fréquence : plus y'a d'articles, plus haut elles sont.


Un autre truc auquel je tiens beaucoup et dont, visuellement, je suis très satisfait, c'est le bas d'article. Je l'ai rendu plus esthétique en aérant et en centrant ses trois lignes, j'ai ajouté des icônes de partage (Twitter, FB, Blogger...) dans celle du milieu, et comme elles (on dit bien UNE icône) étaient moches comme des culs, j'ai aussi suivi le tuto qui permet de les améliorer.
Résultat, de belles icônes grandes et rondes pour partager en un clic les articles qui vous plaisent. Bon, ça me servira aussi à partager plus rapidement mes articles dès leur publication, mais n'hésitez pas à le faire aussi, notamment dans le cas de la vulgarisation historique, ça fait plaisir ♥

Ah, et puis j'ai modifié la Pokéblogroll pour y ajouter Piece of Geek, le blog de Kavaliero, c'est simple et rapide, c'est gratuit, ça me fait plaisir :) Bon, je trouvais pas de pokémon à chapeau et y'a pas de pokémon qui soit spécialement lié à l'élégance mais le stade final du dernier starter de plante, Brindibou, est plutôt classe, avec une grande cape et un capuchon, alors voilà, paf.
En plus je suis à peu près sûr que Kavaliero est écolo, donc de type plante. Combo.

Voilà, alors... hum, pour l'instant c'est à peu près tout, enfin ça fait déjà pas mal de modifs. Je pense avoir réussi à faire ce que je voulais, en tout cas je suis satisfait, la navigation est à la fois plus simple, plus fluide et plus intuitive, j'espère que vous vous plairez sur cette nouvelle version du blog :)
Allez, bonne soirée et bonne lecture à tout le monde

Voir aussi :
 - le blog de Lady Bird Red.
 - et plus précisément la partie consacrée aux tutoriels de blogging/CSS/HTML.

1 commentaire:

  1. Bonjour DarkRiketz,
    Tu as fait du très bon travail ! Je suis toujours contente de pouvoir aider :)
    Comme tu l'as bien dit dans ton article, tous les tutoriels sont personnalisables pour que chacun puisse transformer leur blog en ce qu'il souhaite. C'est toujours un plaisir de voir ce que les lecteurs font de mes tutoriels ^^

    RépondreSupprimer