Come inserire nel sito un count down in stile groupon (ma più figo)
Tutto si basa su questo articolo http://www.danieletabacco.com/77/articolo/realizzare-countdown-in-stile-groupon-con-jquery.html (http://www.danieletabacco.com/77/articolo/realizzare-countdown-in-stile-groupon-con-jquery.html) che si basa su un articolo simile in inglese (http://keith-wood.name/countdown.html (http://keith-wood.name/countdown.html)) scritto da uno degli sviluppatori della libreria di funzioni JQuery.
Innanzitutto dire che tale libreria è presente in WS9 (grazie Lemonsong)
Se usi WS9 e/o WS10 non hai bisogno di caricare la libreria jQuery.
Bisogna quindi scaricarsi i seguenti tre files:
http://keith-wood.name/css/jquery.countdown.css (http://keith-wood.name/css/jquery.countdown.css)
http://keith-wood.name/js/jquery.countdown.js (http://keith-wood.name/js/jquery.countdown.js)
http://keith-wood.name/js/jquery.countdown-it.js (http://keith-wood.name/js/jquery.countdown-it.js)
Nelle proprietà pagina (sezione esperto) basta mettere queste righe richiamanti i Css e i Javascript
Only registered users can see contents. Please click here to Register or Login.
Al posto di anno mese e giorno mettete la data finale del vostro coundown, per agosto (8° mese) scrivete 8 -1, per gennaio 1 -1 (il meno uno ci deve essere o levate uno al numero del mese)
Se avete un WS precedente alla versione 8 aggiungete
Only registered users can see contents. Please click here to Register or Login.In coda alle altre chiamate di Javascript.
Adesso andiamo alla pagina
Tutto il codice che dovete mettere, in un oggetto widget, è:
Only registered users can see contents. Please click here to Register or Login.
Nella parte esperto del widget invece allegate al codice i tre files scaricati
Se volede modificare lo stile come l'esempio
Ho provato a fare un esempio al volo per il 01/01/2014 qui: http://lemonsong.altervista.org/test_jq_countdown/ (http://lemonsong.altervista.org/test_jq_countdown/)
Mettendo uno sfondo (http://notmadebyslaves.com/images/timer-piece.png)come questo
aprite il file .css inserendo in .countdown_section { questa linea:
}
.countdown_section {
display: block;
float: left;
font-size: 75%;
text-align: center;
background-image: url('timer-piece.png');
height: 120px;
color: blue;
e caricando dalla sezione esperto l'immagine da voi preferita (in questo caso timer-piece.png)
Per settare la scadenza del countdown come già scritto sopra si agisce nella sezione esperto della proprietà pagina.
Fine tutorial
(e così tutte le pagine di chi frequenta questo forum avranno questo countdown) ;)