Curta Nossa Página do Facebook!


  • Desenvolvido Por Iago Melanias

    Botão Abre/Fecha - Spoiler

    E ai galera! Venho trazer à vocês o botão spoiler. Aqui vai um exemplo:






    DEMO
    1) Contem: JavaScript, HTML e CSS.

    Vamos começar pelo JavaScript. Abra o Blogger > Design > HTML.

    Procure por:

    ]]></b:skin>
    Abaixo dele coloque o seguinte código:

    <script type='text/javascript'> function abrefecha()
    {
    if(af.style.display == "none")
    {
    af.style.display = "block";
    }
    else
    {
    af.style.display = "none";
    }}
          </script>

    Vamos agora para o CSS. Acima do código anterior. ( ]]></b:skin> )

    Coloque o seguinte CSS:

    <style> #dg {
    background-color:#ffffff; display:block;
    padding-left:1px;
    border-left:10px solid #ffffff;
    border-bottom:1px solid #BBBBBB;
    font-weight:bold;
    color:#666666;
    line-height:175%;
    }
    #dg:hover {
    background-color:#3333333;
    display:block;
    padding-left:0;
    font-weight:bold;
    border-left:10px solid #333333;
    border-bottom:1px solid #bbbbbb;
    color:#9d4709;
    } </style>

    <style>
    #af {
    background-color:#fff;
    display:block;
    padding-left:0;
    font-weight:bold;
    border-left:10px solid #333333;
    border-bottom:1px solid #bbbbbb;
    color:#9d4709;
    }
    #af:hover {
    background-color:#fff;
    display:block;
    padding-left:0;
    font-weight:bold;
    border-left:10px solid #333333;
    border-bottom:1px solid #bbbbbb;
    color:#9d4709;
    }
    </style>

    Em seguida, Salve.

    Agora crie uma nova postagem e aplique o seguinte HTML:


    Salve e visualize. Caso queira, vá no CSS e modifique para seu gosto. Se quer colocar texto ao invés dos links, é só apagar o "<a href...>...</a>" e digitar o texto que quiser ou colocar uma imagem. Espero que gostem, vlw! Caso tenha alguma dúvida, comente ou fale comigo no xat.

    0 Deixe um Comentário:

    Postar um comentário