TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Widget per il conto alla rovescia gratuito per il sito Weebly

139

Il widget del timer per il conto alla rovescia ti consente di mostrare un utile timer ai fini del lancio del prodotto, del lancio dell’evento, ecc. Il codice del widget può essere incorporato all’interno dell’elemento " Codice di incorporamento ", quindi può essere aggiunto in qualsiasi punto della pagina insieme ad altri contenuti. desidera aggiungerlo su una pagina separata per il sito in costruzione senza menu di navigazione e piè di pagina, quindi creare un nuovo layout di pagina e aggiungere il codice del widget.In questo articolo ci concentreremo sull’aggiunta del widget del conto alla rovescia gratuito per il sito Weebly all’interno di un contenuto di pagina.

Il widget del timer per il conto alla rovescia apparirà come di seguito e puoi modificare i colori in base alle tue esigenze per adattarli al layout del tuo sito.

Widget per il conto alla rovescia gratuito per il sito Weebly

Scarica i file di script per creare questo widget.

Passaggio 1 – Scarica e aggiungi gli script

Il widget è basato sugli script init.js/countdown.js e modificato per adattarsi a un sito Weebly con CSS aggiuntivi. Scarica i file di script e caricali nella sezione "Tema > Modifica HTML / CSS > Risorse" del tuo sito Weebly. Quindi collega i file di script nella sezione " Codice piè di pagina " della tua pagina come di seguito:

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

Puoi anche utilizzare i percorsi di file assoluti anteponendo il nome del tuo sito Weebly agli URL sopra.

Passaggio 2 – Aggiunta di CSS

Aggiungi il seguente CSS nella sezione "Codice intestazione" della tua pagina 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>

Passaggio 3 – HTML per il timer per il conto alla rovescia

Aggiungi il codice HTML sottostante all’interno di un elemento "Codice da incorporare" e allinea la posizione al centro. Non dimenticare di sostituire l’intestazione e la descrizione con le tue.

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

Passaggio 4: impostazione della data di destinazione

La data di destinazione per il timer è impostata all’interno del file di script "init.js" come "31 dicembre 2016" a scopo dimostrativo. Puoi modificare la data secondo le tue necessità, salvare le modifiche e pubblicare il sito per vedere il conto alla rovescia in azione.

Widget per il conto alla rovescia gratuito per il sito Weebly

Data di destinazione per il conto alla rovescia

Widget timer conto alla rovescia parallasse a larghezza intera

L’aggiunta del widget sopra utilizzando l’elemento del codice di incorporamento lo renderà semplice. Puoi creare un bellissimo conto alla rovescia di parallasse usando l’ elemento della sezione come di seguito:

Widget per il conto alla rovescia gratuito per il sito Weebly

Widget timer conto alla rovescia con sfondo immagine parallasse

Segui le istruzioni seguenti per creare un grafico a torta con lo sfondo dell’immagine parallasse.

  • Trascina e rilascia un elemento della sezione. Fare clic sull’elemento della sezione nell’area del contenuto e quindi fare clic sull’opzione "Modifica sfondo".
  • Scegli l’immagine come sfondo e imposta l’effetto di scorrimento come parallasse. Puoi anche impostare il colore di sfondo e lo sfondo del video è disponibile solo per gli utenti professionisti.
  • Ora trascina e rilascia un elemento del codice di incorporamento e aggiungi il codice HTML come fornito nella sezione precedente.
  • Pubblica il tuo sito e guarda il grafico a torta animato con lo sfondo dell’immagine parallasse.

Fonte di registrazione: www.webnots.com
Lascia una risposta

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