Come inserire un box dinamico con avviso in un blog di Blogger

0
279

Avete aperto un blog con la piattaforma Blogger e adesso sentite la necessità di comunicare qualcosa al lettore che lo visita ma non sapete come fare?


Nessuna paura, oggi andremo a vedere come inserire un box dinamico con avviso in un blog di Blogger che si apra nel momento in cui l’utente si collega al vostro sito.

Un box personalizzabile in linguaggio HTML/JavaScript per trasmettere al lettore, qualsiasi tipo di messaggio e che comprenda anche due pulsanti, uno che riporta al vostro profilo Facebook e uno che riporta al vostro profilo Twitter. 

Come inserire un box dinamico con avviso in un blog di Blogger

 

Come inserire un box dinamico con avviso in un blog di Blogger

Il codice sotto va inserito in un Gadget HTML/JavaScript attraverso questa procedura

Il codice da inserire è il seguente


<style type=”text/css”>
#avviso{
width:350px; /* Larghezza  */
padding:5px; position:fixed; z-index:5000;}
.box-avviso{
border:4px double #330000; /* Colore 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: #FFFFFF; /* Colore  sfondo */
padding: 8px; font-family: Times, Geneva, sans-serif;
color: #FF9900; /* Colore  testo */
}
.testo-avviso { /* Stile di AVVISO */
font-size:18pt;
font-weight:bold;
color:#FF6600;
</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″></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”>IMPORTANTE</legend>
  ……   TESTO BOX ….
<br/><div align=”right”><a href=”https://www.facebook.com/Unicoborza” target=”blank”><img src=”https://1.bp.blogspot.com/-tGmq-jRyLzY/XmEbl4yKpyI/AAAAAAAAAqQ/glRpuC4qX_cjyI2pmeuSb2kbt69VODowgCK4BGAYYCw/s1600/ICONA%2BFACEBOOBK%2BCARTELLO.png” width=”24″/></a>
<a href=”https://twitter.com/AlessioBorzani” target=”blank”><img src=”https://1.bp.blogspot.com/-HR-do7XdoZ8/XmEbpVEUXGI/AAAAAAAAAqw/K-2UVaQR_HkLn9xib1FNYls6dROyzWwtQCK4BGAYYCw/s1600/ICONA%2BTWITTER%2BQUADRATA.png” width=”24″/></a></div>
</fieldset>
<script>
function closeit(){
document.getElementById(“avviso”).style.visibility = “hidden”;
}
</script>
</div><div class=”clear”/></div>



Personalizzare il codice

  • width:350px modificando il numero cambierà la larghezza del box
  • #330000         colore del bordo del box
  • #909090          colore ombra  box
  • #FFFFFF       colore dello sfondo del box
  • #FF9900         colore del testo del box
  • #FF6600         colore del titolo del box
  • TESTO BOX al suo posto andrà inserito il testo che volete che i lettori visualizzino

 

  • Con Fixed l’avviso seguirà lo scorrere della pagina se lo sostituiamo con Absolute rimarrà fisso in un punto
  • I parametri  left:20px; top:200px; ci dicono che l’avviso si trova a 200 pixel dal bordo alto e 20 pixel da quello laterale, che può essere sinistro o destro, in questo caso è sinistro se vogliamo metterlo a destra sostituiamo left con right

Qui il link a una tabella con i codici dei colori 

 

Tipi di icone social


L’URL delle icone, nel codice, è scritto in blu e può essere sostituito

Per Facebook potete mettere questo URL

 
https://3.bp.blogspot.com/-MEmFiwLoykU/XmEbqzUMKcI/AAAAAAAAArI/LVeHkk74Mu88PUhzjYPvVF1fGu-prEuiwCK4BGAYYCw/s400/pecora%2Bfacebook.png
 
     L’icona visualizzata sarà questa           
                                                                                         Come inserire un box dinamico con avviso in un blog di Blogger

 

Per Twitter potete mettere questo URL

https://2.bp.blogspot.com/-Fr0hXC5BjBc/XmEbxPQyq3I/AAAAAAAAArs/KUm94gozBsYF7EL6boGYTVKrJsC-Q_ogQCK4BGAYYCw/s1600/pecora%2Btwitter.png
  L’icona visualizzata sarà questa   
                                                                                         Come inserire un box dinamico con avviso in un blog di Blogger

LASCIA UN COMMENTO

Per favore inserisci il tuo commento!
Per favore inserisci il tuo nome qui