Menu acima do cabeçalho do blogspot

Vamos aprender como instalar o menu de páginas acima do cabeçalho no Blogspot.

Vá em "Layout", "Editar Html", "Ctrl + F" no seu teclado.  Na janelinha que se abriu, cole:

]]></b:skin>

Logo acima dele, cole o seguinte código:

#navcontainer<br /> {<br /> background: #808080;<br /> margin: 0 auto;<br /> padding:4px 0;<br /> font-family: georgia, serif;<br /> text-transform: lowercase;<br /> }<br /> <br /> /* to stretch the container div to contain floated list */<br /> #navcontainer:after{<br /> content: ".";<br /> display: block;<br /> line-height: 10px;<br /> font-size: 12px;<br /> clear: both;<br /> }<br /> <br /> ul#navlist{<br /> height: 20px;<br /> list-style: none;<br /> padding: 10px;<br /> margin: 0 auto;<br /> width: 90%;<br /> font-size: 0.8em;<br /> }<br /> <br /> ul#navlist li{<br /> display: block;<br /> float: left;<br /> width: 15%;<br /> margin: 0;<br /> padding: 2x;<br /> }<br /> <br /> ul#navlist li a{<br /> display: block;<br /> width: 100%;<br /> padding: 0.5em;<br /> border-width: 1px;<br /> border-color: #ccc #cccc #ccc #fff;<br /> border-style: solid;<br /> color: #000;<br /> text-decoration: none;<br /> background: #eee;<br /> }<br /> <br /> #navcontainer>ul#navlist li a { font-size: 12px;width: auto; padding: 14px 3px; }<br /> <br /> ul#navlist li#active a{<br /> background: #ccc;<br /> color: #800000;<br /> }<br /> <br /> ul#navlist li a:hover, ul#navlist li#active a:hover{<br /> color: #800000;<br /> background: transparent;<br /> border-color: #000 #fff #fff #ccc;<br /> }

Os códigos em vermelho, são as cores do menu.  Altere-as conforme as cores que combinam com o seu Blogspot.


Se você quer o menu acima do cabeçalho, no topo do blogspot, procure o seguinte código usando o "Ctrl +F". no teclado:

<div id='header-wrapper'>

Logo abaixo do código referido acima, cole o seguinte:

<div id="navcontainer"><ul id="navlist"><li id="active"><a href="AQUI O ENDEREÇO DO SEU LINK" id="current">Item 1</a></li> <li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 2</a></li> <li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 3</a></li> <li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 4</a></li> <li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 5</a></li> <li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 6</a></li> <li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 7</a></li> <li><a href="AQUI O ENDEREÇO DO SEU LINK">Item8</a></li> </ul></div>

Pronto. Seu menu no topo do blogspot está pronto.  Lembre-se de sempre antes de "Publicar Postagem", visualize antes para ver se tudo deu certo.