Pubblicato il 29/08/13e aggiornato il

Come inserire un link a una immagine in un post di Blogger.

Come inserire collegamenti alle immagini nell'Editor di Blogger.
I più esperti potrebbero considerare il titolo del post come una vera banalità ma per i meno abituati a giocare con il codice non è affatto così. È noto che usando Windows Live Writer per confezionare i post questo problema non esiste visto che dopo aver inserito una immagine basterà selezionarla con il mouse per poi cliccare sulla icona Collegamento ipertestuale per inserirvi un link incollandone l'URL.

Sempre su WLW si possono inserire le immagini con link alla immagine di origine o senza tale collegamento. All'atto pratico le immagini collegate al proprio URL si apriranno in un'altra scheda del browser quando ci si cliccherà sopra mentre quelle senza collegamento non potranno essere cliccate.
È proprio alle foto senza collegamento che sarà possibile associare un link in modo che chiunque ci clicchi sopra aprirà una nuova pagina web nella stessa scheda o in un'altra. Con l'Editor di Blogger è più complicato inserire un link a una immagine perché l'icona apposita non sempre funziona a dovere. Quando si clicca sull'icona dell'Editor per inserire una immagine nel post abbiamo varie opzioni

immagine-editor-blogger
  1. Caricare la foto direttamente dall'hard-disk
  2. Selezionare una foto già presente nel blog visto che ciascun blog crea un suo album
  3. Aggiungere immagini da Picasa
  4. Scattare una istantanea con la webcam
  5. Inserire l'immagine incollando il suo URL diretto

Si visualizzerà l'anteprima della immagine o delle immagini e si andrà in basso su Aggiungi selezionate per inserirle nell'articolo del blog.

A COSA SERVE METTERE UN LINK A UNA FOTO?


Le ragioni per cui si desideri mettere un collegamento a una immagine che non sia quello del suo URL diretto possono essere molteplici. La foto può essere quella di una ricetta e il link serve per rimandare al post sulle istruzioni. Si può postare l'immagine di un prodotto e mettere il collegamento a un articolo con la nostra recensione. Il prodotto in questione può anche essere immateriale come un software o un ebook.

COME SI METTE UN LINK A UNA IMMAGINE?


Il codice da usare per creare un collegamento ipertestuale in una immagine è il seguente

<a href="URL_DEL_LINK" target="_blank"/><img src="URL_DELLA_FOTO" alt="nome-foto" title="Titolo della foto"/></a>

e può essere incollato andando in Modalità HTML dell'Editor di Blogger. I parametri riguardano
  1. L'URL_DEL_LINK è l'indirizzo della pagina web collegata che si apre quando ci si clicca sopra
  2. target="_blank" è un tag opzionale per aprire il link in un'altra scheda 
  3. L'URL_DELLA_FOTO è il link diretto della foto caricata per esempio su Picasa Web Album
  4. alt="nome-foto" è il Testo Alternativo ed è ciò che si vede quando il browser non riesce a aprire la foto per la lentezza della connessione o perché il server in cui è hostata sia irraggiungibile. Usare il tag Alt è molto importante in ottica SEO per migliorare il rank del sito
  5. title="Titolo della foto" è meno importante per il SEO ma lo è per i visitatori visto che è quello che si legge nel tooltip quando si passa con il mouse sopra alla foto stessa. Quando si linka una immagine come "title" può essere messa una istruzione come per esempio "Clicca per .. "

COME SI INSERISCE UN LINK A UNA IMMAGINE GIA' NEL POST


Se abbiamo già confezionato l'articolo con le relative immagini vediamo come si possa inserire un collegamento. Se l'immagine è stata inserita incollando l'URL diretto è possibile inserire il collegamento selezionando l'immagine e andando su Inserisci link

inserisci-link-immagine

Se si va su HTML si vedrà un codice molto simile a quello canonico per le immagini con link

immagine-link-blogger


Come si vede dallo screenshot il link è evidenziato di giallo mentre l'URL diretto della foto è evidenziato di viola. Se invece la foto è stata inserita con uno degli altri metodi si potrà sempre usare l'icona Inserisci link ma avendo attenzione di non cancellare la foto. In ogni caso per essere sicuri che il collegamento funzioni è bene andare su HTML e sostituire il nostro link a quello della immagine


immagine-con-link

Nello screenshot si vede lo stesso URL evidenziato di giallo come link e evidenziato di viola come URL della immagine. Per linkare la foto basta sostituire l'occorrenza dopo href=" con l'URL del collegamento

link-immagine-blogger

Concludo osservando che per togliere il collegamento all'immagine di origine nell'Editor di Blogger per impedire che venga cliccata e aperta in un'altra scheda basta selezionarla e cliccare su Inserisci link. Ogni tanto un post per neofiti del blogging ci sta...




13 commenti :

  1. vorrei sapere se è possibile inserire più link ad una foto su un post di blogger. Per esempio un mappamondo con l'indicazione di più località sulle quali cliccarci ed accedere ad un'altra pagina del blog, ovviamente, riguardante la località cliccata

    RispondiElimina
    Risposte
    1. Ovviamente non si può fare senza suddividere l'immagine in altre secondarie tipo CSS Sprite. Credo che sia cosa piuttosto complicata. Se ti interessa una mappa ci sono dei sistemi per inserire link, immagini e annotazioni nelle mappe. Penso che dovresti seguire quel sistema. Si possono anche aprire più link contemporaneamente
      http://www.ideepercomputeredinternet.com/2012/09/link-schede-browser.html
      ma non credo sia quello che cerchi
      @#

      Elimina
  2. ciao volevo chiederti come posso richiedere i prodotti nel mio blog?spiego meglio io vorrei mettere immagine del prodotto e parlarne un sul mio blog gratis...vorrei farmi mandare video e aggiornamenti del prodotto e metterli nel blog è legale?devo chiedere i permessi a loro iscrivendomi al loro sito?quelli che mi mandano tramite mail li posso usare nel blog?e con adsens come devo fare se voglio " x " prodotto nel mio blog?non so come fare sto ancora aspettando l ok di google grazie

    RispondiElimina
    Risposte
    1. E queste cose le chiedi a me? Non so neppure di che prodotti si tratta? Devi parlare con il supporto dell'azienda con cui collabori
      @#

      Elimina
  3. Buongiorno Ernesto.
    Chiedo preventivamente scusa per l'off topic, ma mi pare di ricordare un tuo articolo dove spiegavi come inserire in uno, o forsè più post del blog, una piccola immagine in alto nel post appunto, tipo "New". Ricordo male?

    RispondiElimina
    Risposte
    1. In questo articolo c'è il tutorial perinserire i ribbon New e Old
      http://www.ideepercomputeredinternet.com/2013/09/ribbon-new-blogger-post.html
      @#

      Elimina
  4. salve, ho un piccolo problema, prima se cliccavo inserisci link per un'immagine all'interno di un post era tutto ok e quella foto riportava ad un'altra pagina, ma ultimamente sembra che l'abbia inserito, ma poi non lo apre perché cliccando sulla foto mi dice "the content faild to load". Ho toccato qualcosa che non dovevo?

    RispondiElimina
    Risposte
    1. Non credo. Il significato della frase in inglese è che il contenuto, cioè l'immagine, non è stato caricato. Forse è un bug momentaneo di Blogger. Per risolvere fino a quando non è tornato tutto normale carica le immagini direttamente su Picasa e poi inserisci il link con il codice mostrato in questo post
      @#

      Elimina
    2. Grazie per la risposta! ho notato che i link inseriti nelle foto me li apre solo se clicco con CTRL, in un'altra scheda in pratica, non direttamente (compare sempre quella frase d'errore). Non è una cosa strana?

      Elimina
  5. Ciao, ma se volessi ingrandire l'immagine quando si apre su un'altra pagina?
    Grazie

    RispondiElimina
    Risposte
    1. Devi usare il tag width. Faccio un esempio pratico. Se tu incolli questo codice nel tuo blog

      <a href="http://lorempixel.com/800/600" target="_blank"/><img src="http://lorempixel.com/800/600" width="300" /></a>

      vedrai una foto larga 300 pixel mentre chi ci cliccherà sopra aprirà un'altra scheda con la foto a grandezza originale di 800 pixel.
      @#

      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.