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:
Vamos agora para o CSS. Acima do código anterior. ( ]]></b:skin> )
Coloque o seguinte CSS:
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.
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