Ola a todos, no tutorial de hoje do Lucrar Com Blog eu vou ensinar a colocar um menu horizontal com submenu para facilitar a pesquisa dos seus visitantes, este menu é aconçelhado para pessoas que disponibilizam pouco espaço no seu site para colocar Etiquetas na barra lateral, vamos começar:

  • Já tens um blog? Ganha dinheiro com ele registando-te na Netaffiliation

Como instalar?

  1. Vá ao Design do seu blogger
  2. Clique em editar HTML/JavaScript
  3. Expadir modelos de Widgets
  4. Procure pela tag: ]]>

Antes da tag ]]>  cole o seguinte código:

/* Menu horizontal com buscador
———————————————– */
#menuWrapper {
width:100%; /* Tamanho do menu */
height:40px;
padding-left:14px;
background:#444; /* Cor de fundo */
border-radius:5px; /* Bordas aredondadas */
}
.menu {
width: 100%;
float: left;
font-family:”Arial”, “Trebuchet Unicode MS”, “Lucida Grande”,sans-serif;
font-size:14px; /* Tamanho da fonte */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 5px 5px; /* Bordas aredondadas do sub-menu */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
border-right: 1px solid #666;
color:#cccccc; /* Color de la fuente */
display:block;text-transform:uppercase;
font-weight:normal;
line-height:40px;
margin:0px;
padding:0px 25px; /* Espaço entre cada casa */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2; /* Cor das casas ao passar o cursor */
color:#FFFFFF; /* Cor do texto ao passar o cursor */
text-decoration:none;
}
.menu li ul {
background:#333333; /* Cor de fundo do sub-menu */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Tamanho do sub-menu */
z-index:100;
border-top:1px solid #fff; /* Borda superior do sub-menu */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 5px 5px; /* Borda das sub-casas */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2; /* Cor das sub-casas ao passar o cursor */
color:#ffffff;
text-decoration:none;
}
#search {
width: 228px; /* Tamanho da caixa de busca */
height: 24px;
float: right;
text-align: center;
margin-top: 8px;
margin-right: 6px;
background: #fff;/* Cor de fundo da caixa de busca */
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Segundo passo tem de ir:

  1. Acesse ao blogger
  2. Design
  3. Adicionar mini-aplicação
  4. Escolha HTML/Javascript

Na caixa HTML/JavaScript edite e cole o seguinte código:

E é so editar e depois salvar, eu vou explicar como editar primeira caixa e depois você segue o mesmo exemplo para todas as outras:

: Tem de editar URL, no URL coloque o endereço do seu site/blog.

  • Casa 2.1

: No URL tem de colocar o endereço que quer para que o visitante seja redeirecionado e em Casa 2.1 coloque um nome qualquer, por exemplo:

Depois tem de editar todas as outras casas para onde quer que seu visitantes seja redirecionado quando clicar, se tiver dúvidas pergunte!
Assine nossa Newsletter gratuita para receber mais dicas:Enter your email address:

Delivered by FeedBurner

(Visited 239 times, 1 visits today)