Como criar sub-menus no Blogger

.

Olá galera, tudo beleza com vocês? Dona Teka na área.

Hoje eu vou ensinar a vocês, como colocar MENU e SUBMENUS no seu Blogger.

Antes de mais nada, quero pedir humildemente o seu like pra fortalecer na divulgação. Obrigado.

Sem mais delongas, vamos ao tutorial que se dará em 2 fases.

As cores do menu vem por padrão, entretanto, se você quiser, deixa no comentário a cor que você quer que eu altero pra você. De graça. kkkk 

1 – Esse será o nosso blog teste, como de praxe.

2 - Perceba que ele não tem nenhum MENU, isso significa que o processo todo sera iniciado do "0". Se você á tiver um blog com MENU e queira apenas incrementar seu menu, estarei fazendo um tutorial sobre COMO ADICIONAR SUBMENU AO SEU BLOG. então, se inscreve no meu canal no youtube e ativa o sininho para que quando eu postar, você seja avisado.

3 - Vá no perfil do seu Blogger e Clique em LAYOUT.

4 - Procure locazilar o local onde você quer que seu menu fique. No meu caso, coloquei abaixo do CABEÇALHO.

5 - Ao clicar, ira abrir uma pequena janela. Procure a opção HTML/JavaScript. Clique em cima.

6 - Em seguida é só colocar o Código HTML, que está logo abaixo da imagem, no local indicado.

---------------------------------------------------- 

<ul id="icbabdrop">

<li><a href="#">Inicio</a></li>

<li><a href="#">Musicas</a></li>

<li><a href="#">Moda</a></li>

<li>Galeria<ul>

<li><a href="#">Videos</a></li>

<li><a href="#">Fotos</a></li>

<li><a href="#">Dicas</a></li>

</ul> </li>

<li><a href="#">Contato</a></li>

</ul>

----------------------------------------------------------------------

7 - Salva Tudo.

8 - Se vocês forem iguais a mim, que não pode fazer uma alteração que já quer ver resultado, provavelmente, no blog de vocês aparecerá assim. Calma! Isso faz parte.

9 - Beleza galera, chegamos a segunda fase. Cliquem em TEMA e em seguida cliquem em PERSONALIZAR.

10 - Cliquem em AVANÇADO e procure por ADICIONAR CSS.

11 - Chegando nessa parte, copie o Código HTML e cole no espaço indicado na imagem.

----------------------------------------------------------------------

/* DONATEKATUTOR BY icanbuildablog.com */

.tabs-inner .widget ul#icbabdrop {

display: inline;

border:none;

}

.tabs-inner .widget ul#icbabdrop li {

font-size: 14px;

font-family: Century Gothic; /* Font for the menu */

display: inline-block;

margin-right: 0px;

position: relative;

padding: 5px 20px;

background: #fff; /* cor de fundo no menu */

float:none;

cursor: pointer;

-webkit-transition: all 0.2s;

-moz-transition: all 0.2s;

-ms-transition: all 0.2s;

-o-transition: all 0.2s;

transition: all 0.2s;

}

.tabs-inner .widget ul#icbabdrop li a {

padding:0;

font-family: Century Gothic; /* Font for the menu links */

border:0;

}

.tabs-inner .widget ul#icbabdrop li:hover {

background: #555; /* cor de fundo quando o mouse está sobre o titulo */

color: #fff; /* cor da fonte quando o mouse está sobre o titulo  */ 

}

.tabs-inner .widget ul#icbabdrop li:hover a {

background: transparent;

color: #fff; /* cor do link do menu quando o mouse está sobre o titulo  */ 

}

.tabs-inner .widget ul#icbabdrop li ul {

z-index:1000; 

border:none;

padding: 0;

position: absolute;

top: 26px;

left: 30px;

float:none;

width: 150px;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

display: none;

opacity: 0;

visibility: hidden;

-webkit-transiton: opacity 0.2s;

-moz-transition: opacity 0.2s;

-ms-transition: opacity 0.2s;

-o-transition: opacity 0.2s;

-transition: opacity 0.2s;

}

.tabs-inner .widget ul#icbabdrop li ul li { 

background: #555; /* cor de fundo do submenu */

display: block; 

color: #fff; /* cor da fonte do sub-menu */

text-shadow: 0 -1px 0 #000;

}

ul#icbabdrop li ul li a{

color:#fff/* link colour of the sub menu items */

}

.tabs-inner .widget ul#icbabdrop li ul li:hover { 

background: #666; /* cor de fundo dos itens do submenu */

}

.tabs-inner .widget ul#icbabdrop li:hover ul {

display: block;

opacity: 1;

visibility: visible;

}

----------------------------------------------------------------------

12 - Salva tudo e visualiza.

Tã dãaaaaaaaaa!

Prontinho, seu menu já tem Submenus. 

BLZ

Curte meu canal no Youtube e receba as melhores e mais fáceis dicas para deixar seu Blog SENSACIONAL.

ABRAÇOS GALERA!

LEMBREM-SE, TUDO QUE VEM FÁCIL, VAI FÁCIL. ;)

DEUS É MAIS.

Deixe seu Like e se increva no meu canal pra ajudar na divulgação. rs =)

VÍDEO TUTORIAL 

COMO LINKAR OS MENUS (DEIXAR FUNCIONANDO)