Pubblicato il 09/02/14e aggiornato il

Come mostrare link e numero di commenti sotto il titolo del post in Blogger.

Come visualizzare il link con il numero dei commenti sotto il titolo dell'articolo in un blog di Blogger.
La piattaforma Blogger ha una funzionalità non troppo conosciuta per spostare gli elementi del post in posizioni diverse. Per configurare cosa vedere nei singoli articoli e in che ordine visualizzarli bisogna configurare il post andando su Layout > Post sul blog > Modifica, mettendo la spunta agli elementi che si vogliono mostrare e trascinandoli con il mouse nella posizione desiderata. Dopo ciascuna modifica occorre andare su Salva per rendere effettive le nuove impostazioni.

Questa funzionalità è perfettamente in grado di ordinare gli elementi quando vengano posizionati sotto il Corpo del post ma non risponde alle aspettative se si volesse spostare uno o più elementi al di sopra dell'articolo. Questo accade non solo per i modelli molto personalizzati ma anche per i template ufficiali.
A seguito di una richiesta postatami nella pagina fan vado a illustrare come visualizzare il link con il numero dei commenti sotto il titolo del post invece che nel footer come di default


link-commenti-titolo-post

Cliccando sul link del numero dei commenti si andrà esattamente in quella zona del post. Dopo aver salvato il template per un eventuale ripristino si va su Modello > Modifica HTML > Vai al widget > Blog1 e si cerca la sezione che inizia con

<b:includable id='post' var='post'>


Si clicca sulla freccetta nera a destra per visualizzare tutto il codice e si seleziona quello sotto alla riga precedente fino alla riga <div class='post-header'> escluse. Tale codice sarà simile a questo 

<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>   
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

che dovrà essere cancellato e sostituito con il seguente

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a><br/>
              <span class='post-comment-link spk-title-comment'>
                 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                      <b:include data='post' name='comment_count_picker'/>
                  </b:if>
              </span>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a><br/> 
              <span class='post-comment-link spk-title-comment'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                      <b:include data='post' name='comment_count_picker'/>
                  </b:if>
              </span>
          <b:else/>
            <data:post.title/><br/>
              <span class='post-comment-link spk-title-comment'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                      <b:include data='post' name='comment_count_picker'/>
                  </b:if>
              </span>
          </b:if>
        <b:else/>
          <data:post.title/><br/>
              <span class='post-comment-link spk-title-comment'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                      <b:include data='post' name='comment_count_picker'/>
                  </b:if>
              </span>
        </b:if>
      </b:if>
      </h3>
    </b:if>

Si salva il modello.

CONFIGURAZIONE AGGIUNTIVA


Quando viene aperta la homepage, una pagina di archivio o una pagina di etichetta sotto al titolo del post si visualizzerà il link con il numero dei commenti. Tale link sarà anche visibile nel footer; se infatti si togliesse la spunta andando su Layout > Post sul blog > Modifica questo sparirebbe anche da sotto il titolo. Per ovviare a questo inconveniente bisogna creare un altro selettore.

Si torna quindi su Modello > Modifica HTML > Vai al widget > Blog1 e si cerca la stessa sezione 

<b:includable id='post' var='post'>

Scorrendo il codice o digitando Ctrl+F si cerca la riga

<span class='post-comment-link'>

che si modifica in questo modo

<span class='post-comment-link' id='home-comment'>

Si cerca poi la riga ]]></b:skin> e, subito sopra, si incolla quest'altra riga


#home-comment {display:none;}

Finalmente si salva il modello. In questo modo sarà visibile solo in link sotto il titolo ma non lo sarà più quello nel footer del post

link-commenti-blogger

Nel secondo codice sono presenti quattro tag <br/> che rappresentano un salto di riga e che quindi inseriscono il link dei commenti sotto il titolo del post. Se si tolgono tutti e quattro si visualizzerà il link accanto al titolo. Nel caso volessimo inserire un carattere di separazione potremo sostituire <br/> per esempio con <span> | </span> . In questo caso il carattere divisorio è rappresentato da una linea verticale. Potremmo addirittura inserire una icona tra titolo e commenti.

Per avere questo risultato

link-commenti-icona

basterà sostituire a tutti i  quattro tag <br/> questo codice

<img style='margin:0 2px;' src='https://lh5.googleusercontent.com/-NmVc75N0kWQ/UvdVuf-o8EI/AAAAAAAAl00/rwAvQO8w4cs/s20/1391962367_speech_bubble.png'/>

dove i margini e l'icona possono essere ovviamente modificati.




6 commenti :

  1. Ciao Ernesto e buona domenica. Questa personalizzazione mi interessa molto, però nel mio caso ho centrato il titolo dei post ed inserito le icone prima e dopo il titolo. Se voglio fare una personalizzazione simile c'è la possibilità di centrare anche il link dei commenti sotto il titolo? Grazie mille e ancora un buon fine settimana.

    Lucia Alocchi

    RispondiElimina
    Risposte
    1. Prova a inserire questo codice
      .post-comment-link {text-align:center;}
      subito sopra alla riga che determina la fine dei CSS, che ha i tag /b:skin e che è stata incollata anche in questo post (non posso inserirla nei commenti perché dovrei fare una conversione)
      Dovrebbe funzionare.
      @#

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
    3. Non è stato necessario perché dopo aver aggiunto il codice, il link dei commenti mi è andato subito al centro :)
      Scusami ancora,ma mi è sorto un problema. Nella configurazione aggiuntiva quando vado ad aggiungere id='home-comment' mi esce un errore di analisi di questo tipo:

      Element type "span" must be followed by either attribute specifications, ">" or "/>".

      Dove potrei aver sbagliato?
      Grazie ancora.
      Lucia Alocchi

      Elimina
    4. Non saprei. La riga di codice che ho messo nel post mi sembra corretta e quando l'ho sostituita nel mio blog di test non ho avuto problemi
      @#

      Elimina
    5. Grazie comunque. :)
      Lucia Alocchi

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.