Αντίστροφη μέτρηση για τα Χριστούγεννα στο blog μας

Σήμερα θα δούμε ένα ωραίο javascript που είναι ιδιαίτερα χρήσιμο αυτές τις μέρες που πλησιάζουν τα Χριστούγεννα. Δίνει μια άλλη αίσθηση στο blog μας και θυμίζει τις γιορτινές αυτές μέρες.

Το συγκεκριμένο script είναι σαν αυτό που βλέπετε στην διπλανή εικόνα δείχνει δηλαδή, τις μέρες, τις ώρες τα λεπτά και τα δευτερόλεπτα που απομένουν μέχρι τα Χριστούγεννα.

Πως να βάλετε την αντίστροφη μέτρηση Χριστουγέννων στο blogger (Μπορείτε να δείτε και το βίντεο στο τέλος του άρθρου που κάνω αυτή την διαδικασία στην πράξη σε 3 λεπτά):

1. Σύνδεση στο blogger, επιλογή του blog μας και από το μενού πατάμε "Διάταξη" και στο σημείο που θέλουμε να τοποθετηθεί ο μετρητής πατάμε "Προσθήκη gadget", στο παράθυρο που ανοίγει επιλέγουμε "HTML/JavaScript" και βάζουμε μέσα στο παράθυρο τον πιο κάτω κώδικα:


<div class="sm_counter_cont"> <div class="sm_santa"> </div> <h1> Απομένουν μέχρι τα <center> Χριστούγεννα:</center> </h1> <div class="sm_counter_column"> <div class="sm_column_top" id="xmasdays"> </div> <div class="sm_column_bottom"> Μέρες</div> </div> <div class="sm_counter_column"> <div class="sm_column_top" id="xmashours"> </div> <div class="sm_column_bottom"> Ώρες</div> </div> <div class="sm_counter_column"> <div class="sm_column_top" id="xmasminutes"> </div> <div class="sm_column_bottom"> Λεπτά</div> </div> <div class="sm_counter_column"> <div class="sm_column_top" id="xmasseconds"> </div> <div class="sm_column_bottom"> Δεύτερα</div> </div> </div> <script src='https://googledrive.com/host/0B3fIJ7nZFI9iaWxiX2hCMTI5S0U/' type='text/javascript'/></script>
2. Αποθηκεύουμε και αν κάνουμε μια προεπισκόπηση θα δούμε ότι εμφανίζονται κάπως σαντανομένα. Για να το φτιάξουμε αυτό πρέπει να προσθέσουμε και τα css του script.
3. Πατάμε στο πρότυπο και ακολούθως "Επεξεργασία HTML", βάζουμε τον κέρσορα μέσα στον κώδικα του προτύπου και πατάμε Ctrl + F στο παραθυράκι αναζήτησης που εμφανίζει εισάγουμε το keyword </head> όταν το βρούμε βάζουμε ακριβώς από πάνω του την πιο κάτω γραμμή κώδικα:
<link href='https://googledrive.com/host/0B3fIJ7nZFI9iRFlkcEZnR04tR00/' rel='stylesheet' type='text/css'/>
Δείτε και τον οδηγό βίντεο: