Pubblicato il 28/01/11 - aggiornato il  | 32 commenti :

Visualizzare i commenti dell'autore del blog dentro un rettangolo colorato.

Avevo già presentato questa personalizzazione diverso tempo fa, esattamente il 3 Novembre 2008. Da allora sono cambiate moltissime cose in Blogger, anche nella sezione commenti, dove sono comparsi gli avatar dei commentatori, quindi quel tutorial non funziona più neppure con i vecchi modelli. Ne presento quindi un altro che mostri i commenti dell'autore del blog all'interno di un rettangolo colorato che funzionerà anche con nuovi modelli. L'ho testato sul template Simple e sul vecchio modello Tekka. Ritengo che possa funzionare con tutti i template ufficiali di Blogger creati con il Designer Modelli, con tutti gli altri della passata generazione e anche con molti altri personalizzati scaricati da internet.
Si deve andare su Design > Modifica HTML, salvare il modello completo, espandere i modelli widget e cercare queste righe

<data:commentPostedByMsg/>
</dt>

dovrebbero essere presenti in tutti i template nella sezione dei commenti. Dovreste vedere un blocco di codice di questo tipo
<data:comment.author/>
              </b:if>
             
<data:commentPostedByMsg/>
           
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
</b:if>

           <dd class='comment-footer'>
              <span class='comment-timestamp'>

Probabilmente ci potranno essere delle differenze ma dovranno essere presenti le righe evidenziate di blu. Quello che dovete fare è aggiungere al codice le righe che sono state evidenziate di rosso.
Adesso dovrete cercare nella sezione <head>, nella parte alta del modello, le classi di stile che determinano l'aspetto dei commenti. E' sufficiente cliccare su F3 o su Ctrl+F e cercare le parole comment o comments. Ci potrebbero essere dei blocchi di codice simili a questi che ho trovato nel modello Simple. Anche se fossero un po' diversi non ve ne preoccupate troppo
#comments .comment-author {
  padding-top: 1.5em;
  border-top: 1px solid $(body.rule.color);
  background-position: 0 1.5em;
}
#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}

Immediatamente sotto incollate questo codice (Ricordatevi di metterlo sempre dopo la parentesi graffa di chiusura della classe precedente)
.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:2px solid #940F04;
background:#FDBCB7;
}
Salvate il modello. Le personalizzazioni da fare riguardano i seguenti parametri:
  1. Il padding è la distanza in pixel del testo dal bordo del box dei commenti, 5 in alto e in basso, 10 a sinistra e a destra
  2. Il border indica lo stile del bordo: 2px è la dimensione dello spessore, #940F04 è il suo colore e solid è il tipo di bordo. Per adattare il rettangolo al vostro blog vi consiglio di leggere i codici dei colori e lo stile dei bordi.  
  3. Il background rappresenta il colore dello sfondo del box del commento
Ecco come si presenteranno i commenti dell'autore del blog e quelli di un altro utente
box commenti autore blog
Per verificare di persona il funzionamento e per controllare che gli avatar si visualizzano correttamente andate in questo mio post di prova e lasciate un commento. Si tratta di una personalizzazione che consente di evidenziare i vostri commenti rispetto a quelli dei lettori e che credo risulterà gradita ai frequentatori del vostro blog.




32 commenti :

  1. ho dovuto espandere i modelli widget se no la riga evidenziata in blu non la trovava ...
    grunt!!

    RispondiElimina
  2. @Tex Willer
    Aggiunto nel post :)

    RispondiElimina
  3. eh ma purtroppo ho aggiunto la prima parte e poi non son riuscito a trovare le righe per la seconda parte del codice col colore ecc.ecc.
    ho anche sfogliato 100 parentesi graffe vanamente .. al che ho detto cancella modifiche non salvate e mi son preso una pausa di riflessione

    ehehehe
    che ci vuoi fare son vecchio per queste cose

    RispondiElimina
  4. ho fatto questa modifica già da qualche giorno ed è eccezionale. Nel mio post di ieri sono arrivata a più di 70 commenti e ha salvato la conversazione evidenziando subito ai lettori le mie risposte.
    In effetti non capisco perché non lo metti anche tu sul tuo blog, con tutte le domande che ti facciamo sarebbe utile per noi lettori!

    RispondiElimina
  5. @Tex Willer
    Porta pazienza...

    @Filokalos
    Ci penserò, potrebbe essere una buona idea visto che non appesantisce più di tanto il modello perché non ci sono immagini da caricare

    RispondiElimina
  6. Grazie, l'ho appena implementato :)

    RispondiElimina
  7. Grazie Mille, mi hai aiutato tantissimo!! Ora è tutto molto più semplice ed ordinato!! Spiegazione semplicissima e chiara!!!

    Grazie mille!

    Ho anche inserito il tuo antipixel nel mio blog!! Complimenti!

    RispondiElimina
  8. utilissimo come sempre grazie!!! ^_^

    RispondiElimina
  9. @Dony
    Mi fa piacere di esserti stato utile

    @Magnolia
    grazie molte per l'antipixel. Ho molto apprezzato. Ciao

    RispondiElimina
  10. Ci potesse essere un modo per scegliere il partner altrettanto facile che per segliere un prodotto!! Leggere le recensioini su testfreaks....andare su ebay e portare a casa un prodotto eccezionale!!!

    RispondiElimina
  11. con mary alis filokalos mi aveva dato un sito dove poter seguire il metodo,...

    Io pero non riesco a farlo, mi sento davvero scema..mi aiuteresti??
    Non so magari ti do i codici html.

    Cmq grazie mille per le speigaizoni.

    RispondiElimina
  12. @BrilliDiLuce
    L'articolo è già chiaro di per sè. C'è solo da cercare delle righe con F3 e inserirne altre. L'unico problema che può sorgere è quello di avere un modello che ha dei codici molto diversi. Ma allora c'è poco da fare :(

    RispondiElimina
  13. SEI GRANDE!!!
    Funziona che è una meraviglia.
    Grazie

    RispondiElimina
  14. Grazie sei stato gentilissimo! Fatto e come puoi vedere sul mio blog funziona benissimo! E i colori già andavano bene!

    RispondiElimina
  15. non potresti aiutarmi a trovarlo?? non me la cavo con i codici.
    by brilli di luce

    RispondiElimina
  16. Ciao!!
    Ho provato a inserire questa personalizzazione nel mio blog ma ho combinato un mini disastro!
    Ora i miei commenti sono preceduti da un pezzetto di codice html ma per niente nel riquadro!!
    Puoi aiutarmi?! :(

    RispondiElimina
  17. @Mila
    Non vedo nessun disastro e nessun codice che precede i tuoi commenti. Ho visto che hai messo a posto il fumetto con il numero dei commenti. E' difficile aiutarti. Non è che posso dirti di più di quello che c'è scritto nel post. Il procedimento è quello. Ricordati che quando fai delle modifiche devi sempre salvare il modello per poter tornare alla situazione precedente.
    Ciao

    RispondiElimina
  18. @Ernesto T.
    Non si vede più perchè ho cancellato il pezzo di codice in più ;)
    Grazie comunque!Ciao!

    RispondiElimina
  19. ho cambiato il template...è possibile hce non riesca a trovarlo nuovamente'??

    RispondiElimina
  20. ho cambiato il template...è possibile hce non riesca a trovarlo nuovamente'??

    RispondiElimina
  21. non riesco a trovare il codice. Non è che potrebbe cercarmelo lei..e gia inserirmi il tutto nel codice?? cosi io lo copio direttamente nel blog?' sono impedita con i codici html. grazieee

    RispondiElimina
  22. @BrilliDiLuce
    Purtroppo non si può fare :)
    Espandi i modelli widget e clicca su F3, inserisci una parte del codice che vuoi trovare ed è fatta. Ci vuole un secondo :D

    RispondiElimina
  23. grazie mille per questo suggerimento! l'ho appena applicato al mio blog! :))

    RispondiElimina
  24. Fantastico! =)
    Lo sto usando anch'io con una piccola modifica: ho lasciato solo il bordo, lo sfondo invece l'ho lasciato come prima...in pratica ho solamente incorniciato i miei commenti! =)

    Solo una cosa, si potrebbe modificare il colore del carattere?Per fare in modo che i miei commenti siano di un colore differente...

    RispondiElimina
  25. @Klod
    Certo. L'ho appena fatto!
    Inserisci nel codice anche una riga come questa

    color:#003366;

    in modo che diventi

    .blog-author-comment p {
    margin:0 0 .75em;
    padding:5px 10px;
    color:#003366;
    border:2px solid #940F04;
    background:#FDBCB7;
    }

    Ovviamente puoi personalizzare i colori come più ti piace.

    RispondiElimina
  26. ciao, a me non trova nessun codice

    RispondiElimina
  27. @Sairos
    Prova quest'altro sistema
    http://www.ideepercomputeredinternet.com/2011/07/come-evidenziare-i-commenti-dell-del.html

    RispondiElimina
  28. modificando la grafica del blog, ho ri inserito questo particolare. Tuttavia non compare. Come mai??

    RispondiElimina
    Risposte
    1. @BrillidiLuce
      Questo tutorial non funziona più da quando in Blogger hanno introdotto i commenti nidificati con i pulsanti Rispondi e Aggiungi un commento.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy