Sono possibili molte personalizzazioni riguardo ai colori, dimensioni del testo, bordi, numero dei commenti visualizzati e stile del widget. Ecco un esempio del gadget inserito in una sidebar piuttosto stretta
La larghezza del widget si adatterà automaticamente a quella della sezione del layout in cui verrà inserito. L'installazione è semplicissima visto che non c'è da caricare nessun file e non occorre modificare il modello. Si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla in Sezioni del sito il codice qui sotto. Prima di salvare l'elemento si può anche aggiungere un Titolo
<script type="text/javascript">
//By Parsifal32 - www.ideepercomputeredinternet.com
function commentirecenti(json) {
for(var i=0; i < numero; i++) {
var uc1=json.feed.entry[i];var uc2;
if(i==json.feed.entry.length)break;
for(var k=0; k < uc1.link.length; k++) {
if(uc1.link[k].rel=='alternate') {
uc2=uc1.link[k].href;break;
}
}
uc2=uc2.replace("#","#comment-");
var uc3=uc2.split("#");
uc3=uc3[0];
var uc4=uc3.split("/");
uc4=uc4[5];
uc4=uc4.split(".html");
uc4=uc4[0];
var uc5=uc4.replace(/-/g," ");
uc5=uc5.link(uc3);
var uc6=uc1.published.$t;
var uc7=uc6.substring(0,4);
var uc8=uc6.substring(5,7);
var uc9=uc6.substring(8,10);
var d_uc=new Array();
d_uc[1]=" di Gennaio"; d_uc[2]=" di Febbraio"; d_uc[3]=" di Marzo"; d_uc[4]=" di Aprile";
d_uc[5]=" di Maggio"; d_uc[6]=" di Giugno"; d_uc[7]=" di Luglio"; d_uc[8]=" di Agosto";
d_uc[9]=" di Settembre"; d_uc[10]=" di Ottobre"; d_uc[11]=" de Novembre"; d_uc[12]=" de Dicembre";
if("content" in uc1){
var uc10=uc1.content.$t;
} else if("summary" in uc1) {
var uc10=uc1.summary.$t;
} else var uc10="";
var re=/<\S[^>]*>/g;
uc10=uc10.replace(re,"");
if(data_uc==true){
document.write('Il '+uc9+' '+d_uc[parseInt(uc8,10)]);
}
document.write('<ul><li><b>' + uc1.author[0].name.$t + '</b>');
if(titolo==true){
document.write(' ha commentato ');
document.write(uc5);
}
document.write('...: ');
document.write('<a href="' + uc2 + '">');
if(uc10.length < riassunto) {
document.write(uc10);
} else {
uc10=uc10.substring(0,riassunto);
var uc11=uc10.lastIndexOf(" ");
uc10=uc10.substring(0,uc11);
document.write(uc10+'…');
}
document.write('</a></li></ul>');
if(i < numero-1){
document.write('<hr style="border: solid 1px #003366;"/>');//Stile della riga orizzontale di divisione tra i commenti
}
}
document.write('<div style="font-size:60%;text-align:center"><p><a href="http://goo.gl/XfUAh">Install Widget</a></div>');
}
</script>
<script type="text/javascript">
var numero=4;
var data_uc=true;
var titolo=true;
var riassunto=100;
</script>
<div style="border:3px double #003366; font-size:12px; padding:4px 4px 4px 4px;color:#940F04;text-align:left;margin:0px auto; background-color:#dddddd;">
<script src="http://www.ideepercomputeredinternet.com/feeds/comments/default?alt=json-in-script&callback=commentirecenti"></script></div>
//By Parsifal32 - www.ideepercomputeredinternet.com
function commentirecenti(json) {
for(var i=0; i < numero; i++) {
var uc1=json.feed.entry[i];var uc2;
if(i==json.feed.entry.length)break;
for(var k=0; k < uc1.link.length; k++) {
if(uc1.link[k].rel=='alternate') {
uc2=uc1.link[k].href;break;
}
}
uc2=uc2.replace("#","#comment-");
var uc3=uc2.split("#");
uc3=uc3[0];
var uc4=uc3.split("/");
uc4=uc4[5];
uc4=uc4.split(".html");
uc4=uc4[0];
var uc5=uc4.replace(/-/g," ");
uc5=uc5.link(uc3);
var uc6=uc1.published.$t;
var uc7=uc6.substring(0,4);
var uc8=uc6.substring(5,7);
var uc9=uc6.substring(8,10);
var d_uc=new Array();
d_uc[1]=" di Gennaio"; d_uc[2]=" di Febbraio"; d_uc[3]=" di Marzo"; d_uc[4]=" di Aprile";
d_uc[5]=" di Maggio"; d_uc[6]=" di Giugno"; d_uc[7]=" di Luglio"; d_uc[8]=" di Agosto";
d_uc[9]=" di Settembre"; d_uc[10]=" di Ottobre"; d_uc[11]=" de Novembre"; d_uc[12]=" de Dicembre";
if("content" in uc1){
var uc10=uc1.content.$t;
} else if("summary" in uc1) {
var uc10=uc1.summary.$t;
} else var uc10="";
var re=/<\S[^>]*>/g;
uc10=uc10.replace(re,"");
if(data_uc==true){
document.write('Il '+uc9+' '+d_uc[parseInt(uc8,10)]);
}
document.write('<ul><li><b>' + uc1.author[0].name.$t + '</b>');
if(titolo==true){
document.write(' ha commentato ');
document.write(uc5);
}
document.write('...: ');
document.write('<a href="' + uc2 + '">');
if(uc10.length < riassunto) {
document.write(uc10);
} else {
uc10=uc10.substring(0,riassunto);
var uc11=uc10.lastIndexOf(" ");
uc10=uc10.substring(0,uc11);
document.write(uc10+'…');
}
document.write('</a></li></ul>');
if(i < numero-1){
document.write('<hr style="border: solid 1px #003366;"/>');//Stile della riga orizzontale di divisione tra i commenti
}
}
document.write('<div style="font-size:60%;text-align:center"><p><a href="http://goo.gl/XfUAh">Install Widget</a></div>');
}
</script>
<script type="text/javascript">
var numero=4;
var data_uc=true;
var titolo=true;
var riassunto=100;
</script>
<div style="border:3px double #003366; font-size:12px; padding:4px 4px 4px 4px;color:#940F04;text-align:left;margin:0px auto; background-color:#dddddd;">
<script src="http://www.ideepercomputeredinternet.com/feeds/comments/default?alt=json-in-script&callback=commentirecenti"></script></div>
Le personalizzazioni da effettuare riguardano i seguenti elementi
- Al posto di "ha commentato" e "il" si possono inserire anche altre espressioni
- document.write('<hr style="border: solid 1px #003366;"/>'); rappresenta lo stile della riga orizzontale di divisione tra commenti. Se ne può scegliere il colore (#003366;) attraverso i codici dei colori esadecimali, lo spessore (1px) e lo stile del bordo (solid)
- var numero=4; indica il numero dei commenti che si vogliono visualizzare
- var data_uc=true; mostrerà la data del commento. Se si sostituisce true con false non sarà invece visualizzata.
- var riassunto=100; rappresenta il numero dei caratteri della parte iniziale del commento da mostrare nel widget
- border:3px double #003366; è l'aspetto del box esterno del widget e può essere personalizzato come colore, dimensione e stile dei bordi.
- font-size:12px; è la dimensione dei caratteri del testo del widget
- padding:4px 4px 4px 4px; è la distanza tra il contenuto del widget e il box esterno. Le distanze sono in senso orario a partire da quella in alto
- background-color:#dddddd; rapprenta il colore di sfondo del widget. Se non lo vogliamo, lo possiamo togliere o mettere #ffffff;
- text-align:left; indica il testo allineato a sinistra. Si può sostituire left con right o center con ovvio significato
- Per concludere inserite l'URL del vostro blog al posto della homepage di questo sito.
L'elemento pagina si può spostare a piacimento andando su Design > Elementi pagina con il drag & drop del mouse.
Aggiornamento: Se si vuole creare uno spazio tra commento e commento si può inserire questa riga
document.write('<br/>');
tra
if(i < numero-1){
e
document.write('<hr style="border:...
Alternativamente si può sempre incollare la stessa riga tra
if(data_uc==true){
e
document.write('Il '+uc9+' '+d_uc...
Si possono inserire tutti questi salti di riga contemporaneamente se si vuole un box con i commenti ben divisi tra di loro.
Ciao! Ma il colore del testo non può essere modificato?
RispondiElimina@Christian
RispondiEliminaIl colore del testo iniziale è questo
color:#940F04; e può essere modificato. Il testo del commento viene invece ereditato dai colori del blog, sarà cioè uguale a quello degli altri widget.
Grazie per la risposta così tempestiva.
RispondiEliminaPensavo si potesse modificare anche il colore del testo del widget...
Approfitto per una domanda: non trovo più i menu verticali da mettere come widget a destra (il sito è http://giordanochristian.com). Tempo fa lo avevo visto. Nella pagina delle demo non c'è più, e se si clicca su "menu verticale a tendina" si apre una pagine di errore...
la riga di divisione dei commenti non è staccata dall'autore del commento seguente .. risulta appiccicata e pur lavorando sui 4 padding il risultato non cambia avrei bisogno di un a capo tipo br ma non so dove metterlo tra la linea document write e il commento seguente
RispondiElimina@Christian
RispondiEliminaSe mi dai il link del menù vedo cosa è successo.
@Tex Willer
Devi aggiungere la riga
document.write('
');
dopo il commento
//Stile della riga orizzontale di divisione tra i commenti
creando una nuova riga.
Dovrebbe funzionare. Ciao
dopo quel commento ho 2 graffe di chiusura e anche inserendo la riga da te fornita in varie posizioni subito sotto o dopo le graffe o tra le medesime il risultato è la scomparsa di tutti i commenti .. rimane il riquadro del widget vuoto
RispondiElimina@Tex
RispondiEliminascusa non è venuto giusto il codice, non l'ha preso. Non so come fare a mandartelo...
Devi mettere
RispondiElimina< br/ > in mezzo alle due virgolette. Prima però devi togliere gli spazi che ho inserito dopo il minore e prima del maggiore
dopo il commento
RispondiElimina//Stile della riga orizzontale di divisione tra i commenti
creando una nuova riga
tra le due graffe chiuse "}"
adesso funziona e lascia spazio tra commenti
grazie :)
@Tex
RispondiEliminaPer maggiore chiarezza ho aggiornato il post
http://www.ideepercomputeredinternet.com/2009/07/come-creare-un-menu-espandibile-da.html
RispondiEliminail link "menu verticale a tendina"
@Christian
RispondiEliminaGrazie della segnalazione. Adesso il link funziona e rimanda correttamente a questa pagina
http://www.ideepercomputeredinternet.com/2009/07/come-creare-un-menu-tendina-drop-down.html
ciao volevo chiederti una cosa:
RispondiEliminanon esiste un widget o gadget da inserire sul mio blog dove vengono visualizzati i commenti che io lascio su altri blog?!!!
@StelleGemelle
RispondiEliminaMolto interessante ma decisamente complicato da realizzare. Bisognerebbe che Google facesse diventare Blogger social come fosse Facebook ma la vedo molto difficile che accada :D
grazie mille comunque!!!!
RispondiEliminacontinuerò a riempire fogli di appunti per ricordarmi dove lascio commenti!!!
ciao ciao!!:)))
ciao..ottimo widget! Non è possibile far comparire oltre la data anche l'orario del commento?
RispondiElimina@Giuseppe
RispondiEliminaCon questo widget no.
Ho appena scoperto il tuo blog e sono davvero entusiasta dei tuoi articoli.
RispondiEliminaho installato questo widget sul mio blog, ma ho preferito rimuovere la scritta "installa ora". Spero non sia un problema :)
@Iracondia
RispondiEliminaNon è un problema, mi dà solo fastidio quando mi chiedono a me come fare a eliminare il credit che inserisco in qualche widget.
Grazie :)
RispondiEliminain ogni caso dimenticavo di dirti che poichè mi sembra giusto tutelare la tua proprietà intellettuale, ho inserito esplicitamente nella casella "Credits", presente nella barra sinistra del mio blog, che il widget dei commenti è di proprietà del tuo sito, con tanto di link cliccabile.
grazie mille sei stato chiarissimo ed ho prelevato il codice!!!!
RispondiEliminaCiao. Grazie per il suggerimento.Una domanda però: ho inserito il codice e sostituito il tuo indirizzo con quello del mio blog. Il gadget esce fuori perfettamente solo con una piccola sorpresa:i commenti che mette sono quelli del tuo sito e non quelli del mio. Eppure nel gadget il tuo url non c'è ma c'è solo il mio. Dove ho sbagliato? Mi puoi dare cortesemente una risposta? Ciao e grazie ancora.
RispondiElimina@# L'indirizzo lo devi sostituire nella penultima riga cioè questo codice
Eliminasrc="http://www.ideepercomputeredinternet.com/feeds/comments/default?
Hai ragione. Avevo sostituito solo l'ind all'inizio del codice e non avevo visto che c'era un altro anche nella penultima riga. Adesso funziona eccome...:) Ti ringrazio moltissimo. Ciao. Ricky
RispondiEliminacome potrei inserire nel blog un box che sia visibile in tutte le pagine e nel quale i visitatori possono lasciare commenti?
RispondiEliminaPuoi usare una chat
Eliminahttps://www.ideepercomputeredinternet.com/2015/06/installare-chat-blogger.html
ma un'ottima soluzione è quella di mostrare un widget di Twitter con gli ultimi tweet di un particolare hashtag che puoi configurare da questa pagina
https://twitter.com/settings/widgets
@#
Scusa. Ho sbagliato. Non si può più configurare il widget da lì ma si deve usare questa pagina
Eliminahttps://publish.twitter.com/
@#