Blogger passo a passo

terça-feira, 26 de março de 2013

Menu horizontal com sub-abas e buscador integrado

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:

Coloque as URLs dos links onde se indica asim como o nome de suas abas.

No primeiro código pode-se ver as áreas que podem ser personalizadas tais como a cor, etc.

A aparência redondada do menu tambem é CSS, assim quando se usa um navegador antigo não se verá essas bordas.

Se quiseres adicionar outra aba adicione antes do último </ul> em cor azul uma linha como esta:

Se quiseres que esta tenha submenus então o código que deverás colocar é este:

»»Leia mais

segunda-feira, 25 de março de 2013

Como usar qualquer menu nas planilhas de Design do Blogger

Desde que apareceram as planilhas de Design do Blogger os menus com submenus não funcionam. A razão é que essas planilhas tem estilos predefinidos nesta área e desabilitam qualquer outro menu que se agregue. Para que se tenha esse submenu, é necessário seguir os seguintes passos:

Primeiro, entramos em Design / Editar HTML e clicamos em SIM expandir e busque esta linha:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Apague o que está em vermelho.
É possível que se tenha muitas partes como a que está em vermelho, apague todas que encontrar.
Depois busque esta parte na planilha:

/* Tabs
----------------------------------------------- */

E elimine tudo que houver dentro dele. Por exemplo, na planilha Awesome Inc. eliminariamos tudo que está na cor verde :

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid $(tabs.border.color);
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: $(tabs.font);
color: $(tabs.text.color);
border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}
.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}
/* Headings
----------------------------------------------- */

Depois de apagado, cole em seu lugar o seguinte:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

Uma vez feito isto, podemos adicionar qualquer menu nos nossos blogs com submenus sem problemas.