Si tu suis un peu l’actualité de ces derniers temps tu auras certainement remarqué que la presse adore parler des notes aléatoires données par les trois principales agences de notations financières que compte la planète. Du coup il ne se passe pas une seule journée sans qu’un pays ou une banque ne perde un précieux « A », comme si le commun des mortels en avait quelque chose à carrer.

Pour combattre cette morosité je te propose donc aujourd’hui de certifier ton blog « AAA+ », en ajoutant simplement une superbe bannière en haut à gauche.

L’image originale a été créée sous GIMP, si tu veux la modifier tu peux télécharger le fichier XCF en enregistrant la cible de ce lien.

La procédure à suivre sera expliquée pour un blog tournant sous WordPress, mais un débutant en création web devrait s’en sortir sans problème pour transposer ce tutoriel à n’importe quel site.

Note bien que l’ajout de la bannière est une opération qui nécessite une certaine maitrise dans le transfert par FTP ainsi qu’une vague connaissance des fichiers qui régissent ton thème WordPress, pour le reste ça devrait jouer avec les indications fournies.

Voici donc en trois étapes comment procéder.

Tout d’abord, tu télécharges la bannière (clic droit dessus, puis « Enregistrer sous… ») puis tu la transfères dans le répertoire de ton thème WordPress à l’aide de ton client FTP favori.

Même si ça ne se voit pas sache que le fond de l’image est transparent, ne t’inquiète pas. Le répertoire de ton thème devrait ressembler à « /wp-content/themes/ton_theme ».

Seconde étape, tu édites le fichier « style.css » de ton thème, tout à la fin tu ajoutes ces quelques lignes.

La balise « #noteaaa » permet de formater un carré contenant la bannière au format PNG, et dont les dimensions correspondent à celles de l’image. Sa position est fixée tout en haut à gauche de la fenêtre, et elle y reste même si l’on fait défiler la page vers le bas. Si tu veux bloquer la bannière en haut il te suffit de remplacer « fixed » par « absolute ».

Dernière étape, tu édites ton fichier « footer.php » pour y insérer cette ligne juste avant la balise « </body> ».

Cette balise « DIV » sera formatée grâce aux propriétés CSS de « #noteaaa ». En plaçant cette balise « DIV » tout à la fin (dans « footer.php ») on suppose qu’elle sera normalement au dessus des autres, sans trop avoir à se prendre la tête avec la propriété « z-index » qui règle habituellement la hauteur des champs.

Bref, n’oublie pas de renvoyer les deux fichiers « style.css » et « footer.php » sur ton serveur si tu les as téléchargés avant des les modifier.

Voilà, ton blog est maintenant noté « AAA+ », et aucune de ces agences de notations ne pourra rien y faire.

Dernier point, tu serais gentil de ne pas appeler à l’aide via les commentaires si tu utilises Internet Explorer, il y a en effet de fortes chances pour que le code précité ne fonctionne pas avec cet ersatz de navigateur.