[TUTO] DE COMO COLOCAR MENU EMBUTIDO CSS3
Autor: Felipe José Web Design Grafico | Publicado: 2012-02-25T09:24:00-08:00

Querendo um menu de&nbsp;qualidade&nbsp;e com CSS3, então instale esse no seu&nbsp;blog.  Este pequeno menu que parece entra no seu blog (efeito embutido) vai  deixar seu blog mais profissional e ao mesmo tempo engradará seu  publico.Para adicionar à&nbsp;sua página, acesse a guia “Modelo” do seu blog e clique na opção “Editar HTML”, após isso procure por:]]&gt;&lt;/b:skin&gt;Acima dessa linha cole o código CSS abaixo:nav&nbsp; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: block;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 100%;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; overflow: hidden;
}
nav ul {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 80px 0 20px 0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: .7em;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; float: left;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; list-style: none;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: #444;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: rgba(0,0,0,.2);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -moz-border-radius: .5em;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -webkit-border-radius: .5em;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: .5em;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}
nav li {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; float:left;
}
nav a {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; float:left;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: .8em 1.5em;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-decoration: none;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: #555;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-shadow: 0 1px 0 rgba(255,255,255,.5);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; letter-spacing: 1px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-transform: uppercase;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-width: 1px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-style: solid;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-color: #fff #ccc #999 #eee;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: #c1c1c1;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: -moz-linear-gradient(#f5f5f5, #c1c1c1);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: -o-linear-gradient(#f5f5f5, #c1c1c1);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: -ms-linear-gradient(#f5f5f5, #c1c1c1);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: linear-gradient(#f5f5f5, #c1c1c1);
}
nav a:hover, nav a:focus {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; outline: 0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: #fff;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-shadow: 0 1px 0 rgba(0,0,0,.2);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: #fac754;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: -moz-linear-gradient(#fac754, #f8ac00);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00));
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: -webkit-linear-gradient(#fac754, #f8ac00);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: -o-linear-gradient(#fac754, #f8ac00);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: -ms-linear-gradient(#fac754, #f8ac00);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: linear-gradient(#fac754, #f8ac00);
}
nav a:active {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
nav li:first-child a {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-left: 0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -moz-border-radius: 4px 0 0 4px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -webkit-border-radius: 4px 0 0 4px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: 4px 0 0 4px;
}
nav li:last-child a {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-right: 0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -moz-border-radius: 0 4px 4px 0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -webkit-border-radius: 0 4px 4px 0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: 0 4px 4px 0;
}Feito isso, salve.Agora acesse a guia&nbsp;“Layout”&nbsp;do seu blog e clique na opção&nbsp;“Adicionar um&nbsp;gadget” –&gt; “HTML/Javascript”.&nbsp;Em seguida cole o código abaixo, faça as alterações conforme o que se pede (destacado de vermelho no código) e salve.&lt;nav&gt;
&nbsp;&nbsp;&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="LINK"&gt;ITEM&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="LINK"&gt;ITEM&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="LINK"&gt;ITEM&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="LINK"&gt;ITEM&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="LINK"&gt;ITEM&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &lt;/ul&gt;
&lt;/nav&gt;