Volete inserire delle icone nel vostro blog che portino al vostro shop o ai vari social networks,ai quali il vostro blog è collegato?
Vi mostro come fare in un modo
quasi semplice e veloce.
Avete le vostre icone? Ok, tenetele un attimo da parte.
Per questo 'lavoro' dovete aprire due finestre del vostro browser: una su 'LAYOUT' , nell'altra creiamo un 'NUOVO POST'.
In 'LAYOUT' scegliamo il gadget 'HTML/JASCRIPT' e inseriamo questo codice:
<a href='INSERT_URL'><img src='URL_SOCIAL_ICON'/></a>
<a href='INSERT_URL'><img Src='URL_SOCIAL_ICON'/></a>
<a href='INSERT_URL'><img src='URL_SOCIAL_ICON'/></a>
Teniamolo buono, buono per un attimo e torniamo nella finestra con il 'nuovo post' aperto.
A cosa serve questo post?
Semplicissimo: a caricare le immagini del nostro blog, a tenerle a disposizione come in una cartella del nostro pc.
Quindi
NON pubblicate questo post, ma salvatelo come
BOZZA!
Una volta caricate le immagini nel post, possiamo copiarne l'
URL cliccando col tasto destro sull'immagine stessa.
COME INSERIRE I CODICI?
Ormai avrete capito che tutto ciò che è racchiuso in questo tag diventa un link e quindi vi conduce, solitamente (ma anche no, sarà in un altro tutorial) in una pagina diversa da quella in cui vi trovate.
Quindi dopo il 'href' dobbiamo
SEMPRE inserire il link della pagina che vogliamo raggiungere.
<a href='http://sketchyourblog.blogspot.it'> </a>
Dove troviamo il tag 'img' vuol dire che è presente un'immagine e con il riferimento 'src', ovvero SEARCH, gli diciamo dove andarla a cercare in tutto l'universo del web.
<a href='http://sketchyourblog.blogspot.it'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg70YBDVrM9tKq-ruSjKGAg1FnPzaQcl-IiXU8VIgRUygVcR-lDN2IzqlyyxVgNofkGSmmpBhisFlx-6l1JQFBZPINTqsP3NzOua4_FYLZNq_jU8Q2Xzim8VcqVTniua1RF-rkAfH3byTZK/s320/twitter-bird.png'/></a>
Il risultato? Eccolo!
Ripetendo l'operazione, per quante sono le vostre icone, potrete ritrovarle nella sidebar, una affianco all'altra.
E se le icone sono troppo grandi e tutte non mi ci vanno?
NO PROBLEM! Gli indichiamo noi che grandezza devono avere aggiungendo 'width' (basta dargli solo una opzione, quella della larghezza in questo caso) prima della chiusura '/' del tag 'img'. Ovviamente regolatevi sulle misure originali in pixel della vostra icona.
<a href='http://sketchyourblog.blogspot.it'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg70YBDVrM9tKq-ruSjKGAg1FnPzaQcl-IiXU8VIgRUygVcR-lDN2IzqlyyxVgNofkGSmmpBhisFlx-6l1JQFBZPINTqsP3NzOua4_FYLZNq_jU8Q2Xzim8VcqVTniua1RF-rkAfH3byTZK/s320/twitter-bird.png' width='50px' height='auto'/></a>
E l'icona comparirà più piccola.
Spero vi sia utile questo post, se lo è lasciate un commentino? ^_^