Une bannière, et pour 50 francs je vous rajoute ce que vous voulez !
Depuis la précédente note, il est toujours impossible de modifier directement le bloc d'en-tête de son blog pour y coller le code HTML qu'on veut. Pour ajouter une simple abnnière avec un lien vers l'accueil dessus, reportez-vous à la note précédente. Mais si vous voulez ajouter autre chose qu'une simple bannière, du genre une petite accroche, une barre de navigation, ou le temps qu'il fait chez vous, il faut pouvoir ajouter du code HTML ! C'est là qu'entre en jeu javascript, et accrochez-vous bien pour aller au bout de ce guide !
Javascript permet de modifier à peu près n'importe quel bloc de la page à partir de n'importe quel autre endroit de la page. C'est ce que nous allons faire. On va fournir le code HTML que l'on veut ajouter dans le bloc d'en-tête à notre javascript, et il va se charger de le placer.
Première étape, faire son HTML. tapez-le, récupérez-le, volez-le à un camarade, faites ce que vous voulez, mais venez avec un code HTML. Pour une sombre histoire (sans doute carcérale) de chaines et d'échappement inhérente à Javascript, il faut que vous remplaciez dans votre code tous les guillemets, les apostrophes et les antislash, afin de placer devant eux un antislash. Clairement :
" devient \"
' devient \'
\ devient \\
Note : D'incroyables bijoux de technologies tels que le bloc-note de Windows sont capables de faire ces remplacements en 2 secondes. Fouillez donc "Edition/remplacer" ;)
Votre code HTML est prêt ! Il faut maintenant l'insérer dans le javascript qui va l'utiliser et là le code ne s'invente pas, le voici :
<script type="text/javascript" language="javascript"> document.getElementById('head').innerHTML = maFonctionQuiRenvoieLeCodeHTML(); function maFonctionQuiRenvoieLeCodeHTML() { codeHTML = " Entrez entre ces guillemets le code HTML à insérer dans l'en tete de votre page, en faisant bien attention de mettre un antislash devant les guillemets, apostrophes et antislashs "; return codeHTML; } </script>
Insérez donc votre HTML à l'endroit indiqué. Sauvegardez ce javascript quelque part, pour pouvoir le modifier sans problèmes. Ajoutez ensuite à votre blog un Widget HTML, dans lequel vous collez ce javascript. Sauvegardez, et admirez !
Enfin, faisons disparaitre le Widget tout moche qu'on vient d'ajouter. Votre widget possède un numéro unique, que vous pouvez trouver dans le code source de votre page. Ouvrez dans Firefox le menu Affichage > Code source de la page, et cherchez votre javascript, il doit se trouver dans le bas de la page de code... Juste au-dessus de ce javascript, vous devez voir quelques lignes avec plusieurs fois le même numéro, souvent entre parenthèses avec devant des mots du genre box_show_admin... Ce numéro est le numéro de votre widget. Imaginons que ce soit 42. Ajoutez alors dans votre CSS :
#column #box_42 {display: none;}
Le widget disparait, et votre page est propre ! Pour éditer votre javascript, et donc votre en-tête, vous devez supprimer ces lignes du code CSS, pour que le widget réapparaisse. Ouvre son interface de modification (en cliquant sur le point d'interrogation qui s'affiche lorsqu'on passe sur le titre du widget), et ollez-y votre javascript modifié. Notez qu'à chaque fois que vous voulez modifier le contenu du widget, celui ci a disparu ! C'est un bug dû au javascript, et c'est pour ça qu'il est important de sauvegarder son javascript avant de l'envoyer sur le blog.
Derniers commentaires