Blogger passo a passo

O menu seguinte é feito apenas com CSS, ele é um menu horizontal com sub-abas, e do lado direito tem uma busca arredondada.

Esse menu é útil para aqueles que não necessitam de menus complexos ou preferem não usar um que requeira scripts e / ou imagens demais, e também a instalação e personalização é bastante simples, e ainda por cima é bastante funcional, e que ter o motor de busca integrado pode ter dois elementos na mesma área.

Você pode vê-lo aqui: teste neste blog , basta você digitar a palavra de pesquisa e pressionar ENTER.

ATENÇÃO: Se você estiver usando um modelo feito através do Designer de modelo do Blogger primeiro precisa seguir os passos deste post .

Para colocar este menu horizontal com submenus em seu blog vá em Editar HTML no seu modelo, e antes de]]> </ b: skin> cole os estilos:

/ * Menu horizontal pesquisa
----------------------------------------------- * /
MenuWrapper # {
width: 100%; / * largura do menu * /
height: 35px;
padding-left-: 14px;
background: # 333333; / * cor de fundo * /
border-radius: 20px; / * bordas arredondadas * /
}
. {Menu
largura: 100%;
float: left;
font-family: "Lucida Sans Unicode", "Trebuchet MS Unicode", "Lucida Grande", sans-serif;
font-size: 13px; / * Tamanho da fonte * /
font-weight: bold;
}
. Menu ul {
float: left;
height: 0px;
list-style: none;
margin: 0;
padding: 0;
border-radius: 20px 20px 0px 0px; / submenu * bordas arredondadas * /
}
. Menu li {
float: left;
padding: 0px;
}
. Menu li a {
background: # 333333 inferior direito no-repeat;
color: # cccccc; / cor da fonte * /
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px; / * espaço entre cada guia * /
text-align: center;
text-decoration: none;
}
. Menu li a: hover, menu ul li:. Pairar a {
background: # 2580a2; / * Cor. ao passar * /
color: # FFFFFF; / Cor do texto * quando passando * /
text-decoration: none;
}
. Menu li ul {
background: # 333333; submenu Cor / * fundo * /
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; / * Largura submenu * /
z-index: 100;
border-top: 1px solid # fff; / * borda superior do submenu * /
}
. 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: 20px 0px 20px 0px; / Edge * sub-abas de * /
}
. Menu ul li a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 10px 0px 0px 15px;
text-align: left;
}
. Menu ul li a:. Hover, menu li ul li: hover {um
background: # 2580a2; / * Cor das sub-abas ao passar * /
color: # ffffff;
text-decoration: none;
}

# Pesquisa {
width: 228px / * largura do navegador * /
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/ * Pesquisa de imagem de fundo * /
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFwdnRY13eLgm8dUTHpOv5diu9crGAPPOO-1soIzHUzl19nQuuMl24ZW5VK10G2HGmdn6wfPpoMmYuEyAhI_80FejEfP6ppKcAbsgIyCej6EMxE7jWc4P7N1QxOFJphRklnt2VTrnE47s/s1600/search-bar.png) no-repeat;
}
# Pesquisa caixa-{
margin-top: 3px;
margem: 0px;
background: transparent;
text-align: center;
}

Em seguida, vá para a seção de design, e adicione um elemento de página HTML / Javascript e cole: