Nascondere la sezione commenti in blogger

Se i post del nostro blog blogspot ricevono molti commenti sicuramente è una cosa positiva ma se sono troppi finirà per rallentare il caricaricamento della pagina e si sà che più lento è il caricamento di una pagina e più velocemente un utente decide di andarsene da tale blog. Per risolvere questo problema una soluzione è nascondere tutta la sezione commenti e inserirci un pulsante che permetta di visualizzare i commenti nascosti nel coso un utente fosse interessato a leggere tutti i commenti o a inserirne uno.

Come nascondere i commenti per visualizzarli sono agli utenti interessati?


1) La prima cosa da fare è realizzare un icona "visualizza tutti i commenti" e inserirlo vicino al numero commenti. L' unica cosa che può essere difficoltosa è trovare il punto giusto dove inserirlo poichè questo dipende dal template che abbiamo inserito.
Entriamo in blogger e andiamo in Modello / Modifica HTML , spuntiamo su Espandi i modelli widget
 e clicchiamo sulla tastiera Ctrl e F per attivare la funzione trova , nella parte inferiore del browser grazie alla  casella di ricerca che sarà comparsa cerchiamo :

        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span>
      </div>

o qualcosa di simile e appena sotto ci inseriamo :

   <b:if cond='data:blog.pageType == &quot;item&quot;'><div>
<span class='numer-comment'> <data:post.commentLabelFull/>:  </span>
<span class='botton-visual'><a href='javascript:void(0)' onclick='var el=document.getElementById(&apos;comments&apos;); el.style.display==&apos;block&apos;?el.style.display=&apos;none&apos;:el.style.display=&apos;block&apos;;'>Visualizza tutti i Commenti &gt;</a></span>  </div></b:if>

ovviamente lo si può modificare ad esempio inserendo in css appena sopra ]]></b:skin>

.botton-visual {margin:0 0 .5em;padding:0 0 .75em 40px;}
.botton-visual a:link {color:#c57346; border:1px solid #c57346;padding:4px;}
.botton-visual a:hover {color:#000000;border:1px solid #000000;}
.numer-comment {margin:0 0 10px;padding-top:.5em;line-height: 1.4em;font: bold 180% Georgia,Serif;color:#333;}

 i colori del pulsante potrete deciderlo voi. In questo caso il risultato dovrebbe essere simile a questo:

2) Ora ci resta solo nascondere la sezione commenti inserendo

.comments {display:none;}

prima del tag ]]></b:skin> oppure se il vostro template ha uno style css per il layout dei post dovrete inserirlo lì.

Il gioco è fatto, se avete inserito tutto nei punti giusti dopo aver salvato il tutto quando visualizzerete il vostro post i commenti rimarranno nascosti e cliccando sul pulsante appena realizzato ricompariranno.