Ανοίγοντας έναν υπολογιστή με Windows, μπορείτε πάντα να γνωρίζετε την τρέχουσα ημερομηνία και ώρα που είναι ορατή κάτω δεξιά στη γραμμή εργασιών . Παρόμοιες λειτουργίες υπάρχουν και σε άλλα λειτουργικά συστήματα. Αυτό δεν σημαίνει ότι δεν μπορείτε να προσθέσετε ένα ημερολόγιο σε μια ιστοσελίδα για να εμφανίζει αυτόματα την ημέρα του μήνα και την ημέρα της εβδομάδας.
Σε αυτήν την ανάρτηση θα δούμε πώς να δημιουργήσετε έναν κώδικα ημερολογίου που μπορεί να επικολληθεί σε οποιαδήποτε ιστοσελίδα και επίσης στις πλατφόρμες Blogger και Wordpre
Το ημερολόγιο μπορεί επίσης να προσαρμοστεί σε χρώματα για να το προσαρμόσει σε αυτά του ιστότοπού μας, επιπλέον οι διαστάσεις του μπορούν να αλλάξουν και να εγκατασταθούν σε ένα widget μιας πλαϊνής γραμμής ή άλλου στοιχείου σελίδας.
Το javascript που καταγράφει την τρέχουσα ημερομηνία είναι πολύ απλό και φορτώνεται αμέσως. Για να ελέγξετε τη λειτουργία του κώδικα και να εφαρμόσετε αλλαγές σε αυτόν, μπορείτε να τον επικολλήσετε στον ιστότοπο Real Time Editor, ο οποίος θα τον εμφανίσει στο κάτω μέρος της σελίδας μετά την επικόλληση του κώδικα στο επάνω μέρος.
Ο κωδικός του ημερολογίου είναι ο εξής:
<style>
.pcalendar {
ύψος: 200px ;
θέση: σχετική;
περιθώριο: 0 αυτόματο;
πλάτος: 200 px ;}
.calendar { text-align: center ;}
.wcalendar {
height: 150px ;
margin-bottom: 24px ;
πλάτος: 190 px ;
}
#calendar {
background: # 18477d;
φόντο: linear-gradient(to bottom, #18477d 0%,#2277bd 50%,#1b6aad 51%,#60a9e3 100% );
font-family: ‘Hammersmith One’ , sans-serif;
text-shadow: 0 0 9px #fff;
περίγραμμα-αριστερά: 4px συμπαγές #ccc ;
περίγραμμα-δεξιά: 4px συμπαγές #ccc ;
περίγραμμα-κορυφή: 4px συμπαγές #cccc ;
ακτίνα περιγράμματος: 35 px 35 px 0 0 ;
χρώμα: # ddd !important;
κείμενο-διακόσμηση:κανένα !σημαντικό;
μέγεθος γραμματοσειράς: 30 px;
διάστιχο: 0 px;
βάρος γραμματοσειράς: έντονη;
Ύψος γραμμής: 35 px;
ύψος: 40 px ;
θέση: σχετική;
text-transform: πεζά;
}
#gcalendar {
border-radius: 0 0 35px 35px;
περίγραμμα: 0px στερεό #565656 ;
background:url( https://lh3.
χρώμα: # 0C74B6 ;
font-family: ‘Hammersmith One’, sans-serif;
μέγεθος γραμματοσειράς: 130 px ;
text-shadow: -5 px 0 #cdcdcd, 0 1px #000, 0px 0 #cdcdcd, 0 -1px #000, -1px 1px 2px #000;
ύψος: 150 px ;
Ύψος γραμμής: 120 px ;
}
</style>
<div class=”pcalendar”><div class=”calendar”><div class=”wcalendar”><div id=”ncalendar”></div><div id=”gcalendar”>< /div></div></div></div>
<link href=” http://fonts.
<script>
(function() {
var date = new Date(),
weekday = [“Κυριακή”, “Δευτέρα”, “Τρίτη”, “Τετάρτη”, “Πέμπτη”, “Παρασκευή”, “Σάββατο”];
document.getElementById(‘
document.getElementById(‘
</script>
.pcalendar {
ύψος: 200px ;
θέση: σχετική;
περιθώριο: 0 αυτόματο;
πλάτος: 200 px ;}
.calendar { text-align: center ;}
.wcalendar {
height: 150px ;
margin-bottom: 24px ;
πλάτος: 190 px ;
}
#calendar {
background: # 18477d;
φόντο: linear-gradient(to bottom, #18477d 0%,#2277bd 50%,#1b6aad 51%,#60a9e3 100% );
font-family: ‘Hammersmith One’ , sans-serif;
text-shadow: 0 0 9px #fff;
περίγραμμα-αριστερά: 4px συμπαγές #ccc ;
περίγραμμα-δεξιά: 4px συμπαγές #ccc ;
περίγραμμα-κορυφή: 4px συμπαγές #cccc ;
ακτίνα περιγράμματος: 35 px 35 px 0 0 ;
χρώμα: # ddd !important;
κείμενο-διακόσμηση:κανένα !σημαντικό;
μέγεθος γραμματοσειράς: 30 px;
διάστιχο: 0 px;
βάρος γραμματοσειράς: έντονη;
Ύψος γραμμής: 35 px;
ύψος: 40 px ;
θέση: σχετική;
text-transform: πεζά;
}
#gcalendar {
border-radius: 0 0 35px 35px;
περίγραμμα: 0px στερεό #565656 ;
background:url( https://lh3.
χρώμα: # 0C74B6 ;
font-family: ‘Hammersmith One’, sans-serif;
μέγεθος γραμματοσειράς: 130 px ;
text-shadow: -5 px 0 #cdcdcd, 0 1px #000, 0px 0 #cdcdcd, 0 -1px #000, -1px 1px 2px #000;
ύψος: 150 px ;
Ύψος γραμμής: 120 px ;
}
</style>
<div class=”pcalendar”><div class=”calendar”><div class=”wcalendar”><div id=”ncalendar”></div><div id=”gcalendar”>< /div></div></div></div>
<link href=” http://fonts.
<script>
(function() {
var date = new Date(),
weekday = [“Κυριακή”, “Δευτέρα”, “Τρίτη”, “Τετάρτη”, “Πέμπτη”, “Παρασκευή”, “Σάββατο”];
document.getElementById(‘
document.getElementById(‘
</script>
Για να το εγκαταστήσετε στο Blogger, μεταβείτε στο Layout -> Add a gadget -> Base -> HTML/Javascript και, στη συνέχεια, επικολλήστε το στις Ενότητες Site . Η γραμμή κώδικα που ελήφθη από τις γραμματοσειρές Google για την οικογένεια γραμματοσειρών Hammersmith One έχει επισημανθεί με κίτρινο χρώμα και μπορεί να αντικατασταθεί με άλλη ακολουθώντας τις οδηγίες στην ανάρτηση που συνδέεται παραπάνω. Για εγκατάσταση στο WordPress πηγαίνετε στο Widget -> Text , επικολλήστε τον κώδικα και τοποθετήστε τον στη διάταξη.
