Procédure pour publier un code html et javascript (et autre code C, C++...) dans blogger

(si on copie du code HTML ou avec des balises “<”, il va être interprété ou transformé par ‘compose’).

L’exemple de ce code HTML avec javascript (js) est de faire apparaitre/disparaitre un div avec un bouton placé en haut à droite avec le minimum de js.

Cet HTML en live par exemple:

http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show

Copier votre code
Coller dans http://hilite.me/
hilite.me converts your code snippets into pretty-printed HTML format, easily embeddable into blog posts, emails and websites.
et choisir HTML, votre choix de couleur (ici borland), et un clic sur le bouton ‘highlights’.
Copier le résultat
Coller dans un Google .doc
Faire ‘Share’ ->advanced-> save
Puis dans menu file
Publish to the web
Choisir embed

En outre vous pouvez aller dans menu file/pageSetUp pour mettre en forme les marges et la couleur de fond.

Et on obtient un iframe du type:

Ajouter height="565" width="565" style="border:2px solid grey;"

après true" et avant ></iframe>

La largeur dépend de votre espace de post dans votre blog.

En outre sii vous ne voulez pas de bordure:

style="border:none;"

Vous copiez le code iframe dans votre post de blogger/blogspot en mode HTML.

-------------------------

Quelques intérêts d’utiliser google drive

pour publier du code dans blogger:

A chaque fois que vous changez le fichier .doc

vous aurez les changements qui apparaitront dans votre blog

si vous recharger la page

(shift clic sur le bouton de navigation de votre navigateur

pour être sûr que cela charge la page et non le cache).

Votre code est sauvegardé dans drive.

A vous de bien y gérer vos dossiers…

Vous pouvez aussi utiliser le web clipboard pour copier

votre code avec ses belles couleurs

dans les autres outils google drive comme slides.

-------------------------le code commence ici:

<!DOCTYPE html>
<html>
<head>
<style>
#credits {
width: 100%;
padding: 15px 0;
text-align: center;
background-color: lightblue;
margin-top:15px;
}

#myBtn2 {
position: fixed;
top: 3px;
right: 0;
width: 100px;
}

</style>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button type="button" id="myBtn2" onclick="myFunction2()">credits</button>

<div id="credits">
This is my credits element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

<script>
function myFunction2() {
var x = document.getElementById('credits');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>

</body>
</html>

-------------------------un autre code avec deux images à la place du bouton

Mettre vos images en http (ici dans le dossier de votre serveur ou de votre répertoire gitHub)

En live:

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_state_if_else2

<!DOCTYPE html>
<html>
<body>

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="25" height="40">

<p>Click the light bulb to turn on/off the light.</p>

<script>
function changeImage() {
var image = document.getElementById("myImage");
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>

</body>
</html>