• Générateur de compte à rebours

    Générateur de compte à rebours
    version 1.1 (27/05/2014)
    Commentez cet outil ici : [SCRIPT] Insérer un compte à rebours sur le blog
    Le code généré HTML / Javascript du compteur est dans le cadre en rouge clair en bas. Attention : vous devrez faire activer le javascript pour votre blog.


    1 - Identifiant du compteur :
    Cet identifiant doit être unique sur tout le blog !
    N'utilisez que des lettres non accentuées et des chiffres.
    Si vous ne souhtaitez qu'un compteur sur votre blog, vous pouvez laisser l'identifiant par défaut.

    2 - Date de fin :
    Année : Mois : Jour  
    Heure : Minutes : Secondes :
    Date à laquelle le compteur atteindra zéro.

    3 - Délai d'affichage en secondes :
    Choisissez un délai en fonction de votre affichage, inutile de mettre un délai d'une seconde si vous n'affichez que le jour par exemple.

    4 - Texte du compteur :

    Normal HTML

    L'éditeur est réduit : pour plus de possibilités, vous pouvez écrire dans l'éditeur d'article et récupérer le HTML en affichant le Code Source.
    Pour insérez un retour à la ligne simple, utilisez les touches Majuscules + Entrée.

    Utilisez les codes suivants pour intégrer les informations de temps restant:
    - [j] pour les jours ;
    - [h] pour les heures ;
    - [m] pour les minutes ;
    - [s] pour les secondes.     5 - Texte du compteur lorsque la date est dépassée :

    Normal HTML

    Videz la zone pour que le compteur s'arrête à zéro.

    6 - Style CSS du compteur :
    • border:1px solid #663300; définit une bordure de 1px, en trait plein de couleur #663300 (brun).
    • width:200px; définit une largeur de 200px.
    • text-align:center; centre le texte à l'intérieur du compteur.
    • margin 0px auto; centre le compteur à l'intérieur de son contenant.
    • padding:4px; définit les marges intérieures.
    • border-radius:10px; ,et les autres avec un préfixe -moz- ou -webkit-, définissent une bordure arrondie.

    Code CSS de mise en forme du cadre du compteur.

    7 - Prévisualisation du compteur :   Ajouter des jours à la date courante  : 

     

    Cliquez sur « Relancer le compteur » si nécessaire, par exemple pour raffraîchir sans attendre la fin d'un long délai.
    Ajouter des jours pour tester le dépassement de la date de fin.

    8 - Code HTML de votre compteur : à coller dans votre blog dans l'éditeur de Code Source :

     Commentez cet outil ici : [SCRIPT] Insérer un compte à rebours sur le blog