• Certaines balises HTML5 ne sont pas admises sur Ekla (ou par l'éditeur).
    Essayez d'insérer une balise audio ou video via l'éditeur.....rien, nada, que dalle, walou !!!!

    Lire la suite...


    votre commentaire
  • Un p'tit clavier ou zapette, pour modifier certaines couleurs du blog...!
    Quoi ...????? C'est juste pour le fun !!!!!!

    fond de page en:


    header en:


    menu1 en:

     

    Code CSS

    
    #choix-couleur li {
     float: left;
     margin-right:20px;
     margin-left:1px;
     list-style-type: none;
     box-shadow:6px 6px 10px black;
     transition:1s;
     }
     #choix-couleur li:hover {
     box-shadow:none;
     transition:0.5s;
     }
     #coul {
     max-width:200px;
     height:260px;
     margin-bottom:20px;
     background-color:rgba(51, 51, 51, 0.55);
     border:2px solid black;
     border-radius:15px;
     box-shadow:6px 6px 10px black;
     }
     #coul p {
     margin:10px auto;
     max-width:130px;
     text-align:center;
     color:grey;
     padding:0px;
     border:2px solid black;
     border-radius:5px;
     background-color:white;
     box-shadow:6px 6px 10px black;
     }
    

    Code HTML

    
    <div id="coul">
    <p>fond de page en:</p>
    <ul id="choix-couleur">
    <li><a style="color: red;" onclick="$('body').style.background=' red';$('header').style.background=' yellow'" href="#"><span style="background: red;">rou</span></a></li>
    <li><a style="color: green;" onclick="$('body').style.background=' green'" href="#"><span style="background: green;">ver</span></a></li>
    <li><a style="color: yellow;" onclick="$('body').style.background=' yellow'" href="#"><span style="background: yellow;">jau</span></a></li>
    </ul>
    <br />
    <p>header en:</p>
    <ul id="choix-couleur">
    <li><a style="color: red;" onclick="$('header').style.background=' red'" href="#"><span style="background: red;">rou</span></a></li>
    <li><a style="color: green;" onclick="$('header').style.background=' green'" href="#"><span style="background: green;">ver</span></a></li>
    <li><a style="color: yellow;" onclick="$('header').style.background=' yellow'" href="#"><span style="background: yellow;">jau</span></a></li>
    </ul>
    <br />
    <p>menu1 en:</p>
    <ul id="choix-couleur">
    <li><a style="color: red;" onclick="$('menu1').style.background=' red'" href="#"><span style="background: red;">rou</span></a></li>
    <li><a style="color: green;" onclick="$('menu1').style.background=' green'" href="#"><span style="background: green;">ver</span></a></li>
    <li><a style="color: yellow;" onclick="$('menu1').style.background=' yellow'" href="#"><span style="background: yellow;">jau</span></a></li>
    </ul>
    </div>
    

    4 commentaires
  • Mettre des liens haut-de-page et bas-de-page, rien de plus simple....
    Mais si on veut afficher ces liens après avoir scroller la page, c'est mieux et plus design.
    Et au retour haut-de-page, Hop!...ces liens disparaissent.
    On peut voir cette fonction sur les sites Wordpress, entre autres...!
    On utilise un petit script javascript qui décompte le nombre de pixels pendant le scroll.
    Et suivant la valeur imposée (400 pour 400px par exemple), les liens s'affichent selon le code CSS.
    Ici les deux flèches Haut et Bas apparaissent à droite de la page, après le scroll.
    On place tous les codes dans la zone de script......
    Essayez de scroller jusqu'en bas de page .........

     

    Voir les codes (HTML, CSS, JS)

    Scroller en bas de page

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    Scroller en bas de page

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    Scroller en bas de page

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    Scroller en bas de page

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    Bas de page

    Code CSS

    
    #retour{
     display:block;
     position:fixed;
      top:500px;
      right:20px;
     opacity:0.1;
      transition:all 0.5s;
     }
     #retour a{
     display:none;
     }
     #retour.top a{
     display:block;
     }
     
    #retour.top {
     opacity:1;
     box-shadow:6px 6px 10px grey;
     transition: all 2s;
     }
     #retour.top img {
     width:50px;
     height;50px;
     margin:2px;
     }
    

    Code javascript

    
    window.onscroll = function() {myFunction()};
    
    function myFunction() {
        if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
            document.getElementById("retour").className = "top";
        } else {
            document.getElementById("retour").className = "";
        }
    }
    

    Code HTML

    
    <div id="retour">
    <a title="Haut de page" href="#top">
    <img src="http://ekladata.com/Xgyy5tl8uOndNtxoqbRItglnk7A.png" alt="" /></a>
    <a title="Bas de page" href="#footer">
    <img style="-ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);" src="http://ekladata.com/Xgyy5tl8uOndNtxoqbRItglnk7A.png" alt="" /></a>
    </div>
    

    votre commentaire
  •  

    Si problème d'affichage lecteur, cliquer  ICI.

    Chargement vidéo.....

     

    Le Lecteur vidéo JwPlayer est un lecteur codé en javascript, compatible tous formats. MP4, FLV mais aussi des fichiers audio MP3 etc....C'est donc un lecteur universel audio/video pour site web, sur support PC, tablette, smartphone. Ci-dessus le lecteur réduit en simple lecteur MP3. Et ci-dessous le lecteur version vidéo avec un fichier MP4.....et ça roule !!! Testez-le sur votre tablette et smartphone (cliquer sur la version mobile tout en bas de la page).
    Voici les liens qu'on retrouve sur les mobiles (cliquer dessus) :

    http://gmz.ek.la/?noajax&mobile=1 >>> Version "mobile épurée" (sans Thème CSS)
    http://gmz.ek.la/?noajax&mobile=0 >>> Version standard pour mobiles (Thème CCS du blog)

     

    Chargement vidéo.....

     

    Installation du Lecteur JwPlayer

    1- Fichier jwplayer.js

    Dans un premier temps, il faut télécharger le fichier JS du lecteur.
    Rendez-vous sur le site JwPlayer site, inscrivez-vous et recevez par mail les fichiers.....
    Ou bien, autre méthode, ouvrir ce lien : 

    http://ekladata.com/a6vqpPqFJ_oS_Rr1bxCHeLPmtvM/jwplayer.js

    Sélectionner tout le code (ctrl+a)
    Copier le code (ctrl+c)
    Dans un éditeur de texte (Notepad++, bloc-notes, etc...), coller le code (ctrl+v).
    Enregistrer sous le nom de jwplayer en ajoutant l'extension ".js", sur votre bureau.
    On obtient le fichier: jwplayer.js
    Sur votre blog, via Gestion des fichiers (voir img), créer un dossier: jwplayer
    Ouvrir ce dossier et télécharger dedans, le fichier jwplayer.js .
    Une fois télécharger, ouvrir ce fichier et copier l'adresse (URL) de la barre de navigation.
    Pour ce blog on obtient:

    http://ekladata.com/a6vqpPqFJ_oS_Rr1bxCHeLPmtvM/jwplayer.js

    2 - Placer le lecteur dans un article

    IMPORTANT : Javascript doit être activé sur votre blog
    Pour insérer le lecteur JwPlayer dans un article, une page, ou un module simple, on place cette ligne de code ci-dessous en début d'article.(mode source <>)
    Ne pas oublier de modifier l'adresse src (URL)du fichier jwplayer.js , par votre propre URL (copiée dans la barre navigateur un peu + haut....)
    Ce code va charger le fichier jwplayer :

    
    <script src="http://ekladata.com/a6vqpPqFJ_oS_Rr1bxCHeLPmtvM/jwplayer.js" type="mce-no/type"></script>
    

    Ensuite insérer le code setup du lecteur qui va le paramétrer  (type de fichier à lire, image intro, largeur, etc..)

    Code setup du lecteur (javascript) :

    <script>// <![CDATA[
    jwplayer("myElement").setup({
            file: "http://ekladata.com/nZhBLmq7OCV7Mng14lssUPpUQaU/amily-of-the-ear-ero-oyhood.mp3",
            image: "",
            width: 250,
            logo: {
            file: '',
            link: ''
        },
            height: 30
        });
    // ]]></script>

    Dans ce code on distingue différents éléments:
    file: "URL fichier MP3",      >>>      Url du fichier audio MP3 qui va être joué par le lecteur
    width: 250,                      >>>      Largeur du lecteur (en px)
    height: 30                         >>>      Hauteur du lecteur (en px)
    Pour une lecture automatique, on ajoute entre width et height la ligne:
    autostart: true,

    On remarque le nom du lecteur: "myElement". Pour ajouter d'autres lecteurs sur une même page, le nom doit être différent, ex:"myElement2", "myElement3", etc...

    Enfin un petit code html pour lancer le lecteur....
    Code HTML du lecteur :

    
    <div id="myElement">Chargement video.....</div>
    


    Exemple concret du lecteur JwPlayer en mode audio MP3 (codes complets, JS + HTML)

    
    <!------------------Codes-Lecteurs-JwPlayer-JS-HTML-mode-audio-MP3----------------->
    
    <script src="http://ekladata.com/a6vqpPqFJ_oS_Rr1bxCHeLPmtvM/jwplayer.js" type="mce-no/type"></script>
    <script>// <![CDATA[
    jwplayer("myElement").setup({
            file: "http://ekladata.com/nZhBLmq7OCV7Mng14lssUPpUQaU/amily-of-the-ear-ero-oyhood.mp3",
            image: "",
            width: 250,
            logo: {
            file: '',
            link: ''
        },
            height: 30
        });
    // ]]></script>
    <div id="myElement">Chargement video.....</div>
    

     

    Insérer ce code pour chaque lecteur, en changeant le nom "myElement" dans la partie JS et HTML.
    Pour vos questions, utiliser les commentaires ci-dessous.

    http://doc.eklablog.com/blog-eklablog-avec-musique-sur-smartphone-topic132896


    5 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique

Version standard

Poursuivre l'affichage en version standard (ordinateur),

cliquer ci-dessous

Clic ici

(Puis fermer cette fenêtre, en haut à droite)

Cet article vous a plu ?
Abonnez-vous !!!

Newsletter