Tutoriais de menus

      Ola meninas tudo bem ??
      Bom hoje vou postar o tutorial de menu sabe muito tutos de menu
      Espero que vocês gostem ,, e meninas antes que
      eu me meta em encrenca os tutos não são meu ok??
      os tutos são bem legais para o seu blog então aproveitem
      eu sei que ja tem varias ideias de menus mais ,,
      mais estou fazendo isso de novo é esse post e tipo
      uma ideia muito legal rs mais acho legal o que estou fazendo
      e Leticia Reis seu blog era lindo ate você excluir ,, blog
      e para compartilhar coisas ,, bom aproveitem o blog rs

                                    tutos de menus

Vamos começar?

1 - Escolha um dos três modelos e copie o código abaixo dele.

MODELO 1

/* Categorias */
.categorias {
width: 260px;
padding: 0px 10px 0px 10px;
margin: 0;
font-size: 14px;
font-family: ‘Arial Narrow’, sans-serif;
text-align:center;
text-transform: uppercase;
background: #f2ccfd;
}
.categorias ul {
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0;
text-align:center;
background: #f2ccfd;
}
.categorias li {
border-bottom: 2px solid #fff;
margin: 0;
background: #f2ccfd;
text-align:center;
}
.categorias li a {
display: block;
padding: 0px 5px 0px 5px;
background-color: transparent;
color: #828282;
text-decoration: none;
margin-bottom:-4px;
margin-top:-4px;
text-align:center;
}
.categorias li a:hover {
background-color:none;
color: #fff;
text-align:center;
}
.categorias li a:visited {
color: #828282;
text-align:center;
}
.categorias a{
background-position: left center;
padding-left: 25px;padding-top: 2px;
padding-bottom: 2px;
border-bottom:0px solid #dfdfdf;
text-align:center;
text-align:center;
}

MODELO 2

/* Categorias */
.categorias {
width: 260px;
padding: 0px 10px 0px 10px;
margin: 0;
font-size: 15px;
font-family: ‘Century Gothic’, sans-serif;
text-align:center;
color:#fac0ca;
text-transform: uppercase;
}
.categorias ul {
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0;
color:#fac0ca;
text-align:center;
}
.categorias li {
border-bottom: 1px solid #ececec;
margin: 0;
color:#fac0ca;
text-align:center;
}
.categorias li a {
display: block;
padding: 0px 5px 0px 5px;
background-color: transparent;
color: #828282;
text-decoration: none;
margin-bottom:-4px;
margin-top:-4px;
text-align:center;
}
.categorias li a:hover {
background-color:none;
color: #fac0ca;
text-align:center;
}
.categorias li a:visited {
color: #828282;
text-align:center;
}
.categorias a{
background-position: left center;
padding-left: 25px;padding-top: 2px;
padding-bottom: 2px;
border-bottom:0px solid #dfdfdf;
text-align:center;
text-align:center;
}

MODELO 3

/* Categorias */
.categorias {
width: 260px;
padding: 0px 10px 0px 10px;
margin: 0;
font-size: 15px;
font-family: ‘Georgia’, sans-serif;
text-align:center;
color:#fac0ca;
}
.categorias ul {
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0;
color:#fac0ca;
text-align:center;
}
.categorias li {
border-bottom: 2px solid #ffdbe1;
border-top: 2px solid #ffdbe1;
margin: 0;
color:#fac0ca;
text-align:center;
}
.categorias li a {
display: block;
padding: 0px 5px 0px 5px;
background-color: transparent;
color: #828282;
text-decoration: none;
margin-bottom:-4px;
margin-top:-4px;
text-align:center;
}
.categorias li a:hover {
background-color:none;
color: #fac0ca;
text-align:center;
}
.categorias li a:visited {
color: #828282;
text-align:center;
}
.categorias a{
background-position: left center;
padding-left: 25px;padding-top: 2px;
padding-bottom: 2px;
border-bottom:0px solid #dfdfdf;
text-align:center;
text-align:center;
}

Observação: O trecho em vermelho é a largura dos marcadores. Modifique se necessário para ajustar ao seu template.

2 - Vá no painel do blogger > Modelo > Editar HTML. Pesquise (Ctrl + F) por:

]]></b:skin>

ACIMA desse trecho, cole o código referente ao modelo copiado.

Atenção: No novo modelo do blogger você só deve abrir a barra de pesquisa (Ctrl + F) após clicar dentro da caixa de códigos, caso contrário a sua pesquisa não apresentará resultados. A caixa de pesquisa deve aparecer assim:

3 - Agora, ainda no HTML do template pesquise por:

label1

Ao encontrar o trecho, clique na setinha preta ao lado esquerdo para expandir o widget.

Depois clique na setinha que aparecerá abaixo, para continuar expandindo.

Ao visualizar o trecho destacado abaixo:

Substitua-o por:

 <ul class=’categorias’>

4 - Visualize e se estiver tudo ok, salve.

Creditos {x}

Beijos meninas até o próximo post