immagin top

16.3.13

Blog design: come inserire i social icons

16.3.13

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='http://4.bp.blogspot.com/-LI-q4WdwfU8/UUQeTd4xxtI/AAAAAAAAFvY/54leWr4EGTg/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='http://4.bp.blogspot.com/-LI-q4WdwfU8/UUQeTd4xxtI/AAAAAAAAFvY/54leWr4EGTg/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? ^_^

21 commenti:

  1. Uffi, ma sono solo io che non ci capisco mai un'acca???? Eppure questa parte è interessante, mi piacerebbe averle queste icone nel mio blog!!

    RispondiElimina
  2. oK, BRAVA HAI FATTO BENE A NON RISPONDERMI SUBITO, PERCHè LA SOLITA fAIRY CHE SI PIANGE SEMPRE ADDOSSO, SI è MESSA DI IMPEGNO E..... UDITE UDITE..... CE L'HO FATTAAAAAAAAA!!!!!!!!!!!!!!!!

    RispondiElimina
    Risposte
    1. AHAHAH no, in realtà non ero al pc :P
      e poi hai visto che ce l'hai fatta???
      io dico sempre, ceh se ci sono riuscita io, ci può riuscire chiunque!!!

      Elimina
    2. Che ne dici? Le ho messe bene?

      Elimina
  3. Ciao
    arrivo qui da il Gufo creativo
    e devo dire che questo blog mi piace proprio!!
    il mio invece mi fa impazzire!!
    mi unisco e ti leggerò con cura.
    posso chiederti come fare a ricevere le risposte ai miei commenti come questo senza che riceva per email tutti i commenti di questo post.
    Grazie mille!!!!
    se ti va passa http://zichinina.blogspot.it/

    RispondiElimina
    Risposte
    1. ciao ZichiNina e grazie!!!
      In realtà io non ricevo nessuna notifica per email (se è questo chemi chiedevi) oppure se ti riferisci al fatto che la risposta al commento è in qualche modo 'evidenziata' è una questione di codici all'interno del template. Se è quest'ultima cosa che ti interessa magari metto su un tutorial apposito :)

      Elimina
    2. Scusa Simona
      come sai che qualcuno ha risposto al tuo commento?
      ti spiego:
      Quando scrivo commenti su blog altrui come faccio a sapere quando mi rispondono? ho scoperto poco tempo fà che in fondo a dx del commento ti puoi iscrivere per email dove i commenti di risposta arrivano via email..ma mi arrivano commenti di tutti relativi al post e non solo la risposta data al mio commento!
      spero di esser stata più chiara,
      grazie mille della tua disponibilità.
      Un abbraccio

      Elimina
    3. sisi ora ho capito :D
      guarda ho fatto una piccola ricerca e mi sembra che qui ci sia una risposta chiara, ma che ahimé non credo ti darà molte soddisfazioni, comunque ti lascio link: http://support.google.com/blogger/bin/answer.py?hl=it&answer=1725597

      Elimina
  4. grazzissime!
    francesca

    RispondiElimina
  5. Wowowow!!!
    Grazzissime, io riuscita! Io felice!

    RispondiElimina
  6. Grazie a Mary del gufo creativo che mi ha passato il tuo link e grazie a te, ce l'ho fatta! Come sono felice!!!!!! :) Grazie!

    RispondiElimina
    Risposte
    1. Grazie a te per il tuo entusiasmo!!! Mi fa davvero molto piacere ^_^

      Elimina
  7. ciao vorrei sapere come inserire le icone sociali nella barra del menù con i codici CSS :)

    RispondiElimina
    Risposte
    1. Guarda in realtà non è molto complicato, in quanto basterebbe inserire i codici delle icone all'interno della sezione 'tabs' (in modifica HTML)... il fatto è che poi bisogna aggiustare la larghezza della lista del menu in modo da lasciare spazione alle icone...insomma ho paura ceh di questo occorra un video tutorial :D

      Elimina
  8. Il tuo blog mi sta aiutando davvero moltissimo a personalizzare il mio ^^
    Ho trovato tanti spunti interessanti!
    Mi piacerebbe sapere come mettere una barra fissa in alto (come quella che hai per iscriversi alla newsletter per capirci) ma che contenga la barra di navigazione del blog (quella che di solito sta sotto l'header e contiene la home e le varie pagine). Puoi aiutarmi? ^^
    La barra ovviamente esiste già, vorrei capire come dirgli di metterla lassù :)

    RispondiElimina
    Risposte
    1. Ho appena trovato quello che cercavo!
      http://sketchyourblog.blogspot.it/2014/05/menu-delle-pagine-fisso-in-alto.html
      Sai leggere nel pensiero? :D

      Elimina
  9. Sei una grande! Sono riuscita a inserire le social icons con le tue spiegazioni :)

    RispondiElimina
  10. Ho appena scoperto il tuo blog e da pochissimo tempo ho aperto il mio!
    Posso dire che TI ADORO?! ahahahaah ♥
    Fantastica!

    RispondiElimina
  11. già ti adoravo... ma adesso ti amo, sono riuscita ad inserire le social icons sul blog di prova!
    Sono completamente torda ma grazie a te mi sento una supereroina!
    GRAZIE! *.* <3

    RispondiElimina