Countdown
Un elegante conto alla rovescia, largamente personalizzabile, da utilizzare nei vostri forum!
Funzionalità
Lo script, molto leggero e funzionale, rappresenta l'ideale alternativa targata Forumfree di tutti i countdown presenti sul web, non sempre compatibili con il circuito. Il conto alla rovescia sarà personalizzabile sia nella data che nell'estetica, potrete, ad esempio, ingrandire i numeri e posizionarli come meglio volete!
Installazione Script
Compatibilità: Nuovo ,Vecchio Layout e MobileL'installazione dello script è possibile attraverso il
pannello EasyScript, tramite
questo link. Per aggiungere lo script al proprio forum bisogna cliccare sul pulsante
Installa presente sotto l'anteprima dello script: "Countdown V3.0"
Configurazione
Codice da inserire in
Codice HTML/Post » Dove volete che appaia:
HTML
<div class="countdown now" data-countdown="21:00 21/01/2019" data-up="0">
<div class="countdown_layout" style="display:none">
<div class="block_now"><span class="days">0</span><span class="type">Giorni</span></div>
<div class="block_now"><span class="hours">0</span><span class="type">Ore</span></div>
<div class="block_now"><span class="minutes">0</span><span class="type">Minuti</span></div>
<div class="block_now"><span class="seconds">0</span><span class="type">Secondi</span></div>
</div>
<div class="nostart" style="display:none"><img src="http://dumpshare.net/images/2617697xmas.jpg"></div>
</div>
Codice da inserire in
Colori e stili:CODICE
.block {display: inline-block; font: bold 30pt/180% 'Trebuchet MS', Sans-serif; letter-spacing: -4px; padding: 0 13px 0 9px; color: #FFF; background: url('http://digilander.libero.it/elgringoforumfree/FFMagazine/countdown_bg.png') no-repeat top center; min-width: 80px}
.block span {display: block; margin-top: -15px; font-size: 13pt; color: #1B1B1B; letter-spacing: 0}
Analizziamo il codice:
CODICE
<div class="countdown now" data-countdown="21:00 21/01/2019" data-up="0">
Nella precedente parte di codice, troviamo:- data-countdown
Dove andremo ad inserire la data in formato hh:mm gg/mm/aaaa. - data-up
Se impostato su "1" il countdown avrà funzione inversa (countUP).
- Qualsiasi template che verrà inserito nel div
CODICE
<div class="countdown_layout" style="display:none"></div>
CODICE
<div class="nostart" style="display:none"></div>
Nell'esempio, come potete vedere, nella prima parte di codice(il div countdown_layout) è presente il template del countdown (riquadri + numeri + testo), mentre nella seconda (il div nostart) è inserita l'immagine che comparirà una volta terminato il conto alla rovescia
Il template proposto in precedenza può essere modificato a proprio piacimento. Abbiate cura di NON CANCELLARE i parametri necessari, altrimenti il countdown non funzionerà.
Updates
- Versione 1.0: 16/10/2013
- Versione 2.0: 13/02/2014
- Semplificata l'installazione e personalizzazione
- Aggiunta la possibilità di mostrare un testo, immagine, video,... a fine conteggio
- UPDATE Versione 3.0: 23/01/2019 (attuale)
- Semplificata l'installazione e la personalizzazione
- Aggiunta la possibilità di inserire il countdown nei post
- Aggiunta la possibilità di trasformare il countdown in countup
.
