Novo menu horizontal

Aqui eu de novo para trazêr uma partilha de menu simples horizontal com hover...
A imagem acima mostra o resultado finál ,este menu tem hover nos botões e no texto também.
Pode visualizár aqui online: ENTRE AQUI...

Antes de tudo faça uma cópia do seu template...

Agora vamos colocar o css para isso entre em modelo e depois click editar html e procure este código:

Agora acima do código a vermelho coloque este meu código:

/* b-thorizontal- http://best-tuga.blogspot.pt/*/
.b-thorizontal{
width:100%;
height:36px;
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(0,0,0,1) 0%, rgba(249,0,83,1) 1%, rgba(252,2,144,1) 23%, rgba(102,102,102,1) 25%, rgba(252,7,105,1) 30%, rgba(44,44,44,1) 50%, rgba(255,15,111,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(255,38,124,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(76,76,76,1)), color-stop(0%,rgba(0,0,0,1)), color-stop(1%,rgba(249,0,83,1)), color-stop(23%,rgba(252,2,144,1)), color-stop(25%,rgba(102,102,102,1)), color-stop(30%,rgba(252,7,105,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(60%,rgba(255,15,111,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(255,38,124,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 0%,rgba(249,0,83,1) 1%,rgba(252,2,144,1) 23%,rgba(102,102,102,1) 25%,rgba(252,7,105,1) 30%,rgba(44,44,44,1) 50%,rgba(255,15,111,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(255,38,124,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 0%,rgba(249,0,83,1) 1%,rgba(252,2,144,1) 23%,rgba(102,102,102,1) 25%,rgba(252,7,105,1) 30%,rgba(44,44,44,1) 50%,rgba(255,15,111,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(255,38,124,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 0%,rgba(249,0,83,1) 1%,rgba(252,2,144,1) 23%,rgba(102,102,102,1) 25%,rgba(252,7,105,1) 30%,rgba(44,44,44,1) 50%,rgba(255,15,111,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(255,38,124,1) 100%); /* IE10+ */
background: linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 0%,rgba(249,0,83,1) 1%,rgba(252,2,144,1) 23%,rgba(102,102,102,1) 25%,rgba(252,7,105,1) 30%,rgba(44,44,44,1) 50%,rgba(255,15,111,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(255,38,124,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#ff267c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-top:1px solid #aaaeaa;
border-bottom:3px solid #7dfb7b;
box-shadow: 0 2px 2px #000;
z-index:1;
}
.menu-btsimples{
width:900px;
list-style:none;
font:14px Oswald,Arial;
text-align:center;
text-shadow: 0 2px 2px #000 ;
margin:0 auto;
}
.menu-btsimples a{
float:left;
color:#fcfcfc;
border-left:1px solid #e3e3e3;
text-decoration:none;
width:100px;
line-height:36px;
-moz-transition:.2s linear;
-webkit-transition:.2s linear;
transition:.2s linear;
-o-transition:.2s linear;
}
.menu-btsimples a:hover,li.menu-btsimpleshover a{
color:#111;
background: rgb(157,213,58); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(157,213,58,1)), color-stop(50%,rgba(161,213,79,1)), color-stop(51%,rgba(128,194,23,1)), color-stop(100%,rgba(124,188,10,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

Ok o css já está vamos colocar o html procure este código:

 Agora acima do código a vermelho cole este meu código :

<div class='b-thorizontal'>
<ul class='menu-btsimples' id='menu-btsimples'>
<li><a href='#'>INICIO</a></li>
<li><a href='#'>RECENTE</a></li>    
<li><a href='#'>REGRAS</a></li>
<li><a href='#'>NOTICIAS</a></li>
<li><a href='#'>AJUDA </a></li>
<li><a href='#'>PERFIL</a></li>
<li><a href='#'>ONLINE </a></li>

</ul>
</div>

Faça como exemplo da imagem acima e já têm o menu no seu blog...
Vamos procurar isto:

• # coloque o seu link
• INICIO troque pelo nome que quiser dár

Nota o background do menu trabalha em todos os navegadores...
Foi esta a partilha que trouxe agora,alguma duvida disponha até mais...

Novo menu horizontal

► 3

► menus

► Cartita