Tutorial – Come Creare un Link tra un’Immagine e una Pagina Web {nella Colonna Laterale}

Oggi impariamo come creare un link diretto tra un’immagine e una pagina web. Ciò significa che cliccando su una foto, un banner o un logo nella sidebar, i visitatori del nostro blog verranno condotti ad un’altra pagina di nostra scelta.

Negli articoli precedenti con tag Migliora il tuo Blog, abbiamo visto come creare un banner o modificare un’immagine usando PhotoBucket. In realtà, è possibile  linkare qualsiasi  immagine vogliate, purché si trovi nel vostro album PhotoBucket. {Istruzioni – come caricare una foto su PhotoBucket}.

IMMAGINE NELLA SIDEBAR {CON LINK DIRETTO A UNA PAGINA}

Un esempio sono i bannerini che trovate nella colonna laterale di C’è crisi! Cliccandoci sopra portano direttamente al post del linky party.

Un altro esempio sono le icone sociali che si trovano nella sidebar di sinistra e che portano direttamente alle mie pagine di Facebook, Goggle Plus, etc.

Script di base

<a href="INDIRIZZO WEB DEL SITO O PAGINA" title="TESTO VISUALIZZATO PASSANDO IL MOUSE SOPRA ALL’IMMAGINE="_blank"><img src="LINK DIRETTO IMMAGINE" alt="TESTO ALTERNATIVO..." style="border: medium none;" />

Cosa serve per linkare un’immagine ad una pagina web?

1.     link diretto dell’immagine*

2.     indirizzo della pagina web

Per esempio, questo qui sotto è lo script completo del banner del linky party 21, che ho allineato centralmente aggiungendo <div align="center">.

<div align="center"> <a href="http://cecrisicecrisi.blogspot.it/2012/08/linky-party-21-its-sticky-post.html" title="linky party by topogina progetti e lavoretti con la colla" target="_blank"><img src="http://i1265.photobucket.com/albums/jj519/topogina/linkypostlinkypartybytopoginacecrisicecrisiblogspot21.jpg" alt="C'e' crisi, c'e' crisi! Guida alla Sopravvivenza sul Pianeta Terra..." style="border: medium none;" />

Vediamo come ho fatto a scrivere questo codice partendo dal modello:

Per il LINK DIRETTO, sono entrata in PhotoBucket  e passando il mouse sopra alla mia immagine è apparso un menù con 4 tipi di link. A me serve il secondo indirizzo, il DIRECT LINK.

*Per copiare il direct link, appoggio il mouse sulla casella che lo contiene e ci clicco sopra {si copia in automatico}.

Per la PAGINA WEB, copio e incollo il link nello script di base

N.B. : Il link alla home page di un sito o un blog termina in .it/.com etc.

Se invece voglio creare un collegamento ad un post o una pagina specifica, visito la pagina e ne copio l’indirizzo {l’ indirizzo di un articolo di un blog termina sempre in .HTML}

COME INCOLLO IL MIO CODICE NELLA SIDEBAR?

Una volta copiato il codice {direct link} da Photobucket e l'indirizzo web nel mio scrip di base, devo incollarlo nel mio blog. Dove?

Entro nel mio blog e seleziono LAYOUTdal menu' laterale.

Clicco Aggiungi un Gadget

Seleziono HTML/JAVA SCRIPT

Incollo il mio codice nella finestrella apertasi e scelgo un titolo {OPZIONALE}

Verifico che tutto funzioni cliccando su Rich Text {in alto a destra}

Clicco su SALVA.

Se l’immagine appare correttamente nella versione Rich Text, abbiamo fatto tutto giusto. Se invece appare un errore, meglio cliccare il tasto CANCEL per annullare l’intera operazione.

N.B.: Nel caso in cui apparisse un errore, riguardiamo bene il nostro codice controllando che tutte le virgolette siano al posto giusto, che l’indirizzo web termini in HTML  e che il formato dell’immagine {nel nostro caso .jpg sia completo}.

Inoltre, il codice deve aprirsi e chiudersi con una parentesi {< e />}

Vi assicuro che è piu facile a farsi che a spiegarlo.

Sono a vostra disposizione nel caso in cui aveste bisogno di aiuto.

Articoli che ti potrebbero interessare:

Come Aggiungere un Banner nella Sidebar del Blog

Risorse Utili per il tuo Blog - Come Inserire un Link in un Post

C’è Crisi! Consiglia – Come Eliminare i Captcha dai Commenti al Blog