19 gennaio 2010

Come numerare i commenti in un blog su Blogger con delle icone personalizzate.

In un blog su Blogger potrebbe essere utile numerare i commenti, non solo per questioni puramente estetiche ma anche per esigenze pratiche. Infatti un singolo commento può essere immediatamente individuato dal suo numero. Questo vale soprattutto per i blog che sono molto commentati che non sono necessariamente anche i più visti. C'è da dire che in molti modelli questa personalizzazione è già presente.

Coloro che non avessero un template di questo genere e fossero interessati a personalizzarlo in questo senso possono dare uno sguardo al post delle icone numerate nel mio blog di prova. Accanto ai commenti che ho inserito come prova si vede una immagine con un numero progressivo

commenti-numerati-1

Dico subito che è ulteriormente personalizzabile l'icona, la sua posizione, il colore dei numeri in situazione normale e quando si puntano con il mouse.

Andare su Layout > Modifica HTML e salvare il modello completo. Espandere i modelli widget e cercare la riga di codice

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

e, immediatamente sopra, incollare quest'altra riga

<script type='text/javascript'>var CommentsCounter=0;</script> <!-- NUMERO COMMENTI INIZIO -->

come mostrato dallo screenshot

commenti-icone-2

 

Successivamente cercare questo codice

 <data:commentPostedByMsg/>

e, subito sopra, incollare quest'altro codice

<!-- NUMERO COMMENTI INIZIO -->
<span class='comm-num'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
<!-- NUMERO COMMENTI FINE -->

come mostrato dallo screenshot

commenti-icone-3

Salvare il modello. Dobbiamo adesso creare uno stile per le icone che visualizzeremo nei nostri commenti. Cercate la riga

</head>

e, immediatamente sopra, incollate il seguente codice

<!-- NUMERO COMMENTI INIZIO -->
<style type='text/css'>
.comm-num a:link, .comm-num a:visited {
color: white !important;
text-decoration: none !important;
background: url(http://goo.gl/1gmo) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 25px;
margin-top: -5px; /*posizione-del-contatore*/
text-align: center;
font-family: &#39;Century Gothic&#39;,&#39;Lucida Grande&#39;,Arial,Helvetica,Sans-Serif,Trebuchet MS;
font-size: 15px;
font-weight: normal;
}

.comm-num a:hover, .comm-num a:active {
color: red !important;
text-decoration: none !important;
}
</style>
<!-- NUMERO COMMENTI FINE -->

Le personalizzazioni da fare sono le seguenti

  1. white indica il colore del numero e può essere scelto a seconda del colore dell'icona. Ricordarsi di inserire i colori in lingua inglese, perché l'italiano non viene riconosciuto (black, blue, red, yellow, grey, green, ecc)
  2. 50px e 48px sono le dimensioni che volete abbia la vostra icona e possono essere scelte in funzione del modello
  3. 25px e -5px sono le distanze dal margine destro e dal margine alto dell'icona; questi numeri servono per posizionarla al meglio, dipendono dal template e possono sempre essere modificati in un secondo momento
  4. red è il colore del numero quando viene puntato dal mouse ed è opportuno metterlo diverso dal colore precedente ma adatto a quello dell'icona
  5. http://goo.gl/1gmo è l'URL dell'immagine che abbiamo scelto come icona. Da notare che ho accorciato l'URL con il servizio Goo.gl.

Ecco l'ultimo screenshot dell'inserimento

commenti-icona-4

Non resta che salvare il modello per l'ultima volta.

Per agevolarvi nella scelta dell'icona più giusta ne posto una serie di 27

                       

 

                       

 

               

 

 

Per acquisire l'URL di quella più adatta al vostro modello o al vostro senso estetico, cliccateci sopra con il mouse e copiate l'indirizzo direttamente nella barra del browser. Questo potrà così essere sostituito a http://goo.gl/1gmo, nell'ultimo blocco di codice da inserire.

Fonti | Webaholic e Bloggerstop da cui ho preso anche le immagini delle icone.




7 commenti :

  1. Potrei sapere dove inviarti una e-mail, perchè non conosco alcuni termini specifici e vorrei chiederti alcune cose, perchè come ho già scritto non so dove cercare per colpa della mia ignoranza in merito.

    RispondiElimina
  2. @Clodette
    rispondo cumulativamente ai due commenti che hai lasciato.
    1)Quelle figure rettangolari si chiamano banner in generale e antipixel in particolare quando sono di misura piccola cioè 80x15 pixel
    2)Puoi comunicare con me attraverso il modulo dei contatti che si trova in questa pagina
    http://parsifal32.blogspot.com/p/modulo-per-contattarmi.html
    3)Se hai un blog su Blogger ti prego di loggarti con il tuo sito e non di inserire solo un nome generico. In questo modo posso controllare "de visu" la situazione e dare risposte più pertinenti
    4)Nel caso tu abbia un blog successivamente mi potrai consultare anche via chat.
    Ciao

    RispondiElimina
  3. Clodette (mi scusi)08 febbraio 2010 13:50

    Scusa, non so se mi hai risposto all'e-mail, e se lo hai fatto non mi è arrivata, forse per una mia sbadatezza o distrazione nel difitare l'indirizzo e-mail. Ti prego di ricopiare la mail e inviarla di nuovo la mail al contatto my---crazy---world@live.com O ishow@live.it

    RispondiElimina
  4. @clodette
    non mi è arrivata nessuna email altrimenti avrei risposto.Per contattarmi riempi il modulo in questa pagina con i tuoi dati e la tua domanda.
    Ciao

    RispondiElimina
  5. Allora mi scusi, avrò sbagliato ad inviare. Ora riprovo.

    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.