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
/* 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/AVvXsEgJlqXcKox8wnR1hwIlJbn7Y1o_VAcXmldx0yPUV4I03V9VAAqzLAVUwMvmkOEwc12okr0n3BqOaJprGJYcCCPTwZgIg9x54i7Lpm99gTrH2ifqkbxxs9-TrTN8lLtCqzlTi83cdOSmMBs/s1600/bottom-bg.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg06wbeJbmKORcKi5vYEoybPNEqWwtCXge4L7LZ4nDGcf4bqvSYtXIfAAG9HUcJQX6IMyZ3MB1PWNry3906a6znU9Ct-x1l1VKcDlJwkwQ4WS6B5mQ1c4UDUIZBsi5-MLdJg1PMadpA6hc/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/AVvXsEiv3t87BlACzYe8xUxkRq4It8BoiFiJhTYiqyi5mzW1iOc_ruxJ6s72uAR13zZasHi36q96sDyIRrkd61P3ShB7ux32Roinf4t1tID-XZJCF5z7kkAxX9OBJOiDj4L6wfgDIQZolsFmJpg/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 */Estilo 3
#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/AVvXsEjRIrUY79FhQReORuQ5UB8EO0SUzL06TDJCtLAYk8EvBHxr-QY3SZNDcX0pFt0sWpjkRLCtFAU8x_AvQwi5vv34CkQjXkjsmK53b0Pc1YwlljhjXkxw6swUSxdoC18LV8d_TKnli3gOefk/s1600/bottom-bg1.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg06wbeJbmKORcKi5vYEoybPNEqWwtCXge4L7LZ4nDGcf4bqvSYtXIfAAG9HUcJQX6IMyZ3MB1PWNry3906a6znU9Ct-x1l1VKcDlJwkwQ4WS6B5mQ1c4UDUIZBsi5-MLdJg1PMadpA6hc/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/AVvXsEjfjHk7_nPZTHHi4Q7kMiOz1Lz44dYJwVp4aS8-UHcphaUNeDYhiEf62xFdIkNbOUqYdJZZQdEJjw1W_BCpqgMbl1N917MV88elLVuFe4TTAvLPkCBTwrSVTGa2no6rsgOfnB5CT9g7WaY/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;
}
/* Menu CSS */Estilo 4
#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/AVvXsEhPqZ1HZZc3l3eBwzqocJVKhFg9oiDfyepJlcUiaG4wVZmRpfEauPsOj7oRp99dZs73Me-on0ZYBqYea6P9BgUpZ5_Dv_lDzq08QxZ_Sqk6B5awonxHR6ZRHeGbYRByK-6kWue6dOaefNg/s1600/bottom-bg2.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg06wbeJbmKORcKi5vYEoybPNEqWwtCXge4L7LZ4nDGcf4bqvSYtXIfAAG9HUcJQX6IMyZ3MB1PWNry3906a6znU9Ct-x1l1VKcDlJwkwQ4WS6B5mQ1c4UDUIZBsi5-MLdJg1PMadpA6hc/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/AVvXsEiITNimq09BTwboUEN8hjHoa8GqrOb2k-cl3QoYy6DLWvSrEIfK9VP1aU2paphDCRfa5dUTP-oRE3L6AojVavjK_VQTBMwIRywjHTC6Pu99HUwwQDQ4JqYBvFhbjLXX32Cp0U2VzTnpdvc/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;
}
/* Menu CSS */Estilo 5
#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/AVvXsEjYxoeZPPluJgssmmcn1VCfViIClqbBytWRTX4IXtd_Fb2cw0UVtvGkuv3HZ9CUf-N_SGSNsITzMaJwN2eAdQhOozgg_CBxOMemfgzL42yWmpFlwZ_wfdDpoFwyhyeMw-DoDWVJAg5cvPs/s1600/bottom-bg3.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg06wbeJbmKORcKi5vYEoybPNEqWwtCXge4L7LZ4nDGcf4bqvSYtXIfAAG9HUcJQX6IMyZ3MB1PWNry3906a6znU9Ct-x1l1VKcDlJwkwQ4WS6B5mQ1c4UDUIZBsi5-MLdJg1PMadpA6hc/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/AVvXsEjz_AxRlQY3xwE_kRFaZ8OniUEMUjxQ8viHOY5K7d7HRiTQAwJPgdWPkjq4a7vf4WdvBPsXTMqnvbGCUX-LPK5X0yxbkwLmpCRbLYM9gsp0Q-CsN8tp18Qv8uyj_scaLYFLOq5HxJ1PVUc/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;
}
/* 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/AVvXsEgI8j44t6WxQKpccLiQWt3IRDlphY8C03DFpo77-mOGLduNtlo4_chUAJZFnP7m6ksm-DgtgOvaMR-hfr4A06bXzL7aBZ6evxPxFeBlv8W0AZ5cIBCInprLz-e9pkYQwWMMBz8DNGjB-Xg/s1600/bottom-bg4.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg06wbeJbmKORcKi5vYEoybPNEqWwtCXge4L7LZ4nDGcf4bqvSYtXIfAAG9HUcJQX6IMyZ3MB1PWNry3906a6znU9Ct-x1l1VKcDlJwkwQ4WS6B5mQ1c4UDUIZBsi5-MLdJg1PMadpA6hc/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/AVvXsEiFo_T6MJzSKW2OS2k2mFjAbyZu52XDjcaEDVwj_zagn3DAjeLR8uCdpV4k4upIet0yHyr_M6UMytDkRyogcInjOWbqamQTZQQJq_Llt7qKv4G3VxEVJxdT3dr07KZN4cxK_fdF0AHVs5g/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.
<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.
Comentários