Come inserire nel blog un badge fisso con link.

Come posizionare nel blog una immagine con collegamento che resti fissa allo scorrere della pagina per pubblicizzare una campagna pubblicitaria, una ricorrenza, la festa della mamma, ecc

Avete un sito che tratta di nutrizione o di cucina e volete in qualche modo cavalcare l'onda lunga della Expo di Milano? Sei una fashion blogger e sei interessata a pubblicizzare l'evento incontro di Firenze con le colleghe? Vuoi sensibilizzare i tuoi lettori a una campagna sociale o politica? Vuoi nel tuo sito ricordare un importante anniversario o un personaggio pubblico? Vuoi semplicemente condividere con i tuoi lettori delle ricorrenze come le Feste Natalizie, Ferragosto o San Valentino? Vuoi pubblicizzare un ebook scritto da te o da altri? Vuoi ricordare ai tuoi lettori la Festa della Mamma o la Giornata Mondiale dell'Ambiente? Avete un blog di calcio e volete celebrare la conquista di un "Titulo" dalla vostra squadra del cuore oppure avete un sito di sport e volete festeggiare la vittoria di una medaglia in una disciplina olimpica?

Tutte queste esigenze hanno bisogno di una adeguata pubblicità. Il modo solito con cui il blogger si approccia a queste tematiche è quello di inserire nella sidebar un gadget o una immagine che mostri appunto la campagna pubblicitaria. Sulla falsariga della personalizzazione che creai in occasione del 150-esimo anniversario della Unità d'Italia vediamo come sia molto semplice creare un badge da posizionare nel layout del nostro sito in modo fisso o fluttuante.  Si può per esempio creare una immagine relativa alla campagna da pubblicizzare con un link a un post del nostro sito o anche a una pagina esterna. Tale immagine può essere visualizzata in modo permanente cioè che rimanga nella stessa posizione allo scroll della pagina oppure che sia ancorata a un punto della stessa e che quindi scompaia quando si scrolla la pagina verso il basso.

Per questa semplice installazione si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla il codice seguente in cui ho lasciato l'indirizzo della immagine

<div style="position:fixed;top:80px;left:60px;" title="Descrizione visualizzata sulla immagine al passaggio del mouse" alt="Testo alternativo della immagine"><a href="URL_DEL_LINK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggUU_sllmaQ2WkByZdsslrlUaOEF5cl-W-cyYjGOT_bgUBFw0KvTIN_MzsRg5XLZcgab4kpd0LjOQL20hpDed6taxrz1MQMW85lPDrTvw3q3_E72dK3mQ_h8k4a54bVYOEDcBgRlR_f6N-/s160/expo1.jpg" /></a></div>

Con il tag position:fixed; l'immagine rimarrà fissa nel layout allo scorrere della pagina a una distanza di 80 pixel dalla parte alta e a una distanza di 60 pixel dalla parte sinistra. Se si vuole invece che scompaia allo scorrere della pagina bisogna sostituire tale tag con position:absolute;. Invece che settare le distanze dalla parte alta e dalla parte sinistra con top e left lo si può farlo anche rispettivamente dal basso e dalla destra  con i tag bottom e right seguiti dai valori delle distanze. Invece il tag target="_blank" serve per aprire il link in un'altra scheda e si può togliere se non interessa questa funzione. Se l'immagine risultasse coperta da un altro elemento del layout bisognerà aggiungere il tag z-index:9999; subito dopo left:60px; e prima delle virgolette ".

VISUALIZZAZIONE SU MOBILE

Se posizionate l'elemento pagina in una sidebar l'immagine non sarà visibile da dispositivi mobili. Se la volete vedere anche da mobile dovete andare su Layout e trascinarla nell'area "main"

Dopo averlo fatto andate in alto su Salva disposizione. Se si continuasse a non vedere cercate l'ID del widget quindi aggiungete il tag  mobile='yes' prima di title=' nella riga che inizia con <b:widget id='HTMLX' dove X è l'ID del widget in questione. 

Nel caso in cui l'immagine fosse troppo grande per il mobile si possono inserire due widget, il primo visibile solo su desktop e il secondo, con una immagine più piccola, visibile solo da mobile inserendo gli opportuni tag condizionali per mostrare un gadget in una sola delle due versioni.