Assine Nosso Feed!

Receba Nossas Atualizações em Seu E-mail:

  • Receba Todos os Nossos Artigos Automaticamente em Seu E-mail
  • Tenha a Exclusividade de Receber Boletins do Nosso Blog
  • Inscrever-se no feed do Nosso Blog é Fácil, Rápido e Seguro
  • Ajude a fazer Nosso Blog Crescer!!!


  • 18 de novembro de 2012

    Como colocar caixa de aviso no blog

     hoje trago a vocês  uma caixa de aviso em seu blog, apesar de não gostar muito essa tem uma aparência bacana com opção de fechar, é uma caixa simpes sem efeitos mas eficiente, com icones de Twitter e Facebook, 
    Antes do tutorial quero pedir a ajuda de vocês, como pode notar nosso blog é novo e precisamos que  divulgue  em redes sociais, curta nossa página no facebook, compartilhe comente nossos artigos, sua opinião é muito importante para nosso blog .

    Vá em layout >>  adicionar widget >> HTML/javaScript e cole o código abaixo onde deseja que apareça a caixa.

    <style type="text/css">
    #aviso{
    width:500px; /* Ancho de la caja */
    padding:5px; position:absolute; z-index:5000;}
    .caja-aviso{
    border:4px double #0080FF; /* Color del borde */
    -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: #094c74; /* Color de fondo */
    padding: 10px; font-family: Verdana, Geneva, sans-serif;
    color: #fff; /* Color del texto */
    }
    .letrero-aviso { /* Estilos de la palabra AVISO */
    font-size:18pt;
    font-weight:bold;
    color:#ad0918;
    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/AVvXsEibdNnLsEHhbDkfjwa5Tn1eCnojI4FB2n4eKAqHeOsU1bPJ4LmjQc-nvgvW1FtXRsIU9Nx4Kk-PNn3N2-FIl0EXtYBCYFc6LP7VUx8L_XUCTaI7y-uqFIIh2E61jQ4oJHe9i7aqDhL7xGQn/" style="vertical-align:middle;"/></a></b></div>

    <br/>
    <fieldset class="caja-aviso">
    <legend class="letrero-aviso" align="center">AVISO</legend>
    aqui vai a mensagem que deseja....
    <br/><div align="right"><a href="http://www.facebook.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhklJqFe0OkXoWUlhukIERNI0a-EHag0B2NqNZTmGHKpfCw5I7siAONUfmU-tebzlIVP3xRXkSO6yUIyro2RLf1gJTOBdfAufUkihhHQDqzZXqpWcjv5TDhN8KHVwfqMLwIwjw74sHuFrpb/" width="26"/></a>
    <a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPuv9hdfWN4pX1yQJwFKEHlLvgkzvCgMjKfVPxWQRlnRO2JrVCGzhZciIUO_qNbXJpPmRVE8Gw0PUu7ba2hv8RTyUgWZYHDdPpNdINgziRONbwFvAO7iX-NZml4f9neDB7QklX_91Ulw_z/" width="25"/></a></div>
    </fieldset>

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

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

    Confugurações:


    No texto em vermelho você troca pela mensagem que deseja que aparece, já na cor azul coloca o nome de usuário das redes sociais. Para ajustar a posição basta fazer as modificações em left:300px; top:100px 

    Salve e pronto

    2 comentários:

    1. Olá Juliano.

      Acredito que algumas vezes essa caixa pode ser bem utilizada.

      Abraços!

      ResponderExcluir
      Respostas
      1. Olá Herlan,

        É um prazer vê-lo aqui no TB, concordo com você, as vezes pode ser bem ultilizada sim mas com moderação, o uso exagerado pode ser prejudicial ao blog. mas não deixa de ser uma bela caixa.

        Abraços, volte sempre

        Excluir