Menu drop-down jQuery para Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Depois de ter compartilhado varias opções de menu; gostaria de compartilhar um menu drop-down jQuery para Blogger.

 

Demo

 

menu dropdown

Como colocar o menu drop-down jQuery para Blogger no blog

1. Acesso o Painel do Blogger e navegue até Modelo > Editar HTML

(Veja: Como acessar o código XML/HTML na nova interface do blogger)

2. Encontre o seguinte código (use CTRL + F para encontrar o código)

]]>

Cole o seguinte código antes de ]]>

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

Agora encontre esse código:

Cole o código seguinte antes de

Agora clique em Salvar modelo.

1. Acesse o painel do seu blog
2. Clique na guia "Layout"
3. Clique em 'Adicionar um gadget' → Escolha tipo'HTML/Javascript' e cole o seguinte código:

Nota: Você deve alterar os títulos dos links e substituir o símbolo # com o endereço URL de cada um de seus links
Em seguida, clique em Salvar

- Se os links drop down não estão aparecendo, faça o seguinte:

Volte para Modelo > Editar HTML e procure (CTRL + F) por este código:

Você deve alterar um 1 com 3 e no com yes como no exemplo abaixo:

Clique em Salvar modelo e prontinho.

Até a próxima!

.

4 Comentários

  1. Ola, eu instalei o menu mas as sub-categorias nao apareceram elas ficam por baixo da area de postagens e das colunas, nao permitindo que meus leitores vejam os link’s para as paginas e marcadores. Tem algo que eu poderia fazer para deixa-las por cima ?

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.