Pubblicato il 25/06/11e aggiornato il

Come inserire una immagine fissa con link e icona di chiusura.

L'obiettivo di questo post è quello di illustrare come mostrare in una posizione predeterminata del blog una immagine che abbia un collegamento a un sito o a un feed e che possa essere nascosta dal navigatore. Questa personalizzazione può avere gli utilizzi più svariati. Può essere un invito a sottoscrivere i feed del sito oppure a iscriversi alla pagina fan su Facebook. E' possibile anche pubblicizzare un altro sito o anche sensibilizzare i lettori su una campagna di opinione. Mi viene anche in mente anche un suo possibile utilizzo per promuovere un evento o per ricordare un appuntamento in rete. Ho pubblicato, come mio solito, una dimostrazione dell'effetto in un mio blog.
Se ci cliccate sopra, accederete a questa stessa pagina, mentre se andrete sulla icona rossa, la nasconderete alla vista
icona flottante rss
Naturalmente può essere cambiata l'immagine e le sue dimensioni, l'icona di chiusura, l'URL della pagina collegata e la posizione dell'immagine in relazione al layout del blog. Andate su Design > Modifica HTML e salvate il modello completo per un eventuale backup di ripristino. Espandete i modelli widget, cercate la solita riga </head> e, immediatamente sopra, incollate il
Successivamente si cerca l'altra riga </body> e si incolla subito sopra il seguente blocco
<a href='http://feeds.feedburner.com/ideepercomputeredinternet/zUQN' target='_blank'><div id='ImmFlottante'>
<img border='0' class='close' onClick='closeTopAds();return false;' src='https://lh5.googleusercontent.com/-cCEx284Lc8g/TgXPsIB_76I/AAAAAAAATmw/UyFrE2UuvV4/close.png'/>
</div></a>
Per finire, subito sopra alla riga ]]></b:skin> si incolla quest'ultimo codice
/* IMMAGINE FLOTTANTE */
#ImmFlottante {
background: url(https://lh4.googleusercontent.com/-2O1tJCa1i1g/TgXM2QxxkpI/AAAAAAAATmk/jReFQPm9BPY/rss.png) no-repeat;
bottom: 0px;
right: 0px;
width: 128px;
height: 128px;
position: fixed;
}
.close {
float: right;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}
Finalmente si salva il modello. Elenco brevemente le possibili personalizzazioni
  1. L'indirizzo di FeedBurner di questo blog può essere sostituito da qualsiasi altro URL.
  2. L'espressione target="_blank" serve per aprire la pagina in un'altra scheda
  3. L'indirizzo della immagine nel primo codice rappresenta la crocetta di chiusura. Ha dimensioni di 16 pixel e può essere sostituita con un'altra
  4. L'indirizzo della immagine nel secondo codice è l'immagine flottante principale
  5. Si può scegliere di altre dimensioni rispetto ai 128 pixel dell'esempio. In questo caso vanno cambiati i valori di width e height 
  6. Con questo codice l'immagine andrà in basso a destra esattamente sul bordo del layout. Al posto di 0px possono essere inseriti altri valori per distanziarla dai lati. Se invece di bottom e right si utilizzano top e left per mettere l'immagine per esempio in alto a sinistra, dobbiamo modificare anche la classe .close dell'icona di chiusura. Con questo codice la crocetta va sulla destra a una distanza di 10 pixel.
  7. Al posto di fixed possono essere inseriti altri valori.




14 commenti :

  1. Buonanotte,Ernesto,e buona domenica.Lucia D.

    RispondiElimina
  2. Si può anche utilizzare per chiudere un widget nella sidebar?
    Se si come si può fare?
    Grazie dell'eventuale risposta. :)

    RispondiElimina
  3. @pippogeek
    No, non può servire per questa cosa. Puoi eventualmente utilizzare questo script
    http://www.ideepercomputeredinternet.com/2011/02/come-espandere-o-nascondere-testo.html
    anche se non conosco le tue esigenze

    RispondiElimina
  4. @Lucia
    Buona domenica anche a te

    RispondiElimina
  5. Ho in mente di usarlo, grazie mille Ernesto.

    RispondiElimina
  6. @Ernesto T.
    Ho già provato quell'effetto ma ho qualche script che va in conflitto :(
    Grazie comunque!

    RispondiElimina
  7. Ciao, sto cercando nel sito ma non trovo la risposta, mi servirebbe qualcosa per inserire una miniatura con link, che però si possa aggiornare facilmente, perchè la cambierei spesso, stavo cercando un modo per inserire qualcosa come "ti potrebbe interessare anche.." però non alla fine dei post, ma di lato sulla home. C'è un modo per inserire solo l''url del post di riferimento e ottenere tutto?
    Lo so che chiedo miracoli, ma non riesco a caricare url a destra e a manca ogni tre giorni!

    Suggerimenti?
    Anna.

    RispondiElimina
    Risposte
    1. Mi spiace ma non mi viene in mente nulla per automatizzare questa operazione @#

      Elimina
  8. ho optato per questo. ci sarebbe un modo di inserire un titoletto? in caso dove?

    RispondiElimina
    Risposte
    1. Modifica questa immagine con un programma di grafica
      https://lh4.googleusercontent.com/-2O1tJCa1i1g/TgXM2QxxkpI/AAAAAAAATmk/jReFQPm9BPY/rss.png
      in modo da mostrare una scritta tipo "Iscriviti ai Feed RSS" o simile. Puoi mettere anche il logo del tuo sito con un invito generico. Si possono anche modificare le dimensioni della foto scegliendola più grande
      @#

      Elimina
  9. Ciao, ho una reazione curiosa: Cliccando l'immagine la pagina apre regolarmente, se invece clicco la [x] l'immagine non scompare, ma si apre la pagina.

    RispondiElimina
    Risposte
    1. La demo funziona regolarmente. Prova a modificare la classe .close staccando maggiormente l'immagine della crocetta provando a aumentare il padding o eventualmente a inserire un margin
      @#

      Elimina
    2. Niente, provato in entrambi i modi ma quando clicco sulla x finisco sempre nella pagina di destinazione dell'immagine.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.