TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Widget de compte à rebours gratuit pour le site Weebly

112

Le widget Compte à rebours vous permet de présenter une minuterie pratique à des fins de lancement de produit, de lancement d’événement, etc. Le code du widget peut être intégré dans l’ élément « Intégrer le code», il peut donc être ajouté n’importe où sur la page avec d’autres contenus. Si vous souhaitez l’ajouter sur une page distincte pour le site en construction sans menus de navigation ni pied de page, puis créez une nouvelle mise en page et ajoutez le code du widget. Dans cet article, nous nous concentrerons sur l’ajout du widget de compte à rebours gratuit pour le site Weebly dans le contenu d’une page.

Le widget du compte à rebours ressemblera à ci-dessous et vous pouvez modifier les couleurs selon vos besoins en fonction de la mise en page de votre site.

Widget de compte à rebours gratuit pour le site Weebly

Téléchargez les fichiers de script pour créer ce widget.

Étape 1 – Téléchargez et ajoutez les scripts

Le widget est basé sur les scripts init.js/countdown.js et modifié pour s’adapter à un site Weebly avec du CSS supplémentaire. Téléchargez les fichiers de script et téléchargez-les dans la section «Thème > Modifier HTML / CSS > Actifs» de votre site Weebly. Ensuite, liez les fichiers de script dans la section « Code de pied de page » de votre page comme ci-dessous :

<script src="/files/theme/countdown.js" type="text/javascript"></script> <script src="/files/theme/init.js" type="text/javascript"></script>

Vous pouvez également utiliser les chemins de fichiers absolus en préfixant le nom de votre site Weebly aux URL ci-dessus.

Étape 2 – Ajout de CSS

Ajoutez le CSS ci-dessous dans la section "Code d’en-tête" de votre page Weebly :

<style> .countdowntimer { background: rgb(92, 57, 57) none repeat scroll 0% 0%; padding:20px 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 25px; } .title #desc { margin: 25px 0 25px 0; text-align:center; color: lightyellow; font-size: 18px; } .title #head { font-size: 30px; color: #ffffff; } ul#countdown { text-align:center; } ul#countdown li { color:#fff; display: inline-block; margin-right:18px; width: 100px; height: 90px; text-align: center; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #333333; -webkit-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3); -moz-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3); box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3); } ul#countdown li span { font-size: 42px; font-weight: bold; color: #fff; position: relative; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1); top: 10px; } ul#countdown li p.timeRefDays, ul#countdown li p.timeRefHours, ul#countdown li p.timeRefMinutes, ul#countdown li p.timeRefSeconds { text-shadow: 1px 1px 2px rgba(150, 150, 150, 1); margin-top: 15px; } </style>

Étape 3 – HTML pour le compte à rebours

Ajoutez le code HTML ci-dessous dans un élément « Embed Code » et alignez la position au centre. N’oubliez pas de remplacer le titre et la description par les vôtres.

<div class="countdowntimer"> <div class="title"> <h3 id="head">This is a countdown timer widget</h3> <h5 id="desc">Remaining time for official product or website launch</h5> </div> <ul id="countdown"> <li> <p class="timeRefDays">days</p> <span class="days"></span> </li> <li> <p class="timeRefHours">hours</p> <span class="hours"></span> </li> <li> <p class="timeRefMinutes">minutes</p> <span class="minutes"></span> </li> <li> <p class="timeRefSeconds">seconds</p> <span class="seconds"></span> </li> </ul> </div>

Étape 4 – Définition de la date cible

La date cible de la minuterie est définie dans le fichier de script "init.js" comme "31 décembre 2016" à des fins de démonstration. Vous pouvez modifier la date selon vos besoins, enregistrer les modifications et publier le site pour voir le compte à rebours en action.

Widget de compte à rebours gratuit pour le site Weebly

Date cible pour le compte à rebours

Widget de compte à rebours de parallaxe pleine largeur

L’ajout du widget ci-dessus à l’aide de l’élément de code intégré le rendra clair. Vous pouvez créer un magnifique compte à rebours de parallaxe en utilisant l’ élément de section comme ci-dessous :

Widget de compte à rebours gratuit pour le site Weebly

Compte à rebours Widget avec fond d’image de parallaxe

Suivez les instructions ci-dessous pour créer un graphique à secteurs avec un fond d’image de parallaxe.

  • Faites glisser et déposez un élément de section. Cliquez sur l’élément de section dans la zone de contenu, puis cliquez sur l’option « Modifier l’arrière-plan ».
  • Choisissez l’image comme arrière-plan et définissez l’effet de défilement comme parallaxe. Vous pouvez également définir la couleur de l’arrière-plan et l’arrière-plan vidéo n’est disponible que pour les utilisateurs professionnels.
  • Maintenant, faites glisser et déposez un élément de code intégré et ajoutez le code HTML comme indiqué dans la section ci-dessus.
  • Publiez votre site et voyez le camembert animé avec l’arrière-plan de l’image de parallaxe.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails