Pubblicato il 23/05/17 - aggiornato il  | 7 commenti :

Come mostrare il numero di post e di commenti di un blog su Blogger.

Widget per Blogger che mostra il numero dei giorni da quando è online il sito, il numero di post pubblicati e il numero dei commenti ricevuti.
Ho già mostrato come su Blogger si possa aggiungere un contatore di visite per ciascun post in modo da mostrare ai lettori quante volte sia stata aperta una determinata pagina. Per questa operazione ho usato il servizio di hosting Firebase che però da allora ha cambiato completamente grafica dopo essere stato acquistato da Google.

Mi riprometto quindi di riprendere quell'articolo e di renderlo attuale. A seguito di un commento appena ricevuto visto che mi sarebbe stato difficile rispondere passo alla realizzazione di un instant post sul tema che mi è stato posto.  Nel commento mi si chiedeva se fosse possibile creare un widget che mostrasse il numero totale di post pubblicati.
Con il javascript si può fare anche di più e si possono mostrare oltre al numero di post anche il numero dei commenti ricevuti e persino il numero di giorni di vita del sito.






Il risultato che si ottiene è il seguente

numero-post





con i tre dati calcolati automaticamente dal javascript. Ovviamente si possono personalizzare i colori dello sfondo e delle varie parti del testo. Non occorre neppure modificare il Tema. Si va su Bacheca -> Layout -> Aggiungi un gadget -> Base -> HTML/Javascript quindi in Sezioni del sito si incolla questo codice

<div align="center"><div style="width:280px; background:#fee; text-align:center;">
<span style="color:#036; font-family:Georgia; font-weight:normal;">Questo blog è nato da </span><span style="color:#f95b5b; font-family:Georgia; font-weight: bold;"><script>    
    var mesearray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
    function contatore(yr,m,d){
    var today=new Date()
    var giorno=today.getYear()
    if (giorno < 1000)
    giorno+=1900
    var meseg=today.getMonth()
    var giornoday=today.getDate()
    var todaystring=mesearray[meseg]+" "+giornoday+", "+giorno
    var paststring=mesearray[m-1]+" "+d+", "+yr
    var durata=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1)
    durata+=" giorni,"
    document.write("" +durata+"")
    }
    //nascita blog: giorno, mese, anno
    contatore(28,01,2008)
    </script></span>
<br/><span style="color:#036; font-family:Georgia; font-weight: normal;">vi sono stati pubblicati </span><span style="font-family:Georgia; color:#f95b5b; font-weight: bold;"><script style="text/javascript">
function numberOfPosts(json) {
document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b>');
}
</script>
<script src="http://www.ideepercomputeredinternet.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script> articoli</span><span style="color:#036; font-family:Georgia; font-weight: normal;"> <br/>e vi sono stati postati </span><span style="color:#f95b5b; font-family:Georgia; font-weight: bold;"><script style="text/javascript">
function numberOfComments(json) {
document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b>');
}
</script>
<script src="http://www.ideepercomputeredinternet.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script> commenti.</span></div></div>

Si va quindi su Salva e si trascina con il mouse l'elemento pagina nel punto in cui visualizzarlo dopo di che si clicca su Salva disposizione in alto a destra. Il codice funziona anche nei nuovi Temi di Blogger.






PERSONALIZZAZIONI DEL WIDGET

  1. width:280px; è la larghezza del widget
  2. background:#fee; è il codice del colore dello sfondo del widget
  3. color:#036; è il codice del colore del testo
  4. color:#f95b5b; è il codice del colore dei numeri
  5. font-family:Georgia; è la famiglia di caratteri
  6. Il testo colorato di blu può essere modificato a seconda dei nostri gusti
  7. contatore(28,01,2008) rappresenta la data in cui è nato il blog (28 Gennaio 2018 nel mio caso)
  8. www.ideepercomputeredinternet.com va sostituito con l'URL della Home del vostro blog con .com se gratuito del tipo blogspot evitando il localizzato .it.
Si tratta di un widget piuttosto semplice che può essere posizionato in una sidebar oppure anche nel footer.




7 commenti :

  1. Ernesto ...c'è un problemino ... su smartphone, sulla prima riga "Questo blog è nato da" al posto del numero dei giorni appaiono lettere.
    Se puoi controllare grazie ;-)

    RispondiElimina
  2. Dipende dalle diverse impostazioni della data nella versione mobile e desktop. Puoi risolvere in tre modi 1) Inserisci il widget nella sidebar che non si vede nella versione mobile
    2) Elimini il codice che si riferisce alla data del blog e lasci gli altri due dati
    3) Usi i tag condizionali per mostrare il codice della data solo nella versione desktop
    @#

    RispondiElimina
    Risposte
    1. perdonami Ernesto..io vorrei che si vedesse anche su mobile.. quindi praticamente cosa dovrei modificare?

      Elimina
    2. @# Sul mobile se il numero di giorni non ti funziona e gli altri invece sì puoi usare questo codice

      <div align="center"><span style="color:#036; font-family:Georgia; font-weight: normal;">Sono stati pubblicati </span><span style="font-family:Georgia; color:#f95b5b; font-weight: bold;"><script style="text/javascript">
      function numberOfPosts(json) {
      document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b>');
      }
      </script>
      <script src="http://www.ideepercomputeredinternet.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script> articoli</span><span style="color:#036; font-family:Georgia; font-weight: normal;"> <br/>e sono stati postati </span><span style="color:#f95b5b; font-family:Georgia; font-weight: bold;"><script style="text/javascript">
      function numberOfComments(json) {
      document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b>');
      }
      </script>
      <script src="http://www.ideepercomputeredinternet.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script> commenti.</span></div></div>

      a cui devi sostituire l'URL del mio blog con il tuo.

      Elimina
  3. Ciao Ernesto! Una domanda: perché, se nel mio blog ho 738 post, mi indica invece che sono stati pubblicati 6028 articoli? Grazie e ciao!

    RispondiElimina
  4. Perché non hai sostituito l'indirizzo del mio blog con quello del tuo 😊
    @#

    RispondiElimina
    Risposte
    1. Cacchio, é vero! Non avevo visto che erano due da sostituire. Sono proprio un pistola! Grazie come sempre e ciao!

      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.