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 destra 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

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

link diretto dell’immagine*
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;" />

Ma vediamo come ho fatto a scrivere questo codice partendo dal modello base:

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.
photobucketmenucodicicodicediretto 1

*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.
menu blog seleziono layout

Clicco Aggiungi un Gadget
add a gadget in blogger

Seleziono HTML/JAVA SCRIPT
Come usare Photobucket come linkare un imagine ad un indirizzo web

Incollo il mio codice nella finestrella apertasi e scelgo un titolo {OPZIONALE} Verifico che tutto funzioni cliccando su Rich Text {in alto a destra}
CONFIGURA CODICE HTML JAVA

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: