Come creare un calendario da inserire nel blog.

Come creare un calendario per Blogger con i font personalizzati di Google.

Ricordo che attraverso i Google Fonts è possibile personalizzare i caratteri del blog. Utilizzando la stessa tecnica possiamo anche usare uno di questi 700 e passa caratteri per realizzare un widget. Vediamo come sia possibile mostrare un calendario in una sidebar del nostro sito che utilizzi uno di questi caratteri speciali. Il calendario in questione l'ho preso da una idea di Redeando che ne ha realizzati altri con lo stesso stile. Il font utilizzato è Hammersmith One. 

Come detto si può installare nel layout, all'interno di un post o in una pagina statica. Nel secondo e terzo caso si apre l'Editor di Blogger in Modalità HTML mentre nel primo caso si va su Layout > Aggiungi un gadget > 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>

Dopo aver salvato si visualizzerà questo calendario

Ho evidenziato di giallo la riga di codice presa da Google Fonts con i caratteri Hammersmith One. Per usare un'altra famiglia di font, si deve scegliere il carattere e cliccare su Quick Use sulla destra

  

Si aprirà una pagina in cui ottenere il codice da sostituire per cambiare font

Ovviamente va anche modificato il nome del carattere in font-family. Se si ha la necessità di centrare il widget si può aggiungere all'inizio la riga <div align="center"> e la riga </div> alla fine.