Colocar Menu Horizontal No Blogger

Coloque um menu horizontal em seu blog, cheio de estilo e com várias opções de cores.

O ProDeveloper disponibiliza um menu horizontal perfeito para colocar em seu blog e destinar seus usuários para páginas desejadas. O menu é feito em HTML e CSS com configuração relativamente fácil, restando a você escolher o modelo desejado e seguir o passos que ensinarei logo abaixo.

Os modelos disponibilizados são mostrados por uma imagem para que você escolha o seu preferido e logo abaixo os códigos CSS correspondentes a cada um.

MODELOS

Estilo 1

/* Menu CSS */
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a{
padding: 0;
margin: 0;
line-height: 1;
font-family: 'Capriola', sans-serif;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: table;
}

#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
height: 69px;
background: url(http://2.bp.blogspot.com/-9Tk4y88n76E/UhKnwk7_eOI/AAAAAAAABqA/1-ykEfk9C6w/s1600/bottom-bg.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(http://2.bp.blogspot.com/-Kmv8bBt4pUQ/UhKnw5uEEXI/AAAAAAAABqE/DmhG3agG944/s1600/nav-bg.png) repeat-x 0px 4px;
height: 69px;
}
#cssmenu ul li{
float: left;
list-style: none;
}
#cssmenu ul li a{
display: block;
height: 37px;
padding: 22px 30px 0;
margin: 4px 2px 0;
border-radius: 2px 2px 0 0;
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
font-weight: 400;
opacity: .9;
}
#cssmenu ul li:first-child a{
margin: 4px 2px 0 0;
}
#cssmenu ul li a:hover, #cssmenu ul li.active a{
background: url(http://3.bp.blogspot.com/-7z2zA_rxLbU/UhKnxFminrI/AAAAAAAABqQ/b7SM8lAfwrU/s1600/color.png) center bottom;
display: block;
height: 37px;
margin-top: 0px;
padding-top: 26px;
color: #4e6d04;
text-shadow: 0 1px 1px rgba(255, 255, 255, .55);
opacity: 1;
}

Estilo 2

/* Menu CSS */
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a{
padding: 0;
margin: 0;
line-height: 1;
font-family: 'Capriola', sans-serif;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: table;
}

#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
height: 69px;
background: url(http://1.bp.blogspot.com/-Cdl127K_C5E/UhKrbQ21ZnI/AAAAAAAABqc/kAQGbXtafgM/s1600/bottom-bg1.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(http://2.bp.blogspot.com/-Kmv8bBt4pUQ/UhKnw5uEEXI/AAAAAAAABqE/DmhG3agG944/s1600/nav-bg.png) repeat-x 0px 4px;
height: 69px;
}
#cssmenu ul li{
float: left;
list-style: none;
}
#cssmenu ul li a{
display: block;
height: 37px;
padding: 22px 30px 0;
margin: 4px 2px 0;
border-radius: 2px 2px 0 0;
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
font-weight: 400;
opacity: .9;
}
#cssmenu ul li:first-child a{
margin: 4px 2px 0 0;
}
#cssmenu ul li a:hover, #cssmenu ul li.active a{
background: url(http://4.bp.blogspot.com/-xqKt7IshsOM/UhKrbjDF2eI/AAAAAAAABqg/xLDOJQERqD4/s1600/color1.png) center bottom;
display: block;
height: 37px;
margin-top: 0px;
padding-top: 26px;
color: #004f7c;
text-shadow: 0 1px 1px rgba(255, 255, 255, .55);
opacity: 1;
}

Estilo 3

/* Menu CSS */
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a{
padding: 0;
margin: 0;
line-height: 1;
font-family: 'Capriola', sans-serif;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: table;
}

#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
height: 69px;
background: url(http://1.bp.blogspot.com/-CLc57ixO9pA/UhKr58ZhGCI/AAAAAAAABqw/UqoqrHpG6qs/s1600/bottom-bg2.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(http://2.bp.blogspot.com/-Kmv8bBt4pUQ/UhKnw5uEEXI/AAAAAAAABqE/DmhG3agG944/s1600/nav-bg.png) repeat-x 0px 4px;
height: 69px;
}
#cssmenu ul li{
float: left;
list-style: none;
}
#cssmenu ul li a{
display: block;
height: 37px;
padding: 22px 30px 0;
margin: 4px 2px 0;
border-radius: 2px 2px 0 0;
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
font-weight: 400;
opacity: .9;
}
#cssmenu ul li:first-child a{
margin: 4px 2px 0 0;
}
#cssmenu ul li a:hover, #cssmenu ul li.active a{
background: url(http://1.bp.blogspot.com/-WRTU7xrATsA/UhKsRmeQy8I/AAAAAAAABq8/B38vdYSYHek/s1600/color2.png) center bottom;
display: block;
height: 37px;
margin-top: 0px;
padding-top: 26px;
color: #004f7c;
text-shadow: 0 1px 1px rgba(255, 255, 255, .55);
opacity: 1;
}

Estilo 4

/* Menu CSS */
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a{
padding: 0;
margin: 0;
line-height: 1;
font-family: 'Capriola', sans-serif;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: table;
}

#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
height: 69px;
background: url(http://1.bp.blogspot.com/-EFhk3jDq3O8/UhKs1MTCsgI/AAAAAAAABrI/byncqVy1LNo/s1600/bottom-bg3.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(http://2.bp.blogspot.com/-Kmv8bBt4pUQ/UhKnw5uEEXI/AAAAAAAABqE/DmhG3agG944/s1600/nav-bg.png) repeat-x 0px 4px;
height: 69px;
}
#cssmenu ul li{
float: left;
list-style: none;
}
#cssmenu ul li a{
display: block;
height: 37px;
padding: 22px 30px 0;
margin: 4px 2px 0;
border-radius: 2px 2px 0 0;
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
font-weight: 400;
opacity: .9;
}
#cssmenu ul li:first-child a{
margin: 4px 2px 0 0;
}
#cssmenu ul li a:hover, #cssmenu ul li.active a{
background: url(http://1.bp.blogspot.com/-BR4LWv3fvYY/UhKs09uOThI/AAAAAAAABrE/Sq2fDKS-bCw/s1600/color3.png) center bottom;
display: block;
height: 37px;
margin-top: 0px;
padding-top: 26px;
color: #004f7c;
text-shadow: 0 1px 1px rgba(255, 255, 255, .55);
opacity: 1;
}

Estilo 5

/* Menu CSS */
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a{
padding: 0;
margin: 0;
line-height: 1;
font-family: 'Capriola', sans-serif;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: table;
}

#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
height: 69px;
background: url(http://2.bp.blogspot.com/-pohjhNCaKTM/UhKtKX-cqrI/AAAAAAAABrU/DbtfP81pxbs/s1600/bottom-bg4.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(http://2.bp.blogspot.com/-Kmv8bBt4pUQ/UhKnw5uEEXI/AAAAAAAABqE/DmhG3agG944/s1600/nav-bg.png) repeat-x 0px 4px;
height: 69px;
}
#cssmenu ul li{
float: left;
list-style: none;
}
#cssmenu ul li a{
display: block;
height: 37px;
padding: 22px 30px 0;
margin: 4px 2px 0;
border-radius: 2px 2px 0 0;
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
font-weight: 400;
opacity: .9;
}
#cssmenu ul li:first-child a{
margin: 4px 2px 0 0;
}
#cssmenu ul li a:hover, #cssmenu ul li.active a{
background: url(http://4.bp.blogspot.com/-yoAx4XXScSI/UhKtMNQbwsI/AAAAAAAABrc/G7seb3LQXQA/s1600/color4.png) center bottom;
display: block;
height: 37px;
margin-top: 0px;
padding-top: 26px;
color: #004f7c;
text-shadow: 0 1px 1px rgba(255, 255, 255, .55);
opacity: 1;
}

Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Colocando O Menu No Blogger

1º Passo - Acesse seu Blogger, no menu lateral clique em "Modelo" e depois em "Editar HTML".

2º Passo - Clique no código, pressione "CTRL+F" e pesquise por </header>.

3º Passo - Logo ACIMA dessa tag cole o código abaixo:

<div id='cssmenu'>
<ul>
<li class='active '><a href='LINK AQUI'><span>Home</span></a></li>
<li><a href='LINK AQUI'><span>Sobre</span></a></li>
<li><a href='LINK AQUI'><span>Privacidade</span></a></li>
<li><a href='LINK AQUI'><span>Parceria</span></a></li>
<li><a href='LINK AQUI'><span>Contato</span></a></li>
</ul>
</div>

Em VERMELHO, troque pelos links das páginas desejadas;

Em AZUL, troque pelos nomes que você deseja que apareça.

* Para ter mais itens ao menu basta adicionar mais uma linha de código como esta:

<li><a href='LINK AQUI'><span>NOME AQUI</span></a></li>

4º Passo - Agora pesquise por ]]></b:skin>.

5º Passo - Logo ACIMA cole o código do menu que você escolheu.

6º Passo - Clique em "Visualizar", se estiver de acordo como desejado clique em "Salvar Modelo".

Deixe seu comentário, pois ele é a motivação para nosso trabalho.

Mundo dos Blogueiros Brasil - Um blog só para blogueiros

Opções

Colocar Menu Horizontal No Blogger

Colocando O Menu No Blogger

0 comentários:

Postar um comentário

Copyright 2012 Downloads Gratis - Filmes, Musicas, Programas, Cursos | Design by BaixarTemplatesNovos