Personalizzare i pulsanti Rispondi e Elimina nei commenti nidificati di Blogger.

Come personalizzare i link Rispondi, Elimina e Aggiungi un commento nei commenti nidificati di Blogger.

Dopo che ho tenuto i commenti di Google+ per qualche mese sono dovuto tornare ai commenti classici di Blogger perché il modulo di Google+ non si mostrava più nei vecchi post impedendo ai lettori di interagire, con il risultato che alcuni di loro, a ragione, mi inviavano delle email o peggio ancora dei messaggi privati su Facebook in cui mi chiedevano delle delucidazioni. I lettori abituali di questo sito sanno quanto mi diano fastidio questi tipi di approccio visto che dedico solo una parte del mio tempo al blog e voglio essere io a decidere quale parte e non amo avere continue notifiche sul cellulare a cui tra l'altro non posso rispondere in modo adeguato visto che mi mancano gli strumenti di ricerca.

L'estetica dei commenti nidificati di Blogger è però di tipo minimalista con dei pulsanti formati da del semplice testo per rispondere o eliminare il commento

Il pulsante Elimina viene visto solo dal proprietario del blog che può cancellare solo il contenuto dei commenti o eliminarli in modo irreversibile. L'obiettivo è di arrivare a una situazione così



Dopo aver salvato il template si va su Modello > Modifica HTML e si clicca dove mostrato dalla freccia nello screenshot seguente

In questo modo si aprirà la sezione b:skin che contiene i fogli di stile del template. Tale sezione sarà tutta colorata di blu. Si scorre fino a trovarne la fine cioè fino alla riga ]]></b:skin>. Siamo soliti inserire i nuovi CSS subito sopra a questa riga affinché non interferiscano con gli altri. Dopo aver verificato che tale riga non abbia una parentesi graffa in più ci si clicca con il mouse e si preme su Invio per creare uno spazio vuoto subito sopra. In tale spazio si incolla questo codice

/* Stile dei commenti nidificati */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Colore del link */background:linear-gradient(to bottom, #fcadad 5%, #f72a2a 100%); /* Gradiente del pulsante*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcadad', endColorstr='#f72a2a',GradientType=0);
background-color:#fcadad; /* Colore dello sfondo */
border:1px solid #d83526; /* Colore del bordo */
border-radius:4px; /* Raggio di curvatura del pulsante */
box-shadow: 0px 8px 12px -5px #f6b8b1;  /* Ombreggiatura pulsante */
text-decoration: none;
text-shadow:0px 1px 0px #cb584f; /* Ombreggiatura testo */
padding: 5px 9px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-family:Georgia;
font-size:13px;
font-weight:bold;
font-style:italic;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
color:#1FE0C9; /* Colore del testo al passaggio del mouse */
text-decoration:none;
position: relative;
bottom: 1px; /* Salto in alto e a sinistra di 1 pixel */
right: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 24px;
font-weight: bold;
font-family: Georgia;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}

Si salva il modello. I codici dei colori sono stati scelti in base ai colori presenti in questo layout e possono essere cambiati con altri più adatti al vostro blog. Accanto a ciascun codice di un colore ho messo un commento che indica a cosa si riferisca. Si può anche modificare lo stile del bordo e anche la famiglia di font (Georgia). Le righe colorate di viola servono per mostrare il testo dei pulsanti in grassetto e corsivo. I pulsanti hanno anche un gradiente vale a dire un colore iniziale che poi sfuma in un altro. 

Per trovare i toni di colore giusti per il vostro layout potete utilizzare il tool Oto255 che permette di scurire o schiarire un colore di una o più tonalità. Con questo codice tutti i pulsanti avranno lo stesso aspetto. Volendo però si possono creare degli stili diversi per ciascun bottone. Ricordo che quello Elimina viene visto solo dall'autore e quindi non vale la pena di perderci troppo tempo.

Se desideriamo mostrare i pulsanti diversi dobbiamo dividere i CSS che invece qui sono tutti uniti come mostrato nelle righe colorate di blu.

Per il pulsante Risposta dovremo creare questa regola

.comments .thread-toggle a {
Inserire i CSS relativi al pulsante Risposta
}

mentre per il bottone Aggiungi un commento dovremo creare questo CSS

.comments .continue a {
Inserire i CSS relativi al pulsante Aggiungi un commento
 }

Un aspetto gradevole di questa sezione del sito potrebbe portare a un maggior numero di commenti. Tutte le volte che il mouse passerà sopra ai bottoni il suo testo si colorerà diversamente e il bottone avrà uno spostamento di un pixel lateralmente e verticalmente. Chi vuole commentare per primo?