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

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

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

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

<img style='margin:0 2px;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1B4M-10EBx789BuqHan4qvsoO8g3344Xt5S-AlVaPWMYSokBjA2N8f6xcNHQuuBbw0MPSsyxaP8a-shZes_7DYoVlfOqdUJ7CENpEjZazZ1xkBZisEhruTfIhUbFzp2iIuGR8N81TWzw/s20/1391962367_speech_bubble.png'/>

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