Por favor, siga as instruções abaixo para adicionar o código html ao seu blog:
- Copie o código HTML fornecido abaixo.
- Acesse a seção ‘Layout’ do seu blog.
- Selecione a opção ‘Adicionar um Gadget’.
- Escolha a opção ‘Adicionar HTML/JavaScript’.
- Cole o código na área de ‘Conteúdo’. Deixe o campo ‘Título’ vazio.
Altera as opções em vermelho com a categoria de cada menu(NOME_DA_CATERGORIA_x), com os links(URL_x) e os nomes dos site (NOME_DO_LINK_x).
CÓDITO HTML/GADGET:
<!-- Martins King Programas -->
<!doctype html>
<style>
ul.acorh, ul.acorh * {
margin: 0;
padding: 0;
border: 0;
}
ul.acorh {
margin: 5px auto;
padding: 0;
list-style: none;
width: 100%;
font-size: 18px;
}
ul.acorh li {
list-style: none;
}
ul.acorh li a {
display: block;
padding: 10px 10px 10px 20px;
background: #000000;
color: #28f000;
border-bottom: 5px solid #3c3c3d;
border-top: 3px solid #ffffff;
text-decoration: none;
box-sizing: border-box;
}
ul.acorh li ul {
max-height: 0;
margin: 0;
padding: 0;
list-style: none;
overflow: auto;
transition-duration: 20000ms;
}
ul.acorh li li a {
padding: 10px 10px 10px 40px;
background: #ffffff;
color: #000000;
font-size: 16px;
border: 0;
border-bottom: 1px solid #fffafa;
box-sizing: border-box;
}
ul.acorh li li:last-child a {
border-bottom: 0;
}
ul.acorh li:hover ul {
max-height: 300px;
transition: .3s all ease-in;
}
ul.acorh li a:hover {
background: #28f000;
color: #000000;
}
</style>
<ul class="acorh">
<li><a href="#">NOME_DA_CATERGORIA_1</a>
<ul>
<li><a href="URL_1.1">NOME_DO_LINK_1.1</a></li>
<li><a href="URL_1.2">NOME_DO_LINK_1.2</a></li>
<li><a href="URL_1.3">NOME_DO_LINK_1.3</a></li>
<li><a href="URL_1.4">NOME_DO_LINK_1.4</a></li>
</ul>
</li>
<li><a href="#">NOME_DA_CATERGORIA_2</a>
<ul>
<li><a href="URL_2.1">NOME_DO_LINK_2.1</a></li>
<li><a href="URL_2.2">NOME_DO_LINK_2.2</a></li>
<li><a href="URL_2.3">NOME_DO_LINK_2.3</a></li>
<li><a href="URL_2.4">NOME_DO_LINK_2.4</a></li>
<li><a href="URL_2.5">NOME_DO_LINK_2.5</a></li>
</ul>
</li>
<li><a href="#">NOME_DA_CATERGORIA_3</a>
<ul>
<li><a href="URL_3.1">NOME_DO_LINK_3.1</a></li>
<li><a href="URL_3.2">NOME_DO_LINK_3.2</a></li>
<li><a href="URL_3.3">NOME_DO_LINK_3.3</a></li>
<li><a href="URL_3.4">NOME_DO_LINK_3.4</a></li>
</ul>
</li>
</ul></!doctype>