03 novembre 2008

Come inserire i commenti dell'autore del blog in un rettangolo colorato.

Per evidenziare i commenti dell'autore del blog rispetto a quelli dei lettori possiamo inserirli all'interno di un rettangolo magari colorato. Per prima cosa bisogna andare su Layout>Modifica HTML>Scarica modello completo per fare il backup se le cose andassero storte. Occorre trovare la sezione dei commenti nel modello. Vi faccio vedere quella che ho trovato nel mio modello, in altri più o meno non dovrebbe differire di molto; in genere inizia con il tag

<dl id='comments-block'> e finisce con </dl>

Ci sono però dei modelli in cui inizia con <ul>. Ecco il codice che ho trovato nel mio modello

<dl id='comments-block'>
      <b:loop values='data:post.comments' var='comment'>
         <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
           <a expr:name='data:comment.anchorName'/>
           <b:if cond='data:comment.authorUrl'>
             <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
           <b:else/>
            <data:comment.author/>
           </b:if>
           <data:commentPostedByMsg/>
         </dt>
         <dd class='comment-body'>
           <b:if cond='data:comment.isDeleted'>
             <span class='deleted-comment'><data:comment.body/></span>
           <b:else/>
             <p> <data:comment.body/> </p>
           </b:if>
         </dd>
         <dd class='comment-footer'>
           <span class='comment-timestamp'>
             <a expr:href='data:comment.url' title='comment permalink'>
               <data:comment.timestamp/>
             </a>
             <b:include data='comment' name='commentDeleteIcon'/>
           </span>
         </dd>
       </b:loop>
     </dl>

Se non siete sicuri di dove sia questa sezione cercate una delle tre seguenti linee di codice, p.e. con il sistema mostrato in questo articolo relativo a consigli sull'HTML

<b:loop values='data:post.comments' var='comment'>
<data:comment.author/>
<data:comment.body/>

 Nel codice trovato nel mio blog le tre linee sono colorate di rosso. Per poter modificare i commenti dell'autore sostituitelo totalmente con quest'altro codice

<ul class='commentlist' style='margin: 0; padding: 0;'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<li class='author-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></div>
<div class='clear'/>
</li>
<b:else/>
<li class='general-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></div>
<div class='clear'/>
</li>
</b:if>
</b:loop>
</ul>

 Salvate il modello. Adesso occorre aggiungere lo stile per i commenti dell'autore. Cercate la seguente linea di codice

]]></b:skin>

immediatamente sopra incollate quest'altro codice

.author-comments {
background: #EEEEFF;
border: 2px solid #19265B;
padding: 5px;
}

 

La parte del codice colorata di rosso può essere personalizzata



  • EEEEFF rappresenta il colore di sottofondo dei commenti, in questo caso un celestino chiaro chiaro ma si può scegliere il colore che si vuole
  • 2 sta a indicare il numero dei pixel del bordo, si può mettere anche 1 o 3 se si vuole più sottile o più spesso
  • 19265B è il colore del bordo del rettangolo del mio blog che è uguale a quello dell'intestazione, ciascuno naturalmente può mettere il colore che vuole.

Ecco come si presenta l'area dei commenti dopo queste modifiche

image

Fonte - Blogger Buster

 




14 commenti :

  1. quando diventerò grande, ci proverò pure io.

    :-D

    RispondiElimina
  2. @Saamaya
    E' un'operazione piuttosto semplice, basta fare un copia incolla

    RispondiElimina
  3. Aiuto devo sostituire tutto quello tra il "comment-block" giusto?Che c'entrano le righe in rosso?Mi sono confusa :-)

    RispondiElimina
  4. @astasia
    Questo post l'ho tradotto dall'inglese e ho lasciato l'impostazione originaria. Nei vari modelli il blocco di codice che riguarda i commenti è diverso però le tre linee colorate di rosso dovrebbero essere presenti in tutti i template. Tu devi trovare il blocco di codice che riguarda i commenti proprio guardando se sono presenti queste linee. Poi lo selezioni tutto e lo sostituisci con l'altro codice.
    Quindi inserisci anche l'altro codice che è il foglio di stile per i commenti che naturalmente potrai personalizzare con i colori del tuo blog.

    RispondiElimina
  5. c'e' qualcosa che non va...non mi si colora il rettangolo...ma non ho errori nel salvataggio del modello...mumble mumble...

    RispondiElimina
  6. Il rettangolo ti viene?
    Se non si colora prova a cambiare i colori. Non saprei che dirti. Sono venuto sul tuo blog ma non ho visto commenti dell'autrice

    RispondiElimina
  7. Si li ho cancellati dato che erano delle prove..nulla non mi vengono ne i bordi ne il colore.
    Ho provato a cambiare sia il colore che lo spessore dei bordi e addirittura a lasciare i tuoi...
    Ci sarà qualcosa nel mio modello di strano boh...però ho trivato tutte le cose che avevi detto tu..
    Ah per il contatore ho risolto...ho cliccato sul tuo e mi ha portato al sito :-)

    RispondiElimina
  8. Non so che dirti. Forse il tuo modello non supporta questa modifica. A volte succede. L'importante prima di procedere è salvare una copia del modello in modo da poter tornare indietro. Mi dispiace non averti potuto aiutare stavolta

    RispondiElimina
  9. Ciao ho fatto la modifica dei commenti dell'autore, mi ha fatto il rettangolo,ma mi ha cambiato i colori dei nick e la data, sono piuttosto neutri rispetto, per esempio, al tuo e al rosso dell'originale, per cambiarlie che posso fare?
    ciao

    RispondiElimina
  10. @Pietro
    Per cambiare i colori devi cambiare i dati dopo il simbolo #. Per esempio il bianco è #FFFFFF mentre il nero è #000000. Per conoscere come funzionano i codici dei colori puoi leggerti questo articolo. C'è spiegato anche come riuscire a sapere i colori del proprio blog. Quando conosci i codici dei colori che vuoi mettere come bordo e come sfondo li sostituisci a quelli che sono indicati nell'articolo, cioè li metti al posto di
    #EEEEFF che è un bluastro chiaro chiaro
    e di
    #19265B che è il colore dei bordi di questo blog
    Spero di essere stato chiaro.
    Ciao

    RispondiElimina
  11. hm.. attractive style!

    RispondiElimina
  12. ciao ho provato la modifica ma proprio non funziona. io utilizzo un template nuovo di blogger draft sarà per quello? il fatto è che non mi da nessun errore la piattaforma! anche se inserisco le modifiche il riquadro rimane identico al vecchio...:(((

    RispondiElimina
  13. @Pistilon
    Come puoi notare il post risale al Luglio del 2008 vale a dire quasi due anni e mezzo fa. Da allora a oggi Blogger è cambiato tantissimo. Capisco che dovrei aggiornare i post ma sarebbe un lavoro enorme. Alcune personalizzazioni funzionano ancora, per altre purtroppo c'è poco da fare.
    Mi spiace, ciao

    RispondiElimina
  14. si ho visto che sono vecchi, grazie kmq...spero di risolvere in altro modo!

    RispondiElimina

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