Come personalizzare i pulsanti Rispondi, Elimina e Aggiungi un commento con effetto hover.

Come personalizzare i bottoni Rispondi, Elimina e Aggiungi un commento quando si sia attivata l'opzione dei commenti con risposte in un blog su Blogger.

Mi è stato spesso chiesto come ho fatto a personalizzare i pulsanti dei commenti nidificati ma non avevo ancora avuto modo di spiegarlo visto che tale funzionalità non si era ancora stabilizzata e il codice nel modello continuava a cambiare da un giorno all'altro.

Adesso visto che le cose sembra che si siano calmate è forse il caso di passare a illustrare come modificare i vari CSS che sovrintendono all'aspetto di commenti e risposte in Blogger. Ho già avuto modo di elencare tutti i fogli di stile dei commenti di Blogger con il loro significato.

Ricordo che per attivare le risposte nei commenti bisogna selezionare la modalità Incorporato in Impostazioni > Post e commenti e Consenti Feed > Completo o Fino all'intervallo in Impostazioni > Altro. Ricordarsi di cliccare su Salva impostazioni in alto a destra per attivare la nuova configurazione.

Nei template più recenti ottenuti dal Designer Modelli, se si va su Modello > Modifica HTML, nella sezione /* Comments, si dovrebbe trovare un codice come questo

.comments .comments-content .loadmore a {
  border-top: 1px solid $(widget.alternate.text.color);
  border-bottom: 1px solid $(widget.alternate.text.color);
}
.comments .comment-thread.inline-thread {
  background-color: $(post.footer.background.color);
}
.comments .continue {
  border-top: 2px solid $(widget.alternate.text.color);
}

che fissa lo stile delle righe che si vedono sotto i commenti. Personalmente ho trovato esagerati 2 pixel per la riga prima di Aggiungi commento che ho quindi sostituito con 1 mentre, per renderla diversa dalle altre linee che dividono i commenti, ho inserito dotted al posto di solid in modo da averle punteggiate invece che continue.  Se si ha un vecchio modello e questo codice non è presente, si può ovviare per esempio inserendo sopra alla riga ]]></b:skin> questo CSS

.comments .comments-content .loadmore a {
  border-top: 1px dotted #000000;
  border-bottom: 1px dotted #000000;
}
.comments .continue {
  border-top: 1px solid #000000;
}

dove il colore delle linee può essere scelto a piacere secondo le regole dei codici dei colori. Per personalizzare l'aspetto dei bottoni Rispondi, Elimina e Aggiungi un commento bisogna sempre cercare la riga </head> e incollare subito sopra questo codice

<!-- CSS dei Commenti Nidificati Inizio  -->
<style type='text/css'>
.comments .comment .comment-actions a {
  border:1px solid #DDDDDD;
  border-radius:4px;
  text-shadow:0 1px 1px #ffffff;
  text-decoration:none;
  font: bold 11px Sans-Serif;
  padding:3px 7px;
  margin-right:5px;
  white-space:nowrap;
  vertical-align:middle;
  background: #f4f4f4; 
}
.comments .comment .comment-actions a:hover {
  text-decoration:none;
  border: 1px solid #AAAAAA;
  border-bottom-color: #CCCCCC;
  border-top-color: #999999; 
}
.comment-block {
  border-bottom:1px solid #CCCCCC;
  padding-bottom:10px;
}
.comments .comments-content .loadmore a {
  display:block;
  border:1px solid #DDDDDD;
  border-radius:4px;
  text-align: center;
  text-shadow:0 1px 1px #ffffff;
  text-decoration:none;
  font: bold 20px Sans-Serif;
  padding:3px 7px;
  margin-right:auto;
  margin-left:auto;
  margin-top:-30px;
  max-width:180px;
  white-space:nowrap;
  vertical-align:middle;
  background: #f4f4f4; 
}
.comments .comments-content .loadmore a:hover {
  border: 1px solid #AAAAAA;
  border-bottom-color: #CCCCCC;
  border-top-color: #999999; 
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
  border:1px solid #DDDDDD;
  border-radius:4px;
  text-shadow:0 1px 1px #ffffff;
  text-decoration:none;
  font: bold 11px Sans-Serif;
  padding:3px 7px;
  margin-right:5px;
  white-space:nowrap;
  vertical-align:middle;
  background: #f4f4f4;
}
.comments .thread-toggle:hover {
  text-decoration:none;
  border: 1px solid #AAAAAA;
  border-bottom-color: #CCCCCC;
  border-top-color: #999999; 
}
.comments .continue a {
  width:110px;
  border:1px solid #DDDDDD;
  border-radius:4px;
  text-shadow:0 1px 1px #ffffff;
  text-align:center;
  text-decoration:none;
  font: bold 12px Sans-Serif;
  padding:3px 5px;
  margin-right:5px;
  white-space:nowrap;
  vertical-align:middle;
  background: #f4f4f4; 
}
.comments .continue a:hover {
  text-decoration:none;
  border: 1px solid #AAAAAA;
  border-bottom-color: #CCCCCC;
  border-top-color: #999999; 
}
</style>
<!-- CSS dei Commenti Nidificati Fine -->

in cui possono essere modificati i colori dei bordi e dello sfondo (background) dei pulsanti. Se ne può anche configurare la larghezza e si possono modificare i parametri quando vengono puntati dal mouse. I fogli di stile relativi sono nei blocchi con l'attributo hover. Si salva il modello e naturalmente si possono aggiungere ulteriori parametri o togliere righe che non ci interessano. Per conoscere il significato di ciascun blocco di codice vi rimando al post sull'Elenco delle classi di stile per i commenti di Blogger.

Sulla destra dello screenshot vedete numeri e lettere che indicano la numerazione dei commenti di Blogger che è visibile con tutti i browser ad eccezione di IE, lo sarà però con Internet Explorer 10 che sembra debutterà alla fine di quest'anno e per adesso si può usare solo con la versione Beta di Windows 8.