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

link indirizzo articolo blog web page



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


visualizzazione in rich text


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

15 commenti :

  1. Infatti Alex..più facile a fare che a dire!!!!!...anch'io so farlo perchè mi ha insegnato tutto mia figlia quando ha creato il blog, e adesso dice sempre che su queste cose sono diventata più brava di lei:)...ma di tutti questi termini non ci capisco niente ah ah ah ...naturalmente apprezzo il tuo spirito di condivisione che è bellissimo!
    ciaoooo

    RispondiElimina
  2. Ciao Alex,
    tutorial bellissimo e come sempre riesci a rendere semplici e immediate cose che a prima vista sembrerebbero infattibile.

    Ho imparato come aggiungere il testo visualizzato passando con il mouse, la mia versione attuale non è cosi' sofisticata. Grazieeeeeeeeeeeee!!!

    Bravissima!!!!!
    a presto,
    Sara

    RispondiElimina
  3. grazie Alex la tua lezione mi è stata preziosissima :)) ciao Paola

    RispondiElimina
  4. Grazie Alex! Potrá tornarmi molto utile... A proposito... Avrei una domanda da porti... E se volessi creare una sola immagine dalla quale poter accedere a diversi link? Mi spiego meglio... Vorrei che in una sola immagine da mettere in alto al mio blog ci siano il nome e sotto i vari loghi di twitter, facebook,youtube, ecc... E vorrei che cliccando su di essi si acceda direttamente alle pagine fan che ho creato... È possibile? Please Risp da me, altrimenti mi sa che non leggo la risposta...

    RispondiElimina
  5. Grazie Alex per le tue spiegazioni sempre dettagliate ma semplici da seguire.
    Ci proverò!
    Ciaooo!

    RispondiElimina
  6. Ciao Alex, ma sei una vera esperta! Queste istruzioni sono utili per me, che sono una principiante...Baci!

    RispondiElimina
  7. Questo commento è stato eliminato da un amministratore del blog.

    RispondiElimina
  8. Questo commento è stato eliminato da un amministratore del blog.

    RispondiElimina
  9. Questo commento è stato eliminato da un amministratore del blog.

    RispondiElimina
  10. Questo commento è stato eliminato da un amministratore del blog.

    RispondiElimina
  11. Questo commento è stato eliminato da un amministratore del blog.

    RispondiElimina
  12. Heya i'm for the primary time here. I found this board and I find It truly useful & it helped me out a lot. I hope to give something again and aid others like you aided me.

    Here is my site :: make website

    RispondiElimina
  13. Ηi thегe mates, hоw is everything, and what you wish for
    to say οn thе tоρіc of this pаragraph, in
    mу vіeω its truly amаzing in favοr
    οf me.

    Visit my ωеbpage; fare un sito

    RispondiElimina
  14. preziosi consigli facilità nel capire le modalità disponibilità nel condividere le tue approfondite competenze: è come se si seguisse proprio una lezione individuale...
    la tua è la virtù della comunicabilità per diffondere ciò che sai nel campo, a volte "pasticciato", delle spiegazioni tecnico-pratiche

    RispondiElimina
  15. Whatever I do like most about this product can be that hot weather satisfies properly in order to the routines which inturn currently genuinely comprise of additional outdoor activity and also as well http://www.waxwatchreplicas.co.uk, it usually is impeccably fashionable region sport it in a party donning any swimsuit. I often tell you of which it is usually the perfect solution somewhere between sporty plus beautiful instance pieces. Yet another fundamental include i evident in it really is it has the double-windowed date according a strong optimal date showcase replica watches uk. It happens to be a brilliant time piece built out from romance plus definitely achieves just about all requires that a person will offer the moment talking about the watch. Guys designer watches are often durable sufficient and also right after that will starting place, My partner and i undoubtably are looking for individuals someday. Referring away the include, my best overall point in time items zoom from attention has a higher wide range along with I actually recommend for you to normally have a go with an item away from your standard is more enjoyable. It is possible you will watch very good surprises. Meant for wristwatches can be purchased loaded plus a invaluable finely-detailed as well as yrs involving understanding around efficiency. The historical past with regard to making occasion creations explains united states what exactly a necessary job they had on getting the wrist chronograph, fact that built from these products a- in the market http://www.attrinity.com. That follow is among the most most desired watches trademark, along with the truth presented earlier make up the key reason why. I, myself personally, unique just one watch from your gallery, the particular keep an eye on to get more exact, not to mention I am able to inform you of it is not simply regarding sensation beneficial having the thinking behind sports an extra time frame item onto your grip, it really is about recognizing it, absolutely developing at heart the floor needs from your observe along with being privileged regarding donning the application.

    RispondiElimina