Mostrare una bandiera nel blog per festeggiare la Repubblica o per supportare un evento sportivo.

Come aggiungere una immagine anche fluttuante in un angolo del blog su Blogger o Wordpress per supportare un evento o una ricorrenza.

Oggi 2 Giugno 2016 è il 70° anniversario della nascita della Repubblica Italiana, una ricorrenza che probabilmente solo i più anziani vivono con trasporto. Qui non è il caso di fare dei confronti con le analoghe feste che avvengono in Francia, Gran Bretagna o Stati Uniti che invece suscitano in quei paesi ben altra emozione.

Prendendo spunto dalla Festa della Repubblica vediamo come si possa installare nel blog una bandiera anche animata da visualizzare al di fuori del solito layout e da nascondere nella versione mobile perché troppo invasiva. Si può anche inserire un collegamento alla bandiera in modo che chi ci clicca sopra venga inviato in una determinata pagina. La bandiera può essere usata anche come supporto ai calciatori per i prossimi Campionati Europei o a tutti gli atleti in genere quando inizieranno le Olimpiadi in Brasile.

Gli utenti di Blogger dovranno andare su Layout -> Aggiungi un gadget -> Base -> HTML / Javascript e incollare in Sezioni del sito questo codice

<div style="position:fixed;top:100px;left:50px;" title="Festa della Repubblica Italiana" alt="Bandiera Italiana"><a href="URL_DEL_LINK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-zThHYq6vrg1N__vhNADYeKgMxG8SlX6gdAqTQX-qI82LnObFVNOTJ5YGxs52kEbEHIPEojjX9OnhEl-C-stn-nUAJnY22LvD2DA-8JggJyMaUnZckRH0J6qfm5UNVglveqsnq5DHlPc/" /></a></div>

Si salva e si posiziona a piacere l'elemento pagina. Il risultato sarà simile a questo

Le personalizzazioni sono molto semplici:

1. Con fixed la bandiera rimane fissa allo scorrere della pagina con absolute al posto di fixed invece rimarrà nella stessa posizione assoluta del layout.
2. Il posizionamento avviene con i tag top:100px; left:50px; per una distanza di 100 pixel dall'alto e di 50 pixel dalla sinistra. Alternativamente si possono usare i tag bottom e right. 
3. Il contenuto del tag title si mostrerà come tooltip al passaggio del mouse sopra di essa. Nel tag alt sarà invece digitato il nome della immagine.
4. L'URL della immagine è colorato di viola. Quella proposta è una immagine animata in formato GIF e naturalmente può essere sostituito da un URL di un'altra immagine con una funzione anche completamente diversa.
5. Il gadget può essere installato anche su Wordpress andando su Aspetto -> Widget -> Testo.
6. Al posto di URL_DEL_LINK potrà essere inserito l'URL della pagina collegata. Se non volete nessun link potete cancellare i tag <a href="URL_DEL_LINK" target="_blank"> e </a> oppure mettere un cancelletto (#) al posto di URL_DEL_LINK.

Concludo osservando che in linea di massima questo widget non sarà visualizzato nella versione mobile perché inserito in una sidebar. Per essere sicuri che questo accada bisogna andare su Modello -> Modifica HTML e si cerca tale widget che inizierà con <b:widget id='HTML.... In questa riga dovremo incollare il tag mobile='no' subito prima o subito dopo type='HTML'.