Como exibir Caixa de Aviso no Blogger com opção fechar

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

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.

ScreenShot001

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

É muito simples!

Abra o painel do Blogger, clique no menu “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://lh5.googleusercontent.com/-46DmTbFSiuQ/TliKe_XV0lI/AAAAAAAAGJ4/_H2c3HB4XoY/CloseIcon-small.png" 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://lh6.googleusercontent.com/-9TNSAdSEm2o/Tlgi_wnuKZI/AAAAAAAAGJw/6rLfLd-QfkE/facebook.png" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://lh6.googleusercontent.com/-xk9JDUThPo0/TlgjAUiI4eI/AAAAAAAAGJ0/t5QtAN0xPco/twitter.png" 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 com moderação.

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

8 Comentários

  1. Sensacional! É bom dizer que o gadget precisa ficar no alto e do lado esquerdo, de forma que a imagem apareça quase centralizada na tela. E eu creio que tenha como configura-la… quem sabe eu recebo mais essa ajuda? 😉 O Correto pra mim seria deixar o gadget embaixo de absolutamente tudo. Abraços e parabéns!

    Responder

  2. Muito bom! Editei bastante ele dentro das minhas capacidades… só não consegui colocar a palavra AVISO dentro do box também. 😉 Obrigado! Ah sim, o BUG citado antes já foi embora!

    Responder

  3. Boa noite! Copiei o código no bloco de nota e fiz as alterações salvei com a extensão “html” abriu certinho conforme configurado (por sinal muito bonito) entretanto ao copiar o código para o blog, inserindo “Gadget HTML/JavaScript” a janela não aparece, pode me ajudar?

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.