Pubblicato il 07/05/13 - aggiornato il  | 28 commenti :

Come spostare la Data sotto il Titolo del post su Blogger.

Come spostare la data dell'articolo sotto il titolo del post nei modelli di Blogger usando il nuovo Editor HTML.
Nell'articolo su Blogger Buzz di introduzione del nuovo Editor HTML di Blogger si fa esplicito riferimento alla possibile personalizzazione di spostare la data dell'articolo sotto il titolo del post come una modifica resa più semplice da questo nuovo Editor. La data sotto il titolo dell'articolo è una prerogativa dei template a Visualizzazione Dinamica che in questo modo può essere adottata anche nei modelli normali. Mi ero riproposto di pubblicare un tutorial in merito ma poi me ne ero sempre dimenticato fino a 15 minuti fa quando ho letto un commento proprio su questo tema.

Come sempre prima di iniziare qualsiasi modifica occorre salvare una copia del template. Vi consiglio anche di non cancellare i file dei template salvati ma di rinominarli inserendo anche la data e di conservarli all'interno di una cartella di backup visto che potrebbero tornare utili in futuro.
Si va quindi su Modello > Modifica HTML > Vai al widget > Blog1

vai-al-widget-blogger

Occorre quindi cliccare sulla freccetta nera posta a sinistra del widget per visualizzarne tutto il codice

espandere-codice-widget

I numeri delle righe ovviamente non corrisponderanno a quelli dello screenshot perché ogni modello ha comunque una sua struttura. Visualizzerete tutta una serie di righe di codice con la relativa freccetta

elementi-codice-post-blog

Quello che ci interessa solitamente è il primo ed è quello della riga

<b:includable id=’main’ var=’top’>...</b:includable> 

Anche in questo caso si clicca sulla freccetta posta a sinistra. Adesso cercate il blocco di codice della data che sarà molto simile se non identico a questo 

<b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>

Tale codice dovrà essere selezionato, copiato in un file di testo quindi cancellato

codice-data-blogger

Scorrendo il codice in basso dovreste trovare le due righe
<div class=’post-header-line-1’/>
</div>


Il codice copiato e eliminato dalla parte superiore va incollato subito sotto queste righe

codice-incollato-template-blogger

Adesso si va su Anteprima modello per verificare la correttezza della modifica

anteprima-modello

Volendo si può provare a incollare il codice della data in un qualsiasi altro punto del template in cui sia sintatticamente possibile inserirlo. Questo hack è stato direttamente ricavato dal già citato articolo di Blogger Buzz che si può sempre consultare nel caso ci fossero dei dubbi.




28 commenti :

  1. ma dove hai imparato tutta questa roba :Q_

    RispondiElimina
  2. ti ringrazio per il post, ma ho alcuni problemi con il codice, adesso la data è stata spostata sotto il titolo ma c'è troppo spazio e finisce sotto il testo del post...

    RispondiElimina
    Risposte
    1. praticamente, la modifica precedente, diminuire lo spazio tra data e titolo, interferisce, con questa....

      Elimina
    2. @# Prova a incollare il codice subito sopra le due righe invece che sotto. Se vuoi fare un lavoro di fino sul template deve però provvedere da solo/a usando Firebug
      http://www.ideepercomputeredinternet.com/2011/05/firebug-e-una-estensione-di-firefox-per.html
      o Firebug Lite
      http://www.ideepercomputeredinternet.com/2012/07/firebug-chrome-blogger-css-html.html

      Elimina
  3. ciao , io vorrei inserire la data sopra ai miei post.
    Allora , ho modificato il templete del mio blog da quelli standard a d uno che ho scaricato da internet.

    Però non mi fa più mettere le date ,cioè escono solo i titoli dei poat ma non la data .
    Cosa posso fare?

    RispondiElimina
    Risposte
    1. @# Scaricare template da internet crea più problemi di quelli che risolve. Se il template lo hai scaricato da un sito di lingua inglese prova a optare per la data inserita nello stile anglosassone vale a dire Maggio 23 2013

      Elimina
    2. nulla , ho provato ma niente. Nei post esce soloil titolo, l'ora e i tag , eppure ho selezionato molti altre caratteristiche da inserire

      Elimina
    3. @# Può darsi che il template non preveda la visualizzazione della data o che da quando è stato creato sia cambiato il codice di Blogger e quindi non sia più possibile visualizzare la data. Ripeto. Molto meglio partire da un modello ufficiale di Blogger per poi aggiungere tutte le personalizzazioni che si crede.

      Elimina
  4. Ciao e possibile inserire la data ai post in home page, il mio template non lo prevede

    che codice devo inserie?

    il mio sito è visualartmagazine.com

    Grazie infinite!!

    Marco

    RispondiElimina
    Risposte
    1. @# Presumo che tu abbia scaricato il template da internet perché la data è presente in tutti quelli ufficiali. In questi casi la persona più indicata a risolvere, che conosce il codice perché lo ha scritto lui, è il suo autore. Prova a pubblicare un commento come questo sul suo sito e vedi se ti risponde (le possibilità però sono poche...)

      Elimina
    2. La vedo dura anche perchè è un sito straniero, a me piace anche così, solo mi hanno consigliato di mettere la data in home page, tu che dici è fondamentale?

      Elimina
    3. @# Se il problema non è mettere la data nei post ma solo in homepage puoi risolvere in questo modo
      http://www.ideepercomputeredinternet.com/2011/05/inserire-la-data-del-giorno-nella-parte.html

      Elimina
    4. Grazie Ermesto ma non funsiona forse ha dei parametri particolari questo template, comunque la tua spiegazione semplice e chiara

      Elimina
  5. Ciao Ernesto
    Il codice della data ho provato a metterlo sotto o sopra, come consigli in risposta al primo commento, ma non va; messo sopra sì... anzi per la precisione sopra il codice adsense messo sopra così da avere, nel mio caso, TITOLO POST poi sotto ETICHETTE E AUTORE POST poi sotto DATA poi sotto ADSENSE (dovrei metterci anche i pulsanti dei tre social, tra la data e adsense) (il sito è ilportafoglio -punto- info): dici che è ok o può dare problemi di qualche genere?
    Grazie e buon lavoro, sei sempre molto utile coi tuoi tutorial ;-)

    RispondiElimina
    Risposte
    1. ops... ovviamente intendevo "sotto o sopra div class=’post- header -line-1’/> .</ div"

      Elimina
    2. Esteticamente mi sembra OK. Forse ti riferisci al banner pubblicitario e per quanto ne so non va contro nessun regolamento
      @#

      Elimina
  6. Ciao, grazie per il tuoi post sono preziosissimi per chi come me capisce davvero poco di codici html. Ho da poco riorganizzato la grafica del mio blog e gran fatica e il tuo aiuto sono quasi riuscita ad ottenere il risultato sperato. Mi sa però di aver combinato un guaio, ho spostato la data sotto il titolo e inserito una linea centrale. essendoci troppo spazio tra i due però ho provato a ridurlo. Il risultato è che funziona solo per il primo post, perchè? Puoi aiutarmi?Il mio blog si chia makeyourhome.

    RispondiElimina
  7. Ciao Ernesto. Utilissimo post. Ci ho provato e tutto fila liscio tranne un piccolo particolare. La data viene posizionata sotto il titolo del post ma a distanze diverse. Cioè nel primo post la data è subito sotto al titolo mentre nel secondo post la data è più distante. Ho giocato un poco con il codice su un blog di prova e sostituendo il "FirstPost" con "AllPost" la modifica viene applicata a tutti i post ma se vado a farlo nel mio blog questo "spagina tutto" si sposta perfino la sidebar. C'è qualche modifica al codice che posso apportare per fare in modo che la data si trovi sotto il titolo del post sempre alla stessa distanza???? Grazie mille!

    RispondiElimina
    Risposte
    1. Il diverso posizionamento può dipendere dal tipo di modello anche ufficiale di Blogger, da eventuali altri elementi che sono stati inseriti e da altre cose imponderabili. Non si può ricavare una regola generale. Quando ci si trova di fronte a situazioni come questa si possono usare i tool Stylebot
      http://www.ideepercomputeredinternet.com/2012/05/stylebot-e-un-addon-di-chrome-per.html
      Ispeziona elemento
      http://www.ideepercomputeredinternet.com/2013/05/selettori-css-chrome-firefox.html
      o Analizza elemento
      http://www.ideepercomputeredinternet.com/2014/12/analizza-elemento-firefox.html
      ma sono consigliabili solo se si ha una certa esperienza che mi pare tu abbia
      @#

      Elimina
  8. Ciao, ho seguito la procedura passo passo però il risultato finale per me è la sparizione della data e non lo spostamento. Ho provato più volte ma il risultato è lo stesso. Pensi dipenda da qualcosa in particolare?

    RispondiElimina
  9. Ci sono due possibilità. Il post è del 2013 e quindi il codice può essere cambiato. La seconda è che nel tuo template ci sia un codice diverso da quello che ho preso come esempio nel modello Semplice
    @#

    RispondiElimina
    Risposte
    1. Scusami se ti rispondo solo ora, non mi ero accorto della risposta. Io posseggo il tema "Etereo".

      Elimina
  10. Ciao , dovrei staccare il titolo dalla data e nome dell'autore , perché sono troppo vicini tra loro . Come posso fare?

    RispondiElimina
    Risposte
    1. Individua i tag del nome autore e della data che dovrebbero essere rispettivamente <data:authorLabel/> e <data:post.dateHeader/> compresi tra i segni di minore e maggiore. Tra questi tag inserisci &nbsp; oppure &#160; che sono le entità che rappresentano uno spazio. Se uno non bastasse, mettine due o anche di più
      @#

      Elimina
  11. Se invece il problema è di tipo verticale invece che orizzontale allora segui queste istruzioni
    https://www.ideepercomputeredinternet.com/2016/09/regolare-distanza-elementi-tag-html.html
    Devi individuare i due elementi per poterli distanziare o avvicinare verticalmente
    @#

    RispondiElimina
  12. Ernesto un'ultima cosa è possibile inserire il nome dell'autore prima della data (però voglio inserire diciamo un link cliccabile nel nome che porta ad una pagina dove voglio inserire le informazioni dell'autore

    RispondiElimina
    Risposte
    1. Puoi provare. Nel post sono indicate le due righe sotto cui inserire il codice. Sono le righe della data. Se lo vuoi vedere sopra puoi incollare il codice prima delle due righe e non dopo. Il link è automatico ed è al profilo di Blogger
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy