TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

Widget de temporizador de cuenta regresiva gratuito para el sitio Weebly

0

El widget de temporizador de cuenta regresiva le permite mostrar un temporizador útil para el lanzamiento del producto, el lanzamiento de un evento, etc. El código del widget se puede incrustar dentro del elemento " Código incrustado ", por lo que se puede agregar en cualquier lugar de la página junto con otro contenido. desea agregarlo en una página separada para el sitio en construcción sin menús de navegación y pie de página, luego cree un nuevo diseño de página y agregue el código del widget. En este artículo, nos centraremos en agregar el widget de temporizador de cuenta regresiva gratuito para el sitio Weebly dentro del contenido de una página.

El widget del temporizador de cuenta regresiva se verá a continuación y puede modificar los colores según lo necesite para adaptarse al diseño de su sitio.

Widget de temporizador de cuenta regresiva gratuito para el sitio Weebly

Descargue los archivos de secuencia de comandos para crear este widget.

Paso 1: descargue y agregue los scripts

El widget se basa en los scripts init.js / countdown.js y se modifica para adaptarse a un sitio de Weebly con CSS adicional. Descargue los archivos de secuencia de comandos y cárguelos en la sección "Tema> Editar HTML / CSS > Activos" de su sitio Weebly. Luego, vincule los archivos de secuencia de comandos en la sección " Código de pie de página " de su página como se muestra a continuación:

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

También puede utilizar las rutas de archivo absolutas prefijando el nombre de su sitio Weebly a las URL anteriores.

Paso 2: agregar CSS

Agregue el CSS a continuación en la sección "Código de encabezado" de su página de 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>

Paso 3: HTML para el temporizador de cuenta regresiva

Agregue el siguiente código HTML dentro de un elemento "Código incrustado" y alinee la posición al centro. No olvide reemplazar el título y la descripción con los suyos.

<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>

Paso 4: configuración de la fecha objetivo

La fecha objetivo para el temporizador se establece dentro del archivo de secuencia de comandos "init.js" como "31 de diciembre de 2016" para fines de demostración. Puede modificar la fecha según sus necesidades, guardar los cambios y publicar el sitio para ver el temporizador de cuenta regresiva en acción.

Widget de temporizador de cuenta regresiva gratuito para el sitio Weebly

Fecha objetivo para el temporizador de cuenta regresiva

Widget de temporizador de cuenta regresiva de paralaje de ancho completo

Agregar el widget anterior usando el elemento de código incrustado hará que parezca sencillo. Puede hacer un hermoso temporizador de cuenta regresiva de paralaje usando el elemento de sección como se muestra a continuación:

Widget de temporizador de cuenta regresiva gratuito para el sitio Weebly

Widget de temporizador de cuenta regresiva con fondo de imagen Parallax

Siga las instrucciones a continuación para crear un gráfico circular con un fondo de imagen de paralaje.

  • Arrastre y suelte un elemento de sección. Haga clic en el elemento de la sección en el área de contenido y luego haga clic en la opción "Editar fondo".
  • Elija la imagen como fondo y configure el efecto de desplazamiento como paralaje. También puede establecer el color de fondo y el fondo del video solo está disponible para usuarios profesionales.
  • Ahora arrastre y suelte un elemento de código de inserción y agregue el código HTML como se proporciona en la sección anterior.
  • Publique su sitio y vea el gráfico circular animado con fondo de imagen de paralaje.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More