Pubblicato il 31/03/12e aggiornato il

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.

commenti-blogger-personalizzazione-pulsanti

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.




5 commenti :

  1. e me pare tuttora non stabilizzata poichè l orario commenti è tuttora sballato, io finchè non lo sistemano non aggiungo + codici :-(

    RispondiElimina
  2. Io purtroppo da quando hanno fatto l'update non riesco più a rispondere ai commenti sul mio blog. Prima andava! Uffa!

    PS: Complimenti per il tuo bellissimo blog!

    RispondiElimina
  3. E questi &quot al posto delle " come si eliminano! Ahi il mondo dei blog! che giungla! Un attimo va, un attimo no...ed io resto a piedi...

    RispondiElimina
    Risposte
    1. @Ckay
      Il modello di Blogger non supporta alcuni caratteri speciali e i normali tag HTML che vengono convertiti in linguaggio XML. C'è anche questo strumento per farlo
      http://blogcrowds.com/resources/parse_html.php
      Ti conviene modificare il nickname

      Elimina
    2. Grazie ...
      Peccato! Però il nome non lo posso proprio cambiare.

      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.