Pubblicato il 22/09/11e aggiornato il

Come inserire un avviso fisso o flottante in un blog con link a Facebook, Twitter e Google+.

Se si ha la necessità di comunicare qualcosa ai navigatori possiamo pubblicare un post oppure inserire una scritta scorrevole nella parte alta del sito affinché l'informazione sia maggiormente visibile. Se si vuole essere sicuri che sia il lettore fisso sia il lettore casuale leggano una nostra comunicazione, il modo più sicuro è quello di inserire nel blog una specie di post-it immateriale.

Si tratta in sostanza di un banner che può essere installato in una posizione fissa della pagina o in modo flottante per farlo rimanere sempre nella stessa posizione. Tale banner deve dare al lettore la possibilità di nasconderlo per visualizzare i contenuti della pagina nella loro interezza:

L'aspetto del post-it che ho realizzato è quello di un rettangolo arrotondato ma gli utenti di Internet Explorer vedranno solo un rettangolo ad angoli retti perché quel browser supporta male alcuni tag tipo border-radius o box-shadow.

avviso-blogger-post-it

In alto a destra è visibile la scritta Chiudi con la relativa icona. Per l'installazione di un avviso di questo tipo non occorre modificare il modello. In basso a destra sono state inserite anche tre icone con collegamenti ai nostri account di Facebook, Twitter e Google+, diventato da poco aperto a tutti. E' sufficiente incollare il codice seguente in Design > Modifica HTML > HTML/Javascript.

<style type="text/css">
#avviso{
width:400px; /* Larghezza del box */
padding:5px; position:fixed; z-index:5000;}
.box-avviso{
border:4px double #940F04; /* Colore del bordo */
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #909090; -moz-box-shadow: 8px 8px 6px #909090; box-shadow: 8px 8px 6px #909090;
background-color: #FFEAE9; /* Colore di sfondo */
padding: 8px; font-family: Verdana, Geneva, sans-serif;
color: #003366; /* Colore del testo */
}
.testo-avviso { /* Stile di AVVISO */
font-size:18pt;
font-weight:bold;
color:#B4045F;
text-shadow: 0px 0px 10px #BA55D3;}
</style>
<div id="avviso" style="left:20px; top:200px; padding:0;">
<div align="right" style="margin-bottom:-30px;"><b><a href="javascript:closeit()" ><font face="Arial" size="1">CHIUDI</font> <img valign="middle" src="https://lh6.googleusercontent.com/-80LmoXXMIi0/TnsyYeeRVnI/AAAAAAAAUgc/RShnbWF2L_c/chiudi.png" style="vertical-align:middle;"/></a></b></div>
<br/>
<fieldset class="box-avviso">
<legend class="testo-avviso" align="center">AVVISO</legend>
  ……   Inserire il messaggio ….
<br/><div align="right"><a href="http://www.facebook.com/parsifal32" target="blank"><img src="https://lh6.googleusercontent.com/-PtZtqxfOEyk/Tnsyc413uyI/AAAAAAAAUgg/RT9waFPrxTs/icona_Facebook.png" width="24"/></a>
<a href="http://twitter.com/parsifal32" target="blank"><img src="https://lh4.googleusercontent.com/--C1VwGlJw40/TnsyhSIbv0I/AAAAAAAAUgk/qr4zoTfaL_Y/icona_twitter.png" width="24"/></a><a href="https://plus.google.com/111056841635962157738/posts" target="blank"><img style="margin-left:4px; margin-right:2px;" src="https://lh5.googleusercontent.com/-7LwTlpLRHtM/TntCgci8_SI/AAAAAAAAUgs/JvHq-JpatpM/googleplus.png" width="26"/></a></div>
</fieldset>
<script>
function closeit(){
document.getElementById("avviso").style.visibility = "hidden";
}
</script>
</div><div class="clear"/></div>

La personalizzazione più importante riguarda la terza riga. Con position:fixed; l'avviso sarà flottante e rimarrà immobile allo scorrere della pagina. Invece con position:absolute; manterrà la posizione che ha rispetto al layout del blog e scorrerà insieme alla pagina. Altri due parametri fondamentali sono quelli individuati dalla riga <div id="avviso" style="left:20px; top:200px; padding:0;">. Fissano la posizione rispetto ai bordi del blog. Invece di left e top possono anche essere usati i tag right e bottom. Si possono anche usare dei valori negativi. Questi valori possono variare di molto a seconda del modello di blog, della sidebar in cui viene inserito l'elemento pagina e in funzione di altri fattori. Per trovare i parametri giusti non resta che fare dei test con numeri diversi.

Gli altri parametri vanno personalizzati in questo modo:

  1. width:400px è la larghezza del box dell'avviso
  2. border:4px double #940F04; è lo stile del bordo del box
  3. 10px; è il raggio di curvatura degli angoli del box
  4. box-shadow indica l'ombreggiatura del box con il colore grigio #909090;
  5. #FFEAE9; è il colore di sfondo
  6. color: #003366; è il colore del testo dell'avviso
  7. #B4045F; è il colore del titolo dell'avviso e #BA55D3 quello della sua ombreggiatura
  8. CHIUDI è la scritta che si visualizza accanto all'icona per chiudere la finestra
  9. AVVISO è il titolo della comunicazione
  10. In …… Inserire il messaggio ….  si incolla il testo che si vuole visualizzare all'interno del box
  11. Al posto di parsifal32 mettete il vostro nome utente Facebook e Twitter e sostituite l'ID del mio account Google+ con il vostro. Si ottiene facilmente copiandolo dalla barra degli indirizzi del browser.

I link ai tre social servono per dare al navigatore la possibilità di avere informazioni ulteriori rispetto a quelle lette nell'avviso. Questo post-it può servire a per avvertire che non si potrà rispondere ai commenti per impegni improvvisi, per informare i lettori di un evento importante che stiamo organizzando o a cui stiamo partecipando, per avvertire di una grossa novità introdotta nel blog, ecc…





27 commenti :

  1. ma il box si apre in ogni pagina e post? non è possibile limitare l'apertura solo sulla home page?

    RispondiElimina
  2. @SE-Gen
    Certo. Basta usare i tag condizionali
    http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html

    RispondiElimina
  3. ah perfetto grazie! :P Ecco intanto come ho usato il box, ho cambiato pure il tasto per la chiusura :P http://playstationgen.blogspot.com/

    RispondiElimina
  4. Grazie :D
    La grafica sarà anche mia ma li tutto si muove solo grazie a te! Grazie mille! ;)

    RispondiElimina
  5. Guarda ho anche aggiunto il tasto mi piace! :D In pratica è possibile creare il tanto famoso widget del facebook pupop! :P

    RispondiElimina
  6. @SE-Gen
    Certo. Ci si può sbizzarrire.

    RispondiElimina
  7. Ciao Ernesto, ho inserito questo gadget nel mio blog ma non funziona la chiusura, poi dare un occhio alle mie modifiche che vedi qui e dirmi dove sbaglio se puoi?
    Ho anche fatto le modifiche nel html per far si che non appaia nei post può essere la causa?
    Grazie Sauro

    RispondiElimina
  8. @Sauro
    Innanzitutto ti prego di non inserire link attivi nei commenti, non li posso controllare tutti e sono costretto a eliminarli.
    Non so che browser usi ma il tuo avviso riesco a cancellarlo perfettamente con Chrome e Firefox: Certo che se poi rinfreschi la pagina, l'avviso ricompare ;)

    RispondiElimina
  9. Scusami per i link attivi, spesso mi viene detto (in alti blog dove chiedo consigli) che se riesco a farlo è meglio (comunque ho solo linkato il mio blog e un'immagine da me caricata), ho visto ora anche io che il tutto va regolarmente, non capisco cosa sia successo ma va bene così. Un'ultima domanda: potrebbe esistere un modo per temporizzare questo gadget? nel senso di dargli 15-20 secondi e poi farlo chiudere in automatico?
    Ancora grazie dei consigli e la disponibilità, Sauro

    RispondiElimina
  10. @Sauro
    Certo. Però bisognerebbe lavorarci sopra inserire altro script, ecc.
    Per esempio ShadowBox
    http://www.ideepercomputeredinternet.com/2011/05/come-inserire-una-finestra-popup-di.html

    RispondiElimina
  11. Grazie, ci provo e ti faccio sapere.
    Sauro

    RispondiElimina
  12. Chissà se Sauro è riuscito a temporizzarlo... io invece mi chiedevo se era possibile attivare il box tramite un bottone/link.. non so se mi sono spiegato... in pratica vorrei creare una sezione video ed invece che inserire i filmati oppure i link per dirigere al video o al canale youtube sarebbe bello poterli aprire in questo box...

    RispondiElimina
  13. @SE-Gen
    Prova ShadowBox
    http://www.ideepercomputeredinternet.com/2011/05/effetto-shadowbox-per-gallerie-di-foto.html
    o PrettyPhoto
    http://www.ideepercomputeredinternet.com/2011/09/prettyphoto-per-slideshow-di-foto.html

    RispondiElimina
  14. Se-Gen non sono riuscito a temporizzare il gadget, colpa delle numerosissime modifiche che ho fatto al template, dovrei trovare qualcuno/a che sappia come dargli una ripulita :)
    sto comunque lavorando su uno nuovo (molto simile a quello che ho perché non voglio più stravorgerlo) se riuscirò a far si che il gadget funzioni a tempo non mancherò di segnalarlo ad Ernesto e tutti i suoi lettori
    Ciao Sauro

    RispondiElimina
  15. Quale parte di HTMl devo modificare per avere la pagina fan di Facebook, flottante sul mio sito?

    Grazie in anticipo.

    RispondiElimina
  16. @Rubel
    Se vuoi vedere la fan box di facebook che si apre in una finestra segui il commento numero 16 di questo post
    http://www.ideepercomputeredinternet.com/2011/05/come-inserire-una-finestra-popup-di.html

    RispondiElimina
  17. Ciao.
    Potresti dirmi per cortesia come faccio a diminuire il testo del messaggio? Così come lo hai inserito per me risulta essere troppo grande.
    Grazie.

    RispondiElimina
    Risposte
    1. @Benzene
      Come diminuire il testo del messaggio?
      Al posto di
      …… Inserire il messaggio ….

      ci metti quello che vuoi, poco o tanto che sia.

      Elimina
    2. No forse non ci siamo capiti bene: intendevo il corpo del carattere :-)

      Elimina
    3. @Benzene
      Cambia la riga
      font-size:18pt;
      con
      font-size:14pt;
      o anche meno

      Elimina
    4. Quello lo avevo già fatto ma non diminuisce il corpo del carattere del testo ma solo della scritta "Avviso"...

      Elimina
    5. @Benzene
      In effetti ho risposto con troppa fretta. Prova a inserire il messaggio con questa sintassi


      <span style="font-size:small;">Testo messaggio</span>

      oppure così

      <span style="font-size:x-small;">Testo messaggio</span>

      Elimina
    6. Ottimo. Questo ha funzionato. Grazie :-)

      Elimina
  18. Ciao Ernesto, non ho capito dove devo posizionare il codice qui sopra
    Intendo prima di quale riga: ]]> ad esempio??

    Grazie!

    RispondiElimina
    Risposte
    1. @AmmPadova
      Hai letto il post distrattamente. Non si parla di modello ma di gadget HTML/Javascript in cui incollare il codice da aprire in Layout > Aggiungi un gadget

      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.