segunda-feira, 19 de setembro de 2011

Como colocar uma caixa de aviso

Criar uma caixa de aviso é muito simples veja o exemplo abaixo:




  Para usá-la, basta irmos em Design> Elementos de página> Adicionar umgadget> HTML Javascript e colar o seguinte: 







<style type="text/css">
#aviso{
width:500px; /* Altura da caixa */
padding:5px; position:absolute; z-index:5000;}
.caja-aviso{
border:4px double #000000; /* Cor da borda */
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #808080; -moz-box-shadow: 8px 8px 6px #808080; box-shadow: 8px 8px 6px #808080;
background-color: #D3D3D3; /* Cor de fundo */
padding: 10px; font-family: Verdana, Geneva, sans-serif;
color: #0B173B; /* Cor do texto */
}
.letrero-aviso { /* Estilos da palavra AVISO */
font-size:18pt;
font-weight:bold;
color:#B4045F;
text-shadow: 0px 0px 10px #BA55D3;}
</style>


<div id="aviso" style="left:300px; top:100px; padding:0;">
<div align="right" style="margin-bottom:-30px;"><b><a href="javascript:closeit()" ><font face="Arial" size="1">[FECHAR]</font> <img valign="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlBgdy3TlBWwV1L25umc0lZ0xXjExl1y3pJ6_hlZ85c57ZW1C-ObaUkb_C6mCYp72PUjwGd9DRDRFyzjw6dMOV1S4r_n7PBpJ8KYEU0YBYtUlRY0HqfI8lrKdi6FbgATNurpRVqfONMpnQ/" style="vertical-align:middle;"/></a></b></div>


<br/>
<fieldset class="caja-aviso">
<legend class="letrero-aviso" align="center">AVISO</legend>
...Escreva aqui sua mensagem...
<br/><div align="right"><a href="http://www.facebook.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUR7DWbQYxU4_0gRKzNBhVMx4XrPHSC3QZiREJko2s6ykChxWC-ZJW7KYEYpJcl3KiRJo6P4Nx9jIezCrZkedu6Q_NPRyI_hj8GOtwO7SPNAs0pKlM2vh7Xr-B6qxQ4awJZiu60IxFOLbY/" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTEGV_sGofcv7a0LiLH4N434LfKrYPvPR-4Gn-P6rb5Odj1ERojRpmjyisH0d7Gm62bflWnmq0R3ofe1whmgwBYyhlyFoo41pDQmWvtVG1VMuqZX9sCXIXep9VhIIxONWO8sVgaaRIaFWO/" width="25"/></a></div>
</fieldset>


<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>


</div><div class="clear"/></div>




Você só terá que escrever a mensagem no lugar indicado "Escreva aqui sua mensagem" e colocar seu nome de usuario do facebook e do twitter se desejar.

Nenhum comentário:

Postar um comentário