Guest Post: Criando um menu horizontal no blogger

Esse artigo é um Guest Post escrito por Gothic Darkness. Ela possui o excelente blog, de mesmo nome, onde transmite, através de excelentes tutoriais, seu conhecimento em html, css e Blogger. Aconselho que siga-a no Twitter e visite o Gothic Darkness.

O que é um Guest Post?

Menu 1) Criando um menu horizontal com imagens:

Vá em Layout >> Editar HTML >> Expandir modelos de widgets. Copie o código abaixo e coloque-o antes de ]]></b:skin>

/*Menu*/<br /> #menu {<br /> margin:20px auto;<br /> padding:0;<br /> list-style-type:none;<br /> width:auto;<br /> position:relative;<br /> display:block;<br /> height:27px;<br /> text-transform:uppercase;<br /> font-size:12px;<br /> font-weight:bold;<br /> background:transparent url(“URL-DA-SUA-IMAGEM”) repeat-x top left ;<br /> font-family:Helvetica,Arial,Verdana,sans-serif;<br /> <br /> }<br /> #menu li{<br /> display:block;<br /> float:left;<br /> margin:0;<br /> pading:0;<br /> }<br /> #menu li a{<br /> float:left;<br /> color:#ffffff; /*—- edite a cor da fonte —-*/<br /> text-decoration:none;<br /> font-weight:normal;<br /> padding:5px 10px 0px 10px;<br /> margin:-12px 0 1px 0;<br /> height:22px;<br /> border-right:1px solid #000000; /*—- edite a cor da borda —-*/<br /> }<br /> #menu li a:hover{<br /> background:transparent url(“URL-DA-SUA-IMAGEM”) no-repeat top right; }

Edite as cores de borda e cores da fonte do texto de acordo com seu gosto. Ajuste-as para combinar com as cores do seu blog. Salve as modificações. Volte em Layout >> Editar HTML >> não precisa clicar em ‘Expandir modelos de widgets’, e procure pelo trecho abaixo:

<div id=’header-wrapper’>

E cole o seguinte código logo ABAIXO dele:

<div id=’menu’> <ul><li><a expr:href=’data:blog.homepageUrl’ title=’ Início’>Home</a></li> <li><a href=’inserir link aqui’ title=’Edit’>Link 1 </a></li> <li><a href=’inserir link aqui’ title=’Edit’>Link 2 </a></li> <li><a href=’inserir link aqui’ title=’Edit’>Link 3 </a></li> </ul></div>

No tutorial acima, o menu ficará logo abaixo do cabeçalho no seu blog. utilize as imagens que quiser para compor seu menu, mas lembre-se que você deverá utilizar uma imagem com altura máxima de 27px. Para incluir seus links em seu menu basta inserir os links nos locais destacados(Link1, Link2 etc). Você pode inserir quantos links quiser, para isto basta incluir mais uma linha:

<li><a href=’inserir link aqui’ title=’Edit’>Link 1 </a></li><br /> e colar antes de </ul>

Menu 2) Menu acima do cabeçalho do blog usando apenas CSS.

Neste tutorial você vai ver como Criar um menu simples usando apenas CSS:
/*NavTop*/<br /> #navtop {<br /> height: 36px;<br /> width:auto;<br /> margin:0 auto;<br /> }<br /> #navtop ul {<br /> padding:0px; <br /> display: block;<br /> margin: 0; <br /> list-style: none;<br /> }<br /> #navtop ul li{ <br /> display:inline;<br /> margin:0 ;<br /> padding:2px 3px;<br /> }<br /> #navtop li{<br /> float: left;<br /> list-style: none;<br /> }<br /> #navtop a{<br /> font-size: 12px;<br /> color: #fff; / * edite cor da fonte * /<br /> margin:3px;<br /> padding: 3px 8px 3px 8px;<br /> display: block;<br /> font-family:Helvetica,Arial,Verdana,sans-serif;<br /> text-decoration: none;<br /> background:#8B8682; / * edite cor de fundo * /<br /> <br /> }<br /> #navtop a:hover{<br /> color:#fff; / * edite cor da fonte * /<br /> text-decoration:none;<br /> background:#000; / * edite cor de fundo * /<br /> }<br />
Salve as modificações. Volte em Layout >> Editar HTML >> não precisa clicar em ‘Expandir modelos de widgets’, e procure pelo trecho abaixo:
<div id=’header-wrapper’><br /> E cole acima dele:<br /> <br /> <div id=’navtop’><ul><li><a expr:href=’data:blog.homepageUrl’ title=’ Início’>Home</a></li> <li><a href=’inserir link aqui’ title=’Edit’>Link 1 </a></li> </ul></div><br />
No tutorial acima, o menu ficará acima do cabeçalho, bem no topo do seu blog, mas se quiser que fique abaixo do cabeçalho, basta colar o código logo acima da tag <div id=’header-wrapper’>
As partes que você deve editar estão marcadas no código. Edite as cores de acordo com as cores do seu template.

Bom , é isso, espero que tenha ajudado. Agora é só usar a imaginação e criar seu menu com as cores que combine com o seu blog. Boa Blogagem a todos!
Quer conhecer um pouco mais sobre a autora? Então leia o Guest Post dela no GF Soluções.