Caixa de Aviso Para Blog

Gostaria de colocar um aviso no seu blog e não sabe como? Hoje eu vou ensinar como colocar uma caixa de aviso no blog. Está caixa de avisos tem muitas utilidades. É um modelo simples feito CSS3 com opção de personalizar o tamanho da caixa, cor de fundo, bordas, fontes e etc.

Veja uma demonstração clicando aqui

Como colocar a caixa de aviso com opção fechar no blog?

É muito simples!

Vá até 'Layout' → Clique em 'Adicionar um Gadget'→ Escolha tipo 'HTML/Javascript' e cole o código seguinte.

<style type="text/css">
#aviso{
width:500px; /* Tamanho da caixa */
padding:5px; position:absolute; z-index:5000;}
.caja-aviso{
border:4px double #0080FF; /* 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: #CEECF5; /* 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 #CEECF5;}
</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/AVvXsEjuBReQVkJA7jYu8wWIAETuBQqIKNVArnSXY9REaDee46Irj3C84X_NMrv6wl8a9TEWYoAWZ9XjbQVWUAi84L6viTln-mMR7X_hcsQSzuPzp9RAIzeh8eJ_tJEsZp5Tm4p0eAfTu-adH-vW/" style="vertical-align:middle;"/></a></b></div>

<br/>
<fieldset class="caja-aviso">
<legend class="letrero-aviso" align="center">AVISO</legend>
”...Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker....”
<br/><div align="right"><a href="http://www.facebook.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuRUZeCH-aid39VY44N6KYotCPl0Ow_tIdC0gtXhUVsUMMFLPy-ifWnh3oFxUvh89W2vi8i-3S3R0MNpRyhjfqHpe9GMu9GecVawoYYl0rPhOWChH1RAx3w1xjF3AfL3ET7DXAWkCbGqiH/" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPmX_8VYze03-MjKeQDXupF7yOzPrOHtmfgTixt3wFMp3xj1ZaE1Rcs7RQ0iRjzz9VBeCew0bhJPwDPT0-6eMVtaf2ieeGlTdLg3oqfGcPk3PUzPmQ6dYkHhnpGgQu-U4jNRnu9jKIFLn4/" width="25"/></a></div>
</fieldset>

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

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

Não esqueça de colocar o seu nome de usuário do Facebook e o nome de usuário do Twitter no local onde está escrito “usuario”

Agora é só usar sem moderação.

# Compartilhar

Tweet