venerdì 12 aprile 2013

Grassetto, corsivo e link nei commenti. Come?





E si fa presto a dire! Già il tempo è quello che è, poi... poi il form dei commenti di Blogger proprio non aiuta.
Juhan mi ha chiesto come si può fare per inserire un link in un commento e siccome non è l'unico curioso e magari non è neanche l'unico a non masticare codice HTML, ecco che ho deciso di scrivere una mini-guida. Robetta semplice, tranquilli.

Cosa permette di inserire Blogger nei commenti?

Giustificando le eccessive restrizioni del suo form dei commenti con la lotta allo spam,  Blogger limita moltissimo l'inserimento di codice HTML nei commenti. Possiamo scrivere il nostro bel commento e fare ben poche cose in più.
Possiamo usare il GRASSETTO, il CORSIVO e/o inserire un LINK verso una qualsiasi pagina web.

In pratica, si possono usare solo i tag HTML
  1. <b>.....</b> (Bold- grassetto)
  2. <i>.....</i> (Italic - corsivo)
  3. <a>.....</a> (Anchor - link)

Per i nostri esempi di commenti useremo sempre una frase di [...] che assolutamente nessuno conosce:
"Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura
ché la diritta via era smarrita."
Prima di cominciare, però, un consiglio che è valido sempre, qualsiasi formattazione del testo vogliamo fare o qualsiasi link vogliamo inserire:
scrivere sempre il commento completo e solo alla fine preoccuparsi dei tag HTML, questo perché scrivendo contemporaneamente testo semplice con pezzi di codice HTML si rischia di confondersi e sbagliare più facilmente.

 

Come rendere grassetto una parola o una frase in un commento?

<b>.....</b> (grassetto)
Molto semplice, è sufficiente "circondare" la parola o la frase con i tag di apertura e chiusura  del grassetto che corrispondono a <b> per l'apertura e </b> per la chiusura. Notare che l'unica differenza tra i due tag è che quello di chiusura è preceduto dal carattere / (slash). Sarà così per tutti i tag di chiusura che useremo.
Passiamo subito ad un esempio pratico:
diciamo che vogliamo rendere grassetto la parte di testo "nostra vita".

Scriviamo il commento per intero senza i tag HTML
Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura
ché la diritta via era smarrita

Inseriamo i tag per il grassetto
Nel mezzo del cammin di <b>nostra vita</b>
mi ritrovai per una selva oscura
ché la diritta via era smarrita

Ed ecco il risultato che otteniamo:
Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura
ché la diritta via era smarrita


Come rendere corsiva una parola o una frase in un commento?

<i>.....</i> (corsivo)
E non sto qui a ripetere l'intera tiritera: il procedimento è perfettamente identico a quello del grassetto, cambia solo il tag che da <b>.....</b> diventa <i>.....</i>
Esempio pratico:
diciamo che vogliamo rendere corsivo la parte di testo "mi ritrovai".

Scriviamo il commento per intero senza i tag HTM

Inseriamo i tag per il corsivo
Nel mezzo del cammin di nostra vita
<i>mi ritrovai</i> per una selva oscura
ché la diritta via era smarrita

Ed ecco il risultato che otteniamo:
Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura
ché la diritta via era smarrita

Bon, ora siamo in grado di formattare i commenti con il corsivo e il grassetto.

Si, ma io voglio sapere come si inseriscono i link nei commenti

 



Calma, calma, ci arriviamo.
Ho voluto trattare prima il grassetto ed il corsivo perché per i link il procedimento è (quasi) identico (e poi a me piace usare il grassetto e/o il corsivo, a voi no?)


Come inserire un link in un commento?

<a>.....</a> (link , ad esempio al mio sito)
Anche per il link è sufficiente "circondare" la parola o la frase con i tag di apertura e chiusura  questa volta del link, che corrispondono a <a> per l'apertura e </a> per la chiusura; purtroppo però questa operazione non è sufficiente, occorre anche dichiarare il percorso della pagina web (URL) a cui il link deve puntare.
Per fare questo, il tag  <a>.....</a> utilizza un "attributo" (href="")  che va inserito nel tag di apertura, in questo modo:

<a href="">.....</a> (notare lo spazio tra a e href)

Manca ancora qualcosa: il percorso della pagina web (URL). l'URL (argomento dell'attributo) va inserito tra le due virgolette "", in questo modo:

<a href="http://www.marcosroom.it">.....</a> (come esempio di URL ho preso la mia home page, ma voi chiaramente inserirete l'URL che vi interessa, facendo attenzione ad inserire sempre anche il "prefisso" http://)


Può sembrare un po' complesso inserire link nei commenti attraverso il tag  <a href="URL">.....</a>, ma con un esempio concreto vedrete che invece è abbastanza semplice:
diciamo che vogliamo inserire un link sulla parte di testo "selva oscura" e che vogliamo che il link punti alla pagina di Wikipedia riguardante Dante (ops, l'ho detto)

Scriviamo il commento per intero senza i tag HTML
Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura
ché la diritta via era smarrita

Inseriamo i tag iniziali per il link circondando la parte di testo che ci interessa
Nel mezzo del cammin di nostra vita
mi ritrovai per una <a>selva oscura</a>
ché la diritta via era smarrita

Ora inseriamo l'attributo href=""
Nel mezzo del cammin di nostra vita
mi ritrovai per una <a href="">selva oscura</a>
ché la diritta via era smarrita

Sappiamo che la pagina di Wikipedia su Dante ha questo URL
http://it.wikipedia.org/wiki/Dante_Alighieri
Bene, inseriamo l'URL tra le virgolette
Nel mezzo del cammin di nostra vita
mi ritrovai per una <a href="http://it.wikipedia.org/wiki/Dante_Alighieri">selva oscura</a>
ché la diritta via era smarrita
 
Ed ecco il risultato che otteniamo:
Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura
ché la diritta via era smarrita

E qui finisce la storia! Semplice no?
Se qualcuno ha dubbi basta chiedere chiarimenti attraverso i commenti; proverò a rispondere a tutti.



Pensavate di cavarvela? E no, adesso... TEST, VERIFICA (dategli il nome che volete)

 
COMMENTARE, COMMENTARE, ... COMMENTARE usando il grassetto, il corsivo ed inserendo un link. Aiutatemi a capire se il post è stato esauriente e chiaro; come? Mettendo in pratica le informazioni sui possibili tag utilizzabili nei commenti di Blogger.


Avviso per i furbacchioni:
come già scritto, a Blogger non piacciono gli spam (e neanche al Tamburo Riparato), quindi niente PageRank regalato, i link saranno (lo sono sempre) nofollow. Approfittate invece per linkare a pagine utili o a pagine che ci permettano di conoscervi meglio come ad esempio un vostro eventuale sito o Blog. Link a pagine non gradite (e non c'è bisogno di specificare quali) verranno immediatamente eliminati.



34 commenti:

  1. Pensi di poter convincere zio Juhan e zia Bruna a mettere il widget per commenti che avevo suggerito tempo fa? Almeno tu provaci.. ;)
    A domani.

    (Io avevo trovato tutto qui, ma non essendo amministratore, non ho potere sul layout e sulle impostazioni del blog..)
    http://www.ideepercomputeredinternet.com/2013/01/widget-blogger-elenco.html

    RispondiElimina
    Risposte
    1. Sì, ricordo che ne avevi parlato, ma probabilmente al momento ero troppo occupata per provarci.
      Ricordo ai lettori come me poco addentro alle segrete cose di HTML che per ricordare i comandi di cui parla Marco è bene pensare al significato: "b" sta per black infatti il grassetto viene anche detto neretto, "i" sta per italic.
      Non so a cosa si riferisca "a", ma una possibilità è che voglia dire "at", esattamente come il simbolo @ negli indirizzi email(in spagnolo si chiama "arroba", misura di peso o meglio di massa di cui era appunto il simbolo).

      Elimina
    2. Dario, ho salvato il link che citi. Qual è il numero del widget che ti interessa? non appena vrò unn po' di tempo proverò a inserirlo.

      Elimina
    3. E brava Bruna, hai usato benissimo tutti e tre i tag.
      Riguardo al significati dei vari tag, ho appena aggiornato il post inserendoli, eccoli anche qui:

      ..... (Bold- grassetto)
      ..... (Italic - corsivo)
      ..... (Anchor - link)

      Elimina
    4. Vi segnalo semplicemente che nell'esempio PRATICO di inserimento del grassetto fatto nella POESIA, il grassetto non è visibile.

      Elimina
  2. @ Dario
    Il blog che (NON) hai linkato (ahi, ahi, prova ad inserire il link) è un'ottima fucina di risorse e soluzioni a vari problemi su Blogger, assolutamente da seguire.
    Puoi linkarmi la pagina precisa che parla del widget da te suggerito?
    Non prometto niente per gli zii, però intanto mi guardo il widget, che se davvero merita gli zii lo capiranno ben bene da soli.

    RispondiElimina
    Risposte
    1. Grazie, Marco! non sapevo proprio che l'HTML che uso per i post si potesse usare anche per i commenti...

      Elimina
    2. Ho provato anche con "u" (sottolineato) e "strike" (cancellato) ma dice che non è possibile accettare il codice Tag non consentito.

      Elimina
    3. Infatti come dice Marco Blogger accetta solo questi 3 tag html.
      Ma cambiando le impostazioni, può accettare anche immagini, lo so per certo.

      Elimina
    4. @ Bruna
      Purtroppo il form di Blogger accetta solo i tag che ho segnalato nel post più il tag <strong> = <b> e il tag <em> = <i>, anche se semanticamente hanno un valore diverso soprattutto per i motori di ricerca (l'effetto visivo è identico)

      Elimina
    5. @ Dario
      Hai ragione circa le immagini ed anche altro. Per farlo però bisogna lavorare sul codice del template (HTML e CSS). Non è una cosa proprio immediata.

      Elimina
  3. Ciao Marco.
    Non ho linkato perché non ho avuto tempo, ma fidati che lo so fare, l'ho fatto pochi post fa.

    Bruna, b sta per bold, "grassetto" appunto. =D

    RispondiElimina
  4. Ricordo agli zii e a chi volesse usare i codici che se non se li ricordano è meglio se li salvano in un foglio di lavoro pronto all'uso del copiaincolla.
    Io faccio così dai tempi di OdioStudioAperto, è molto più veloce.

    Marco, intendo il widget per commenti con icone, ma ci penso io e domani invio il codice a zia Bruna.

    RispondiElimina
    Risposte
    1. @ Dario
      OK, allora aspetto di sapere da voi per il widget

      Elimina
  5. Ottimo e utilissimo post, Marco! Complimenti!!!
    Provo a linkare qualcosa: un bel video relativo al brano April in Paris, eseguito dalla straordinaria pianista Beegie Adair. ;)

    RispondiElimina
    Risposte
    1. Leo, non mi funziona il link! passandoci il cursore si illuminano di rosso le parole "bel video", ma nulla più.

      Ora vi lascio, nulla mi fa più piacere di stare con voi giovani, nipoti onorari e sangue nuovo per il Tamburo, ma purtroppo ho altro da fare...

      Elimina
    2. @ Leonardo
      Grazie.
      Per il tuo link che non funziona, il problema è che manca l'attributo href=""

      Elimina
    3. @ Leonardo
      Il secondo tentativo di link è perfettamente riuscito; mi sto godendo il video, grazie.

      Elimina
    4. Questo commento è stato eliminato dall'autore.

      Elimina
  6. Bruna, a sta per àncora.
    Infatti una brutta e stupida cosa di Blogger è che non accetta ancore interne al post.
    Anche provandoci, inserisce del codice per conto suo.
    Dario.

    RispondiElimina
  7. Bravo Marco!
    Ma si sapeva diggià che Marco rockz!
    Volendo, ma solo per far vedere che non sono così niubbo una precisazione: quello che chiami prefisso "http://" in realtà sono due robe diverse. "http:" è il protocollo, altri protocolli possibili sono "ftp:", "mail:", etc. Come si vede finisce sempre con ":". Invece "//" significa radice della rete, cioè l'indirizzo che segue è assoluto. Qui potrei partire con "come fa il browser a risolvere il nome, ops, l'indirizzo" ma poi farei la figura del saputello rompiscatole. Cosa che non sono nèh!

    Bravi anche tanti altri collaboratori!
    Caricare il blog di widgets avrebbe lo svantaggio di rallentarne la visualizzazione, a volte drasticamente fino a impedirne l'uso. Se fossi saputello citerei J.Nielsen, quello sì che è saputello rompicoglioni, per cui non lo faccio. Però chi vuole può verificare facendo un salto qui. Notare che è cambiato tutto; un salto devo farlo anch'io appena ho tempo.
    Ancora: non avete idea di cosa usi la ggente per visualizzare i social-cosi: ieri durante una lezione tosta ma introduttiva al Poli ci sono stati più di 150 tweets, molti li avranno letti su smartphones, tablets e altri di quegli affari che si usano adesso.

    Bruna cita la Wiki (anche questa meriterebbe un post à la Marco) nella versione spagnola e salta fuori l'arroba che usano (come parola) anche i cugini francesi. Ci sarebbe una luuunga bedtime story, di quelle che non sapresti mai come va a finire perché di sicuro ti addormenti prima.

    Sapete qual è la cosa più bella del blog?
    Vado a dormire aspirinato alle venti di sera per via dell'influenza e al mattino dopo mi trovo tutta questa roba!
    Sigh!

    (Sì sono logorroico, lo so).

    RispondiElimina
    Risposte
    1. @ Juhan
      Mi serviva una scusa per scrivere il post e una "cavia" a cui indirizzare le informazioni (a chi dare la colpa :) ), e proprio perché so che non sei niubbo (caro il mio Ing.), ho scelto te, anche perché sei stato l'ultimo a farmi la domanda diretta.
      E proprio perché non sei niubbo ti dico che hai perfettamente ragione riguardo al fatto di aver chiamato prefisso "http://".
      Il post è mirato soprattutto a persone con poca dimestichezza, quindi mi è sembrato inopportuno andare a specificare di quali parti si compone un URL. Ho preferito utilizzare il termine "prefisso", che comunque lascia intendere qualcosa da inserire prima.
      Quindi hai ragione quando parli di protocollo "http:", e ragione anche per il "//", anche se hai giustamente usato un linguaggio non tecnico per far capire la cosa a tutti. (Per i più curiosi e smanettoni, ecco la sintassi degli URI, i fratelli maggiori degli URL: wikipedia).
      Sempre per precisione, attenzione al protocollo "mail:", che non esiste, ma intendevi sicuramente "mailto:".

      Per il resto del tuo commento hai toccato vari argomenti che diventa impossibile rispondere a tutti; diciamo che sono tendenzialmente d'accordo con te, soprattutto con il moderato uso dei Widget.

      PS:
      un augurio all'aspirinomane di riprendersi al più presto

      Elimina
    2. Beccato! Non bisogna mai fidarsi di sé anche quando ti sembra di essere sicuro! Hai perfettamente ragione, mailto: adesso lo scrivo mille volte: for c in range(1000):; print "mailto:".
      Ancora complimenti. E dai commenti risulta chiaro che il post è piaciuto, parecchio. Anche a me.

      Elimina
  8. Ciao Marco e zietti vari.
    Il widget per il blog di cui parlavo è questo.

    RispondiElimina
  9. Ok, ho voluto fare lo sborone e provare a scrivere il codice da solo.

    In realtà il link è questo.. (ah, ho capito, ho dimenticato l'uguale.. href =

    RispondiElimina
    Risposte
    1. @ Dario
      Mi ero già imbattuto sulla pagina che hai linkato. Il widget è carino, ad occhio non credo appesantisca molto la pagina, ora sta ai "commander" decidere, io, se serve, posso dare una mano.

      Elimina
  10. scusa, voglio solo fare una prova col corsivo
    Grazie mille!

    RispondiElimina
  11. Bello questo Blog! Ho imparato quello che non sapevo fare.
    Io mi occupo di ascoltare i Rumors di tecnologia, ma in verità molte cose non le dicono :)
    Clicca qui per visitare il mio blog!

    RispondiElimina