Come creare in Blogger un formato data in stile calendario Wordpress.

Capita spesso di vedere nei template Wordpress, stili belli e particolari, ricchissimi di funzionalità e dalla grafica accattivante.

E 'abbastanza comune vedere lo stile del formato data, accanto ai post nei Temi WordPress, in stile calendario, ma per la piattaforma Blogger non è cosi facile per aggiungerlo.

Ma chi ha detto che è impossibile?

In questo tutorial vi mostrerò come crearlo per la piattaforma Blogger.

Credetemi, è più facile farlo che dirlo.

Per prima cosa facciamo il backup del nostro template, cosi in caso di errori possiamo ripristinarlo.

Vediamo come...

Entra nelle impostazioni di Blogger, andando in:

Impostazioni > Lingua e formattazione - Formato intestazione data e cambia il formato della data in giorno/mese/anno, ad esempio: 06 Novembre 2012 - come si può vedere nel mio esempio qui sotto::

e alla fine salva tutto.

Ora vai su:

Modello  ›  Modifica HTML, attiva > "Espandi i modelli widget" e cerca  (CTRL + F) la seguente riga:

<h2 class='date-header'> <span> <data:post.dateHeader/> </ span> </ h2>

e la sostituite con:

<div id='Date'>  <script> changeDate ('<data:post.dateHeader/>'); </ script>  </ div>  <b:else/>  <div id = ' Data '>  changeDate <script> (''); </ script>  </ div>

Ora aggiungere il codice riportato di seguito appena sopra </ head> (CTRL + F per trovarlo)

<script type='text/javascript'>
    / / <[CDATA [!
    var DateCalendar;
    changeDate funzione (d) {
    if (d == "") {
    d = DateCalendar;
    }
    var da = d.split ('') ;
    giorno = "<strong class='date_day'>" + da [0] + "</strong>";
    . month = "<strong class='date_month'>" + da [1] fetta (0,3) + "</strong>",
    year = "<strong class='date_year'>" + da [2] + "</strong>";
    document.write (mese + giorno + anno);
    DateCalendar = d;
    }
    / /]]>
    </script>
    <b:if cond='data:blog.pageType != "static_page"'>
    <style type='text/css'>
    / * Calendario Data
    ------- ---------------------------------------- * /
    # Data {
    background: url trasparente ( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivudyx86i9ScRjCcQpwybwqtqdFEJouWsPrOBUVm3cpwWz1yb_GqNcyzM-SmVhwli095wtA3Oh6nNbyFWXpyR3L7zZZeuzQmfro0Vk9hs3EH5Dbl8YCDWyIKXzc_Dv0oV_O8fKF58rMg5Y/s1600/calendar07.png ) no-repeat;
    display: block;
    width: 60px;
    height: 60px;
    float: left;
    margin: 15px 2px 0 -108 px;
    padding: 0 0 8px 0px;
    bordo: 0;
    text-transform: uppercase;
    }
    . date_month {
    display: block;
    font-size: 15px;
    font-weight: bold;
    margin-top:-1px;
    text-align: center;
    color: # ffffff;  colore / * del mese * /
    }
    . date_day {
    display: block;
    font-size: 28px;
    font-weight: bold;
    margin-top:-8px;
    text-align: center;
    color: # 282828;  / colore Giorno * A * /
    }
    date_year {.
    display: block;
    font-size: 10px;
    margin-top:-8px;
    text-align: center;
    color: # 282828;  colore / Anno * A * /
    }
    </style>
    </b: if>

Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog: