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:margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:2px solid #940F04;
background:#FDBCB7;
}
- 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
- 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.
- Il background rappresenta il colore dello sfondo del box del commento
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.
ho dovuto espandere i modelli widget se no la riga evidenziata in blu non la trovava ...
RispondiEliminagrunt!!
@Tex Willer
RispondiEliminaAggiunto nel post :)
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.
RispondiEliminaho 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
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.
RispondiEliminaIn effetti non capisco perché non lo metti anche tu sul tuo blog, con tutte le domande che ti facciamo sarebbe utile per noi lettori!
@Tex Willer
RispondiEliminaPorta 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
Grazie, l'ho appena implementato :)
RispondiEliminaGrazie Mille, mi hai aiutato tantissimo!! Ora è tutto molto più semplice ed ordinato!! Spiegazione semplicissima e chiara!!!
RispondiEliminaGrazie mille!
Ho anche inserito il tuo antipixel nel mio blog!! Complimenti!
utilissimo come sempre grazie!!! ^_^
RispondiElimina@Dony
RispondiEliminaMi fa piacere di esserti stato utile
@Magnolia
grazie molte per l'antipixel. Ho molto apprezzato. Ciao
Funziona benissimo! GRAZIE!
RispondiEliminaCi 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!!!
RispondiEliminacon mary alis filokalos mi aveva dato un sito dove poter seguire il metodo,...
RispondiEliminaIo 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.
@BrilliDiLuce
RispondiEliminaL'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 :(
SEI GRANDE!!!
RispondiEliminaFunziona che è una meraviglia.
Grazie
Grazie sei stato gentilissimo! Fatto e come puoi vedere sul mio blog funziona benissimo! E i colori già andavano bene!
RispondiEliminanon potresti aiutarmi a trovarlo?? non me la cavo con i codici.
RispondiEliminaby brilli di luce
Ciao!!
RispondiEliminaHo 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?! :(
@Mila
RispondiEliminaNon 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
@Ernesto T.
RispondiEliminaNon si vede più perchè ho cancellato il pezzo di codice in più ;)
Grazie comunque!Ciao!
ho cambiato il template...è possibile hce non riesca a trovarlo nuovamente'??
RispondiEliminaho cambiato il template...è possibile hce non riesca a trovarlo nuovamente'??
RispondiEliminanon 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@BrilliDiLuce
RispondiEliminaPurtroppo 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
GRAZIE MILLE...CE L HO FATTA :)
RispondiEliminagrazie mille per questo suggerimento! l'ho appena applicato al mio blog! :))
RispondiEliminaFantastico! =)
RispondiEliminaLo 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...
@Klod
RispondiEliminaCerto. 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.
ciao, a me non trova nessun codice
RispondiElimina@Sairos
RispondiEliminaProva quest'altro sistema
http://www.ideepercomputeredinternet.com/2011/07/come-evidenziare-i-commenti-dell-del.html
modificando la grafica del blog, ho ri inserito questo particolare. Tuttavia non compare. Come mai??
RispondiElimina@BrillidiLuce
EliminaQuesto tutorial non funziona più da quando in Blogger hanno introdotto i commenti nidificati con i pulsanti Rispondi e Aggiungi un commento.
vi ringrazio :)
RispondiElimina