Come mostrare un calendario nella sidebar di Blogger.

Come mostrare un calendario nella sidebar o nel footer di Blogger o Wordpress con giorno del mese e della settimana.

Abbiamo già visto come creare un Calendario Pubblico con Google Calendar e come incorporararlo nel blog. Si tratta di un calendario che permette all'amministratore del blog di mostrare gli eventi collegati al sito di un particolare lasso di tempo solitamente mensile.

Si può anche sostituire la data di pubblicazione di un post con una icona che mostra la data in una immagine invece che in un testo. In questo articolo illustrerò invece come creare un widget da inserire per esempio nella sidebar che mostra il giorno del mese e quello della settimana.

In tale gadget è stato utilizzato i codici del gradiente per creare un effetto sfumatura.

Un utente di Blogger deve andare su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<style>
.pcalendar {
height: 200px;
position: relative;
margin: 0 auto;
width: 200px;}
.calendario { text-align: center;}
.wcalendar {
    height: 150px;
    margin-bottom: 24px;
    width: 190px;
}
#ncalendar {
background: #18477d;
background: -moz-linear-gradient(top,  #18477d 0%, #2277bd 50%, #1b6aad 51%, #60a9e3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#18477d), color-stop(50%,#2277bd), color-stop(51%,#1b6aad), color-stop(100%,#60a9e3));
background: -webkit-linear-gradient(top,  #18477d 0%,#2277bd 50%,#1b6aad 51%,#60a9e3 100%);
background: -o-linear-gradient(top,  #18477d 0%,#2277bd 50%,#1b6aad 51%,#60a9e3 100%);
background: -ms-linear-gradient(top,  #18477d 0%,#2277bd 50%,#1b6aad 51%,#60a9e3 100%);
background: linear-gradient(to bottom,  #18477d 0%,#2277bd 50%,#1b6aad 51%,#60a9e3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18477d', endColorstr='#60a9e3',GradientType=0 );
font-family: 'Hammersmith One', sans-serif;
text-shadow: 0 0 9px #ffffff;border-left:4px solid #ccc;border-right:4px solid #ccc;border-top:4px solid #ccc;
    border-radius: 35px 35px 0 0;
    color: #ddd !important;text-decoration:none !important;
font-size: 30px;letter-spacing:0px;font-weight:bold;
    line-height: 35px;height: 40px;
    position: relative;
    text-transform: lowercase;
}
#gcalendar {
border-radius: 0 0 35px 35px;border:0px solid #565656;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMEpVFDYqpznRIfFMou-97gP13NJXtlTOHeI20XRz_nRGzEA_OzIql7O8qyCjG7d2a5xmZ9Z7WIpZIQGw4Xq3bs-ZimKmT_HHA4hlXaoIYqJ2B0f62RXoc6D-ii9SWP40RmRW_iPuajc/s200/fondo%2520calendario.png) no-repeat center bottom;
    color: #0C74B6;font-family: 'Hammersmith One', sans-serif;
    font-size: 130px;text-shadow: -5px 0 #cdcdcd, 0 1px #000000, 0px 0 #cdcdcd, 0 -1px #000000, -1px 1px 2px #000000;
    height:150px;
    line-height: 120px;}
</style>
<div class="pcalendar"><div class="calendario"><div class="wcalendar"><div id="ncalendar"></div><div id="gcalendar"></div></div></div></div>
<link href="http://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet" type="text/css" />
<script>
    (function() {
    var date = new Date(),
    weekday = ["domenica", "lunedì", "martedì", "mercoledì", "giovedì", "venerdì", "sabato"];
    document.getElementById('ncalendar').innerHTML = weekday[date.getDay()];
    document.getElementById('gcalendar').innerHTML = date.getDate();}) ();
</script>

I codici dei colori possono essere modificati secondo i propri gusti. L'icona del calendario ha come base l'immagine di sfondo con l'URL colorato di viola. Le dimensioni invece sono calcolate in funzione della immagine e quindi è opportuno lasciarle invariate se non la si modifica.

È stato scelta la famiglia di caratteri  Hammersmith One presa da Google Fonts. Si può sostituire con un'altra cambiando la riga evidenziata di giallo e il nome della famiglia di font. Si può installare il calendario anche nei siti Wordpress incollando il codice su Widget > Aggiungi il widget > Testo.