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
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
L’URL delle icone, nel codice, è scritto in blu e può essere sostituito
Per Facebook potete mettere questo URL
Per Twitter potete mettere questo URL
