PRESENTATION
     Les outils :

     Pour créer mon site web, j'utilise principalement deux logiciels :

1 - OpenElement ( http://www.openelement.fr/download.fr.htm ) gratuit

2 - notepad++ ( https://notepad-plus-plus.org/download/v7.3.2.html ) gratuit


     Les fonctions :

     Pour intégrer des éléments, non disponibles dans OpenElement, je les écris à partir de codes sources (trouvé sur internet) à l'aide de notepad++, puis, une fois que le résultat voulu est obtenu, je les intègre dans ma page de site avec l'un ou l'autres des deux éléments fournis par OpenElements, à savoir :

1 - Bloc de code (visuel) 
     
Lorsqu'il s'agit d'un élément qui doit être visible sur la page du site, comme par exemple un lien de bannière, le bouton avec sa TextBox "Copy To Clipboard", ...etc.








<!-- Copy Address Wallet -->

<head>

   <style>

body {

 font-family: sans-serif;

 font-size: 1em;

 color:#XBody ;

 background-color: #XBody;

}

 

label {

 clear: both;

 display: block;

 font-size: 0.85em;

 font-weight: bold;

 padding: 0.8em 0 0.2em 0;

 -webkit-user-select: none;

    -moz-user-select: none;

     -ms-user-select: none;

         user-select: none;

}

 

input, button {

 float: left;

 font-size: 1em;

 padding: 3px 6px;

 margin: 0;

 border: 1px solid #333;

 outline: 0;

 box-shadow: none;

}

 

::-moz-focus-inner {

 padding: 0;

 border: 0;

}

 

input {

 width: 15em;

 background-color: #fff;

 border-right: 0 none;

 border-radius: 3px 0 0 3px;

}

 

button {

 position: relative;

 background-color: #aaa;

 border-radius: 0 3px 3px 0;

 cursor: pointer;

}

 

.copied::after {

 position: absolute;

 top: 12%;

 right: 110%;

 display: block;

 content: "copied";

 font-size: 0.75em;

 padding: 2px 3px;

 color: #fff;

 background-color: #22a;

 border-radius: 3px;

 opacity: 0;

 will-change: opacity, transform;

 -webkit-animation: showcopied 1.5s ease;

         animation: showcopied 1.5s ease;

}

 

@-webkit-keyframes showcopied {

 0% {

   opacity: 0;

   -webkit-transform: translateX(100%);

           transform: translateX(100%);

 }

 70% {

   opacity: 1;

   -webkit-transform: translateX(0);

           transform: translateX(0);

 }

 100% {

   opacity: 0;

 }

}

 

@keyframes showcopied {

 0% {

   opacity: 0;

   -webkit-transform: translateX(100%);

           transform: translateX(100%);

 }

 70% {

   opacity: 1;

   -webkit-transform: translateX(0);

           transform: translateX(0);

 }

 100% {

   opacity: 0;

 }

}

.copyright

{

   

font-size: 8px;

   color: black; /* Les paragraphes seront en noir */

 

}

   </style>

 

 <script> window.console = window.console || function(t) {}; </script>

 <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script>

 

</head>

 

<body translate="no">

 

<!--partie de code à dupliquer pour ajouter plus de boutons-->

   

  <label for="btc">Adresse Wallet Bitcoin (BTC):</label>

   <input id="btc" value="1GhLTTukoPS5o2HWVJ1cDR4FazvY1Rr2W5" type="text">

   <button data-copytarget="#btc">copy</button>

 

<!--partie de code dupliquer pour ajouter des boutons à copier ici, exemple :-->

 

  <label for="doge">Adresse Wallet Dogecoin (DOGE):</label>

   <input id="doge" value="l'adresse du wallet" type="text">

   <button data-copytarget="#doge">copy</button>

 

 

<script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js"></script>

 

<script>

   (function () {

   'use strict';

   document.body.addEventListener('click', copy, true);

   function copy(e) {

       var t = e.target, c = t.dataset.copytarget, inp = c ? document.querySelector(c) : null;

       if (inp && inp.select) {

           inp.select();

           try {

               document.execCommand('copy');

               inp.blur();

               t.classList.add('copied');

               setTimeout(function () {

                   t.classList.remove('copied');

               }, 1500);

           } catch (err) {

               alert('please press Ctrl/Cmd+C to copy');

           }

       }

   }

}());

 //# sourceURL=pen.js

</script>

 

<a href="" id="__captchaReAnother"></a><a href="" id="__captchaReActive"></a>

<br/><p class="copyright"><em> (https://www.sitepoint.com/javascript-copy-to-clipboard) </em></p>

  

</body>

<!-- Fin Copy Address Wallet -->

2 - Bloc de code (source)

Lorsqu'il s'agit d'un élément invisible qui doit être intégré dans le programme de la page elle-même, comme par exemple quand j'ai créé les fenêtres modales présentes sur certaines pages du site, j'ai pu les paramètrer en intégrant du code CSS et Javascript dans mes pages.

Exemple : Pour intégrer un favicon dans l'onglet du navigateur et capture pour le partage facebook

 <head>

<link rel="icon" type="image/png" href="favicon.png" />

<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->

</head>

 

<head>

<!-- pour favicon + photo facebook-->

<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">

<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">

<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">

<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">

<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">

<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">

<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">

<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">

<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">

<link rel="icon" type="image/png" sizes="192x192"  href="/favicon/android-icon-192x192.png">

<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">

<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">

<link rel="manifest" href="/favicon/manifest.json">

<link href="/vignette.png" rel="image_src"  /> <!--image pour la capture facebook-->

<meta property="og:title" content="mikebitcoin"/>

<meta property="og:type" content="site"/>

<meta property="og:url" content="http://mikebitcoin.heb3.org/"/>

<meta property="og:image" content="http://mikebitcoin.heb3.org/vignette.png"/>

<meta property="og:site_name" content="mikebitcoin.heb3.org"/>

<meta property="og:description" content="Site sur la monnaie numerique"/>

<meta name="msapplication-TileColor" content="#ffffff">

<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">

<meta name="theme-color" content="#ffffff">

<meta property="og:image" content="/vignette.png">

<meta property="og:image:type" content="image/png">

<meta property="og:image:width" content="200">

<meta property="og:image:height" content="200">

<meta property="og:image" content="/logo.png">

<meta property="og:image:type" content="image/png">

<meta property="og:image:width" content="200">

<meta property="og:image:height" content="200">

<!-- fin-->

</head>