Menus de navegação para Blogger com CSS e HTML

menus
Olá amigos Mult-focos, temos aqui três modelos de menus de navegação para Blogger Com CSS e HTML, todos de fácil configuração e adição.

Como adicionar em seu blog? 

Copie o código correspondente ao menu da sua escolha cole em um bloco de notas configure, depois copie do bloco de notas e siga o próximo passo. Painel do Blogger -> Layout -> Clique Adicionar um Gadget -> Escolha HTML / JavaScript do widget -> Cole o código do menu de navegação dentro de HTML / JavaScript do widget -> Salvar -> Arraste o widget e solte-o logo abaixo do cabeçalho Blog -> salvar. Isto é tudo.

Modelo do Menu 1
menu 1

 

<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family:
verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom:
1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; }
ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer">
<ul id="navlist">
<li><a href="URL"><span>Home</span></a></li>
<li><a href="URL"><span>Link 1</span></a></li>
<li><a href="URL"><span>Link 2</span></a></li>
<li><a href="URL"><span>Link 3</span></a></li>
<li><a href="URL"><span>Link 4</span></a></li>
<li><a href="URL"><span>Link 5</span></a></li>
<li><a href="URL"><span>Link 6</span></a></li>
</ul> </div>


Modelo do Menu 2
menu 2

 

<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal;
} ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin:
0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover {
color: #fff; border: 4px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist">
<li><a href="URL"><span>Home</span></a></li>
<li><a href="URL"><span>Link 1</span></a></li>
<li><a href="URL"><span>Link 2</span></a></li>
<li><a href="URL"><span>Link 3</span></a></li>
<li><a href="URL"><span>Link 4</span></a></li>
<li><a href="URL"><span>Link 5</span></a></li>
<li><a href="URL"><span>Link 6</span></a></li>
</ul> </div>


Modelo do Menu 3
menu 3

 

<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to
stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist {
list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist
li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none;
background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist
li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist">
<li><a href="URL"><span>Home </span></a></li>
<li><a href="URL"><span>Produto 1</span></a></li>
<li><a href="URL"><span>Produto 2</span></a></li>
<li><a href="URL"><span>Produto 3</span></a></li>
<li><a href="URL"><span>Produto 4</span></a></li>
<li><a href="URL"><span>Produto 5</span></a></li>
<li><a href="URL"><span>Produto 6</span></a></li>
</ul> </div>


Postado por Mairink Oemes

0 comentários:

Postar um comentário

Todos comentários são lidos e moderados previamente.
São publicados apenas aqueles que respeitarem as regras abaixo:
-Ter relação com o assunto do post.
-Não conter propagandas de outro site ou blog.
-Não incluir links no conteúdo do comentário.
-Se quiser deixar sua URL, comente usando a opção OpenID;
Obrigado(a) por comentar!

free website hit counter