Pubblicato il 18/07/09 - aggiornato il  | 26 commenti :

Come inserire emoticon animate (animoticon) nei commenti di un blog su Blogger con l’opzione pagina intera o finestra pop-up.

In un blog su Blogger si può scegliere di inserire i commenti in tre diversi modi
  1. Pagina intera
  2. Finestra popup
  3. Incorporato sotto il post
Per selezionare l’opzione preferita si va su Impostazioni > Commenti > Posizionamento modulo dei commenti e si mette il segno di spunta sulla modalità prescelta ricordandosi di Salvare le impostazioni
commenti-blogger
In questo blog per il momento ho scelto la Finestra popup. In un articolo di diverse settimane fa avevo parlato di come inserire delle emoticon animate nei commenti ad un articolo. Il metodo illustrato però funzionava solo se si avevano i commenti incorporati sotto il post.
Purtroppo esiste Internet Explorer che è tuttora il browser più usato anche se, per fortuna, sta perdendo utenti continuamente! Il fatto è che detto browser non riusciva ad aprire le pagine di questo blog con quella modalità di commenti e con la presenza del widget Google Friend Connect.

Tutta la storia l’ho raccontata nell’articolo
Per quanto riguarda il widget Google friend Connect ho supplito con l’inserimento di uno screenshot come spiegato nel post
Restava quindi il problema delle emoticon animate che non potevano essere più inserite. Adesso ho risolto anche questo piccolo problema e brevemente ne illustro il procedimento.
Andare su Layout > Modifica HTML, scaricare un modello completo e espandere i modelli widget. Cercare la seguente linea di codice
<div class='post-footer-line post-footer-line-3'/>
Se non si trova questa linea può essere che ci sia un altro numero al posto del 3. In ogni caso possiamo anche procedere per tentativi visto che abbiamo salvato il modello e quindi lo possiamo all’occorrenza ripristinare.
L’idea è quella di mettere le faccine proprio alla fine dell’articolo, sotto anche al nome dell’autore, l’ora di pubblicazione e le etichette. E’ ovvio che a secondo dei modelli uno può scegliere un’altra posizione. Per quanto riguarda questo blog immediatamente sopra alla succitata riga di codice è stato inserito quest’altro codice, come mostrato in questo screenshot
image
Il codice in questione deve essere personalizzato a seconda del modello del nostro blog. Alcune personalizzazioni potrebbero essere queste
- Togliere i due tag <center> e </center> se si vuole che il rettangolo con le faccine sia sulla sinistra e non al centro
-Il colore del testo #191919 e il background #FFFFFF può essere variato a seconda dei colori del blog
codice-faccine
- La percentuale del rettangolo è del 68% ed è stata calcolata per questo layout dopo vari tentativi. Se avete un layout più stretto vi consiglio di partire con una percentuale superiore (p.e. 80%) per poi scegliere quella che dà i migliori risultati estetici. Detta percentuale rappresenta la larghezza del rettangolo in cui sono rinchiuse le faccine animate.
- L’espressione “Combinazione di tasti per inserire emoticon animate nei commenti” può essere ovviamente sostituita con un altra.
Dopo aver salvato il modello vi accorgerete che la Homepage avrà lo stesso aspetto ma i singoli articoli, nella parte bassa si presenteranno più o meno così
animoticon-blogger
Per completare l’opera bisogna aggiungere lo script che consente di sostituire automaticamente i gruppi di segni ortografici con le relative faccine.
Sempre in Layot > Modifica HTML cerchiamo la seguente riga di codice
</body>
che si trova nella parte conclusiva del modello e, immediatamente sopra, inserite quest’altro codice
<script src='http://is.gd/3pxvm' type='text/javascript'/>
<noscript><a href='http://parsifal32.blogspot.com' target='_blank'><span style='font-size: x-small;'>Aggiungi emoticons</span></a></noscript>

come mostrato nello screenshot seguente
script-modello
Salvate il modello. Adesso provate ad inserire come commento delle combinazioni di tasti presenti nel riquadro alla fine del post
faccine commenti
Ecco come sarà visualizzato da Firefox, Chrome, Opera (non Internet Explorer!)
 image
Termino questo lungo post ricordando che il segno della tilde (~) si ottiene digitando 126 con il tastierino numerico tenendo premuto Alt e che lo script è retroattivo; cioè se in qualche commento precedente sono presenti delle combinazioni come quelle previste allora vi apparirà anche la relativa animoticon.


Aggiornamento Importante: Questo tutorial è obsoleto. Per inserire le emoticon nei commenti di Blogger consultate quest'altro articolo




26 commenti :

  1. ciao Ernesto
    come va?
    son tornata dalla pizzata di Catania,adesso un sano w.e. e poi mi voglio mettere sotto x capire qualcosa di queste emoticon.
    X Iniziare vorrei fare un blog di prova,ke dici?così anke se sbaglio fa nulla.
    Il mio enorme problema rimane sempre quello di aver paura a modificare l'html,ke x me è una brutta bestia.
    Ci sentiamo presto
    buon w.e. anke a te
    Lella

    RispondiElimina
  2. davvero belle le proverò, nel mio nuovo blog di prova..sono riuscita ad allargare il template e aggiungere una terza colonna..chissa che non mi riesca di fare anche questo..

    RispondiElimina
  3. @PHOEBE
    Certo che ci riesci 8-}
    Poi basta che scarichi il modello completo prima di iniziare i cambiamenti per poter fare il backup.
    Ciao :-*

    RispondiElimina
  4. ciao parsifal , e' da poco che sto costruendo il mio blog e vorrei un tuo consiglio .....vedo che sei esperto .
    Sai vorrei inserire delle gif da far scaricare ...ma dove le trovo libere dal copyright? sai come posso fare?
    Grazie in anticipo di una tua risposta. :)
    complimenti per il tuo blog!! :)

    RispondiElimina
  5. @Anonimo
    Ce ne sono tantissimi di siti con GIF animate da scaricare liberamente, prova qui oppure qui. Ciao

    RispondiElimina
  6. ciao parsifal32, grazie dei link.
    cmq in internet ce ne sono parecchi di siti con gif gratuite ... mi hanno detto che non e' perche' sono gratuite le possiamo prendere e far scaricare dai nostri blog!! mi hanno detto che bisogna vedere il tipo di licenza ed eventualmente chiedere i permessi ai proprietari!! com'e' possibile?? bisogna fare un casino per avere qualche gif? tu ne sai qualcosa di tutto questo??
    scusami per queste domande...ma sai e' la prima volta che sto per inserire il mio blog e non vorrei avere problemi . aspetto una tua risposta e ti ringrazio molto. ciao :)

    RispondiElimina
  7. @Anonimo
    Se sono sotto licenza Creative Commons basta inserire il link del sito in cui si sono prese

    RispondiElimina
  8. ok!! ne ho visti un po' di siti con questa licenza.
    grazie :) ciao.

    RispondiElimina
  9. Ciao Parsifal
    ho inserito queste emoticons tempo fà seguendo alla lettera la tua prima guida.Funzionava tutto perfettamente fino a pochi giorni fà,adesso rimangono nei commenti solo i simboli.Ho riprovato a ricaricare tutto ma niente da fare !!! Mi puoi dare una mano???
    GRAZIE IN ANTICIPO DELLA TUA PAZIENZA. :(( :((

    RispondiElimina
  10. Come vedi qui funzionano e dovrebbero funzionare anche da te. Ti ho risposto più dettagliatamente sul tuo blog

    RispondiElimina
  11. Non funziona su tutti i template , vero? Ho provato sul mio ma non va!

    RispondiElimina
  12. @Albania
    Non capisco perché non funzioni con altri template. C'è un commento precedente al tuo in cui un lettore diceva che li funzionava tutto bene e poi hanno smesso di vedersi le faccine. Ho provato a re-incollare il codice nel caso ci fosse stato qualche errore, ma il problema sembra permanere. Certo non dipende dal codice che è lo stesso di questo blog e che funziona. Non saprei che dirti, mi spiace...

    RispondiElimina
  13. Salve ...
    prima di fare questa cosa devo risolvere altra più importante e non riesco fare nulla ...
    quando qualcuno lascia un commento su mio blog lo scrive con lettere nere e quando pubblica commento no di vede nulla perché le lettere diventa bianche e sfondo del box di commenti e bianco e no si vede nulla succede anche anche se metto novo post scrivo qualcosa e nulla tutto bianco se cambio colore d le lettere da nero metto blu si vedono perfettamente cosa devo fare...
    Chi mi po aiutare e risolvere mistero ...Grazie a tutti..

    RispondiElimina
  14. Ti consiglio di cambiare template o in alternativa di modificare i colori del modello andando su Design > Modifica HTML. Bisogna stare attenti a come si opera e conviene sempre salvare una copia per il backup.
    I codice dei colori li riconosci perché sono fatti così
    #FFFFFF questo è il colore bianco
    #000000 questo è il colore nero
    Guarda i colori che stanno nei blocchi dei fogli di stile dei commenti e prova a variarli.
    Ciao

    RispondiElimina
  15. provo fare anche questo tentativo comunque ti ringrazio sei unico che mia risposto su questo argomento ti faccio sapere come e andata la cosa.

    RispondiElimina
  16. Ho cambiato tutti le colori ma adesso ho capito che un difetto di intero blog
    se metto NOVO POSTO e scrivo e la colore de lettere sono nere e PUBBLICA POST quando vado vedere il post originale e tutto diventa bianco cosa devo fare???

    RispondiElimina
  17. Ho poche informazioni e non ho l'indirizzo del blog per avere un'idea precisa

    RispondiElimina
  18. Sicuramente un blog con molti commenti è da preferire ad uno senza, personalmente mi trovo spesso a comprare su ebay alcuni prodotti tecnologici, dopo essermi in genere informato su testfreaks per leggere le recensioni, vado a vedere su google quali sono i backlink dei primi siti relativi al prodotto...ed in genere poso confermare che hanno moltissimi commenti al prodotto...

    RispondiElimina
  19. GRazie per l'utilissimo codice!!
    Messo ovviamente :D

    RispondiElimina
  20. Ciao Ernesto! :)
    Qialche tempo fa ho modificato il codice html del mio blog per poter inserire le faccine, non animate, nei commenti.
    Ho seguito uno dei tuoi tutorial e ci sono riuscita!
    Adesso ho visto queste, che sono, almeno mi sembra, diverse dalle mie... e sinceramente mi piacerebbe provare a mettere quelle animate... ma, avendo già modificato il codice, non rischio di creare qualche conflitto e magari trovarmi cinquanta emoticon tutte insieme?
    Spero di ricevere presto una risposta... :)

    RispondiElimina
    Risposte
    1. @ Kety
      Dovresti ritrovare il post da cui hai copiato il codice delle faccine che hai adesso e fare il procedimento inverso cioè toglierlo dal modello. Poi puoi inserire queste nuove emoticon. Se non ti ricordi il codice dovrebbe essere uno di questi
      http://www.ideepercomputeredinternet.com/search/label/emoticon

      Elimina
  21. Ti volevo far notare che all'inizio del post c'è stato un errore di scrittura su di un codice che bisogna cercare nel modifica HTML. Parlo del codice "........post-footer-line-3/>" che dovrebbe finire in questo modo: "......post-footer-line-3'>" che durante la ricerca infatti non lo trova del tutto. Per questo dicevi che non si trova questa linea può darsi che ci sia un altro numero al posto del 3.....cmq non so se sia stato di aiuto.

    RispondiElimina
    Risposte
    1. Il post ha più di 4 anni e i codici cambiano. Il mio consiglio è quello di cercare le righe di codice con Ctrl+F immettendo nella casella di ricerca solo le parti essenziali della stringa, in questo caso
      div class='post-footer-line post-footer-line-3
      e allora non ci sono problemi con virgolette o slash. Io almeno faccio sempre così.
      @#

      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.