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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4bZLOrzf6JZ6BTvaWwLhyphenhyphenUanjNwV6t48pm9QGapTt7RwY-vtOm7qolhZ56EhG4w2609_7Wf4a-MH3QAJXN0iwoF3_V-78pcvElr4npY5upcop9gi-i48VwlheYKArpZwnv5tSlnSlyB8/s1600/bottom-bg.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil5iRoXI2lRrQ8csb-BgAcvH2Nws98E2OifuP-CrnUJnh8npZ1DBszYPRXIeJhzlQlgB_lyNsDdcNu3Exncd4z7jvFG2BCaUu8jLpS2yexMdDPT-ebZbDac_SWY_5sH_enLxGIkMjYVrc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCc0pfRSifM6-5ndkWN5PrWvdQCPsxPnsdwsEqLUObmXmVMjqBEXBARQSU7S1i39HjB0AWXyLF2cuGwQAuaRXMjtTyoVPu0JeXMHqDVb4gB_8Rpl2r9WOYxURxJWE4mN8lGRjm4vzYfcA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixoWHIAzRLWWs2js2_CYfKCbQ5pcN6m9FNXfV6gRz-44md1q9vBZJfK-GNZ9UTT1-qQldgs72IFvTLMuD9G6hYBsh9mXmfqNY08hZ08uNeUwE8CfalKegZpZ_ah5TviP7cANNqmHQbX2Q/s1600/bottom-bg1.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil5iRoXI2lRrQ8csb-BgAcvH2Nws98E2OifuP-CrnUJnh8npZ1DBszYPRXIeJhzlQlgB_lyNsDdcNu3Exncd4z7jvFG2BCaUu8jLpS2yexMdDPT-ebZbDac_SWY_5sH_enLxGIkMjYVrc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXYWEMgdnLrzgKmpOFY06ETDuHS-DxoV1k65iGEryigkt2LwE2DYbRebF_YXCCDrqANRJL_SU8b25ckm4-ohdZmrH613n6q1Aav0htKbjnRNG6A6FMmthn-hr61N9E2BGQLzZrfNMm2M0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAytp-TJt6Dblq89D6fLdGg0iEgLDIYgEqIVdoJ9K1t6pqR1yGX65evhvoM9hPXcaziV85rna12_ENMSh6uznp9H3upd0D6hN2gSNOP29hDuWXa4MlbQyvm0kqlKSiPrlt66Sq00rlUQo/s1600/bottom-bg2.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil5iRoXI2lRrQ8csb-BgAcvH2Nws98E2OifuP-CrnUJnh8npZ1DBszYPRXIeJhzlQlgB_lyNsDdcNu3Exncd4z7jvFG2BCaUu8jLpS2yexMdDPT-ebZbDac_SWY_5sH_enLxGIkMjYVrc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5xCRBYX9S08oBoIDFVZAQ1qk9D8tGBnDmZv9nWsyl_GztCZdYlk4WD7MOlaqIBUbrTcHaisxfXjMeaUjLvHoPQsTn2ZpHEYxUL4iJ4UuU9CGFq8K25HfhqMgfwGVpBN3h0wIsUuHRMoQ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmfl0KLyOig0Vyn1BXJJkP488iX-KGw4YpQX04oiVitBmXVw4Q2-eBC2TMJ6xJsc6kPnBNDysJ8fY2Zfzh9YQsPSAftZqMV32hDG1Jvz_VHDbjYyQ8So_QfMp8GXy0rb0oom18QvGl-8c/s1600/bottom-bg3.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil5iRoXI2lRrQ8csb-BgAcvH2Nws98E2OifuP-CrnUJnh8npZ1DBszYPRXIeJhzlQlgB_lyNsDdcNu3Exncd4z7jvFG2BCaUu8jLpS2yexMdDPT-ebZbDac_SWY_5sH_enLxGIkMjYVrc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic9XnBGUopUOMvwARe0RTAi1mliOLoxxfP3rMrj66o1fkFE1QA6IGb1mfdbV07dGM2q_SKD9F-8ghUkTFORDKSEaW0uLrg_Yn7i3OExwjaLpEoRU4-SbHpZJueIG13ltM9iqchiRKUnSs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLGMVOcIZmNi7-KD9Z4qdzaWKdgOkZF6qixrGOfkYr24IyWYSXSceuWJ9MMt4A-UYfyLkQM6fPxrBoSY4aGPgAgqGt9s0QjCUbJrftnVeyAT_cB02r8gB8lb5B_YFSph18UM5k2VxyC3k/s1600/bottom-bg4.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil5iRoXI2lRrQ8csb-BgAcvH2Nws98E2OifuP-CrnUJnh8npZ1DBszYPRXIeJhzlQlgB_lyNsDdcNu3Exncd4z7jvFG2BCaUu8jLpS2yexMdDPT-ebZbDac_SWY_5sH_enLxGIkMjYVrc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4XVtZtggl3eadcDf8TEU07F5FboI2oKXvSAJBd0ukXAjqWUH4xjgi1b0n0Nu1utAdDv-vZjjDkQXnvBWLT1ICarTePuPUhcyGQhRmtq_jOgjp_cLSFAI0PUD3Q4ezUWQ08z7oHu_EBiY/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:

<!--INÍCIO MENU CSS-->
<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>
<!--FIM MENU CSS-->

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.