Criar Menu e Submenu em Blog - Passo a Passo através de um código HTML ( Atualizado 2022 )

Criar Menu e Submenu em Blog - Passo a Passo através de um código HTML ( Atualizado 2022 ) - Curso para Blogger

Como criar Menus e colocar postagens dentro das páginas no Blogger

Como criar Menus e colocar postagens dentro das páginas no Blogger-Criando Menus - Como colocar as Postagens neles? Como criar Menus no Blogger ( Atualizado 2022). Aprenda como Criar, editar e inserir postagens nos Menus e Submenus do seu Blog, nessa vídeo aula vamos ensinar vocês a fazerem tudo isso através de um simples Gadget.

Evolução dos Sites

Estamos em uma época onde a evolução de design nos sites estão cada vez mais constantes, estamos sempre atualizando, criando e inovando, seja por Templates prontos ou por edição manual em HTML. Os submenus e menus fazem parte dessa transformação, sendo possível filtrar e organizar seu conteúdo.

Como criar Menus com Submenus no Blogger (Blogspot)

Como criar Submenus no Blogger

Hoje vamos ensiná-los uma maneira bem simples de como criar submenus no Blogger através de um código HTML, ele funciona tanto em Blog com templates de terceiros como templates padrão.

Download do Código HTML a ser usado no vídeo

Download do melhor editor HTML :

Bloco de Notas++

Ou, você pode copiar e colar o código :

<style type="text/css"> *, *:after, *:before{   margin: 0;   preenchimento: 0;   dimensionamento de caixa: caixa de borda;   família de fontes: sem serifa;   tamanho da fonte: 14px;   altura da linha: 1,5; } .menu{   background: #000; } .menu .menu-list, .menu .sub-menu{   estilo de lista: nenhum; } .menu a{   cor: #fff;   decoração de texto: nenhuma;   exibição: bloco;   cursor: ponteiro;   transformação de texto: maiúsculas;   tamanho da fonte: 12px;   peso da fonte: 700;   espaçamento entre letras: 0,2em; } .menu > .menu-list > li{   float: left;   posição: relativa; }
.menu > .menu-list > li > a {   preenchimento: 20px;   margem: 0 5px;   fundo: #000; } .menu > .menu-list > li:hover a {   background: #444; } .menu > .menu-list > li:hover > .sub-menu {   display: block; } .menu > .menu-list > li > .sub-menu {   position: absolute;   topo: 50px;   esquerda: 5px;   fundo: azul;   largura mínima: 200px;   índice z: 1000;   Mostrar nenhum; } .menu > .menu-list > li > .sub-menu > li > a { padding: 10px 20px; } .menu:after {   content: '.';   exibição: bloco;

  altura da linha: 0;   altura: 0; } .site-content{   preenchimento: 20px; } h1{   tamanho da fonte: 22px;   margem: 0 0 0,6em 0;   espaçamento entre letras: 0,2em;   cor: #444; } p{   margem: 0 0 1,6em 0; } </style> <div class="menu"> <ul class="menu-list"> <li><a href="#">Início</a></li> <li> <a href= "#">Menu1</a> <ul class="sub-menu"> <li><a href="#">Item</a></li> <li><

<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#" >Menu4</a></li>
</ul>

</div>

Confira a vídeo aula logo abaixo e tire suas dúvidas.

Os filmes evangélicos mais assistidos desde sempre