Pubblicato il 14/01/11 - aggiornato il  | 10 commenti :

Come inserire immagini fisse o fluttuanti in uno dei quattro angoli del blog su Blogger.

Inserire immagini fisse o statiche significa che devono rimanere nella stessa posizione quando si scrolla la pagina. Si possono inserire in qualsiasi punto del blog modificando i parametri e possono essere messe senza collegamenti o con un link a una determinata pagina. Potrebbe essere utile inserire per esempio una icona di Facebook e una di Twitter con i relativi collegamenti all'account o alla pagina fan. Si può pensare anche di mettere una bella icona dei feed con il collegamento all'URL che abbiamo avuto da FeedBurner.

Per i tag si deve utilizzare la terminologia inglese. Si tratta di espressioni conosciutissime ma ricordo che top e bottom sono rispettivamente alto e basso e left e right rispettivamente sinistra e destra. Per inserire una immagine con un collegamento a una pagina dobbiamo utilizzare questo codice

 <a href="URL DEL LINK"><img style="border:none;position:fixed;top:10px; left:10px;" title="Titolo" alt="Nome Immagine" src="URL DELL'IMMAGINE"/></a>

Le personalizzazioni riguardano

  1. URL DEL LINK - Indirizzo del collegamento da mettere alla immagine
  2. Al posto di position:fixed; possiamo sostituire position:absolute; per farla scrollare insieme alla pagina
  3. top e left significa che l'immagine andrà in alto a sinistra ma possiamo mettere anche bottom e right con il significato già precisato
  4. 10px; è la distanza della immagine dal bordo a cui si riferisce. Il due numeri possono essere configurati in funzione del nostro layout
  5. In Title e Alt inseriremo il nome della immagine a beneficio dei lettori (tag Title) e dei motori di ricerca (tag Alt)
  6. In URL DELL'IMMAGINE dobbiamo incollare l'indirizzo della nostra immagine precedentemente caricata su Picasa, SkyDrive, Imageshack, ecc

Adesso andiamo in Design > Modifica HTML e cerchiamo la riga </body>. Nei vecchi modelli è la penultima riga del modello, in quelli nuovi è comunque  sempre verso la fine. Incolliamo il codice immediatamente sopra a questa riga e salviamo il modello. L'immagine sarà visibile nell'angolo che avete scelto. Naturalmente se ne possono inserire più di una, stando bene attenti a metterle in posizioni distinte.

Si possono inserire anche immagini animate in formato GIF come avete visto dalla pagina demo che ho pubblicato. Nel caso in cui non vogliate inserire collegamenti ma solo una immagine o foto per il solo gusto di vederla, il codice è più semplice

<img style="border:none;position:fixed;bottom:0px;right:0px;" title="Titolo" alt="Nome Immagine" src="URL DELL'IMMAGINE"/>

con le stesse personalizzazioni di prima. Il codice si incolla anche in questo caso immediatamente sopra alla riga </body>.

 




10 commenti :

  1. scusami ,ma non riesco a mettere "iscriviti alla newsletter",come hai tu in fondo pagina ,ho un blog di blogspot e uno di splinder
    http://fusellietombolo50.splinder.com/
    fililavorati.blogspot.com
    distefanoricamo@alice.it

    RispondiElimina
  2. mi potresti aiutare? ciao maria antonia

    RispondiElimina
  3. @maria antonia
    Per entrambi i blog puoi seguire queste istruzioni
    http://www.ideepercomputeredinternet.com/2010/11/come-iscrivere-il-blog-su-feedburner-e.html
    Ciao

    RispondiElimina
  4. ciao
    ho inserito la cascata di cuoricini nel mio blog ma ne escono pochi....ma la mia difficoltà sta nello inserire una immagine animata gif sullo schermo caricandola dal pc
    esce il titolo ma nn carica l'immagine, dove sbaglio??

    RispondiElimina
  5. @Rosita
    I cuoricini escono subito all'inizio del caricamento, poi la cascata diminuisce ma solo per te perché i lettori del tuo blog avranno lo stesso effetto almeno all'inizio. Prova comunque a mettere l'elemento in alto del layout. L'immagine in GIF deve essere prima caricata su un servizio tipo Picasa, SkyDrive o DropBox, successivamente inserita in un widget HTML

    RispondiElimina
  6. ciao scusa se disturbo volevo un aiuto non riesco piu a vedere immagini negli angoli inferiori del blog le vedo solo in alto mi puoi aiutare grazie..

    RispondiElimina
  7. scusa mi sono dimenticato l'indirizzo del blog: luis-brianza.blogspot.com ....ciao

    RispondiElimina
    Risposte
    1. @luis
      Io in basso vedo un bottone per andare a inizio pagina. Per la parte sinistra in basso il codice dovrebbe essere
      position:fixed; bottom:10px; left:10px;

      Elimina
  8. Un anno fa ho aperto un blog senza saperne di computer grafica, per fortuna ho incontrato I.C.I. che ho messo subito tra i preferiti. Ho letto le tue chiarissime spiegazioni e il risultato è incredibile: sono riuscita, pian piano, ad accessoriarlo splendidamente. Oggi sono passata per posizionare 1 alberino di Natale e sono riuscita immediatamente. Grazie di tutto.
    Patrizia
    http://ierioggiincucina.myblog.it/

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy