segunda-feira, 12 de janeiro de 2015

Saiba como criar uma FAQ dinâmica em seu blog

A palavra FAQ é a abreviação da expressão inglesa ''Frequently Asked Questions'', que significa ''perguntas mais frequentes''. É utilizada em um ambiente de perguntas e respostas, no qual o leitor busca uma resposta clara e objetiva sobre os serviços de um site ou blog, conforme novas dúvidas vão se formando, mais respostas vão se formulando, assim, alimentando a FAQ. Este recurso pode ser inserido tanto em postagens, como também nas páginas estáticas (que é o mais recomendado).

Neste tutorial, ensinarei como construir uma FAQ dinâmica e bastante útil, usando HTML e CSS3;


Download

1º passo - Começaremos adicionando a folha de estilo em cascata CSS3;

.toggle-box {
display: none;
}

.toggle-box + label {
cursor: pointer;
display: block;
font-weight: bold;
line-height: 24px;
margin-bottom: 6px;
}

.toggle-box + label + div {
display: none;
margin-bottom: 10px;
}

.toggle-box:checked + label + div {
display: block;
}

.toggle-box + label:before {
background-color: #8BAF1C;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
color: #FFFFFF;
content: "+";
display: block;
float: left;
font-weight: bold;
height: 20px;
line-height: 20px;
margin-right: 7px;
text-align: center;
width: 20px;
}

.toggle-box:checked + label:before {
content: "\2212";
}

body { -webkit-animation: bugfix infinite 2s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }



A parte destacada na cor vermelha refere à cor do plano de fundo das pequenas caixinhas seletoras, altere caso desejar.

2º passo - Agora chegou a vez de adicionarmos o código em HTML para a caixa:

<input class="toggle-box" id="identifier-1" type="checkbox" >
<label for="identifier-1">PRIMEIRA PERGUNTA</label>
<div>PRIMEIRA RESPOSTA...</div>

A parte destacada na cor vermelha se refere aos seletores de cada identificador. Ao adicionar mais perguntas e respostas, deve-se alterar os números em ordem crescente, tanto para as perguntas, quanto para as respostas.

Resultado final da FAQ:

Crie uma resposta relacionada com a pergunta. As demais seções abaixo serão editadas por quem fizer o Download do código completo.
Crie uma resposta relacionada com a pergunta. As demais seções abaixo serão editadas por quem fizer o Download do código completo.
TERCEIRA RESPOSTA...
QUARTA RESPOSTA...
QUINTA RESPOSTA...
SEXTA RESPOSTA...

Seguindo os passos deste tutorial, não terá problemas em editar e personalizar sua nova FAQ. Não se esqueça de visualizar o resultado desta postagem. Para fazer o Download do código, clique aqui.

Fonte: BASICuse

Bruno Bezerra

Bruno Bezerra é blogueiro e estudante. Mantém como foco principal a plataforma Blogger, no qual começou a realizar seus projetos. Gosta de mexer com HTML e CSS.
comments powered by Disqus

 

Copyright @ 2011-2015 Fique Sabendo!.