Painel acordeom CSS3 para Blogger

Olá amigos Mult-focos, neste post temos um painel acordeom CSS3 para Blogger com quatro destaques que pode ser modificado para mais ou menos como lhe convier.

Veja um demo clicando no botão abaixo.

DEMO
Como adicionar no seu blog?

 I - Vá ao painel do Blogger->Modelo->Editar HTML->use Ctrl+F e localize esta tag

]]></b:skin>

Acima desta tag copie e cole o código CSS abaixo

(Clique na seta para ver o código)

.accordion {
position:relative;
background-color:LightBlue;
border-radius: 5px;
}
.accordion > input {
display:block;
margin:0 0;
width:100%;
height:30px;
position:relative;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0);
}
.accordion > label {
display:block;
font:normal bold 12px/30px 'Lato',sans-serif;
background-color:#358DB6;
border-radius: 5px;
color:white;
margin:-30px 0 0 0;
padding:0 15px;
}
.accordion > div {
padding:10px 15px;
display:none;
}
.accordion > input:checked + label {
background-color:#00688B;
border-radius: 5px;
}
.accordion > input:checked + label + div {
display:block;
}

II – Copie o código javascript abaixo e cole em um bloco de notas e coloque a URL do seu blog.

 (Clique na seta para ver o código)

<div class="accordion">
<input type="checkbox">
<label>Título</label>
<div>Conteúdo</div>
<input type="checkbox">
<label>Título</label>
<div>Conteúdo</div>
<input type="checkbox">
<label>Título</label>
<div>Conteúdo</div>
<input type="checkbox">
<label>Título</label>
<div>Conteúdo</div>
</div>

III – Agora com o código configurado em mãos vá ao painel do Blogger -> Layout->adicionar um gadget- >HTML/javascript->na janela que abrir cole o código em conteúdo->salve.
Isto é tudo.

---

---