Menu para header de blog

Bons dias, tenho estado ausente por vários motivos ,mas assim que deu vim trazer uma partilha.
Como pode vêr na imagem acima trouxe um novo modelo de menu para a header do blog.
Visualize o menu online:  ENTRE AQUI...

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

Vamos em modelo e depois click em editar html e procure este código:

E acima dele cole meu código:

ul#best-tugamenu {
width:500px;
clear: both;
float: left;
list-style: none;
margin: 0px 10px 0 0px;
border-bottom:4px solid #000;
}
ul#best-tugamenu li {
display: inline;
list-style: none;
}
ul#best-tugamenu li a {
margin-right:5px;
color: #856088;
display: block;
float:left;
font: 19px/100% oswald ;
line-height: 32px;
text-decoration: none;
vertical-align: middle;
padding: 0 10px;
background-image:url(http://i.imgur.com/HbPDZgz.jpg);
border-bottom:2px solid #856088;
}
ul#best-tugamenu li a:hover {
background:#2fe4fd;
}  

O css já está agora vamos ao html ...
Procure este código:

Cole este meu código abaixo do código a vermelho como exemplo da imagem:

<ul id="best-tugamenu">
<li><a href="#">botao 1</a></li>
<li><a href="#">botao 2</a></li>
<li><a href="#">botao 3</a></li>
<li><a href="#">botao 4</a></li>
<li><a href="#">botao 5</a></li>
</ul>

Agora vamos entender:
Onde tiver este sinal (# )   troque pelo seu link...
Onde tiver isto ( botao)  troque pelo nome quiser...

Para mudár a imagem do botâo procure isto: background-image:url(http://i.imgur.com/HbPDZgz.jpg); agora troque o link ou hospede essa imagem num sitio sua escolha...

Foi ésta a partilha que trouxe ,até mais...

Menu para header de blog

► 1

► menus

► Cartita