Menu no Topo: Do jeito mais fácil [003]

Olá ^-^, tudo bem? Bem eu estou bem não que alguém queira saber pois ninguém perguntou o/, mas tipo no meu primeiro post aqui no blog a Wendy disse que deu um erro e que a postagem não apareceu o que resultou que a maioria nem chegasse a ver esta postagem que por sinal era sobre um menu bem fofo, mas tipo fazer o que né se não viram, mas o tuto está disponível aqui no blog, para quem quiser saber qual menu que é vá no meu blog de previews de efeitos, lá fora esse menu tem outros tutos também. E fora esse post do menu em 3d que passou batido, decidi criar outro menu, mas esse é um modelo de menu parecido com o menu no topo, já vi esse modelo em alguns blogs mas lembro que muitos pediam e os que conseguiam achavam ruim de aplicar ele no tema, então criei um bem  fácil!!

Sim bem mais prático eu acredito, tipo eu tentei criar o fundo dele apenas com cores básicas mas achei que ficou tão sem graça, então peguei e em vez de usar só a cor mesmo eu fiz uma faixa colorida com style e no fundo apliquei o menu, ele até é meio parecido mas o efeito hover dele é bem diferente. Amores por isso eu criei algumas faixas com cores variadas para se alguém querer usar, para quem quiser alguma cor diferente ou até mesmo com algum outro efeito o tamanho que eu fiz das faixas são 1380x30, nesse tamanho o menu ficará bem alinhadinho com o que eu arrumei, se quiserem outros tamanhos e larguras terão que alterar os códigos no html, mas para quem sabe é bem fácil é só ir mudando os valores onde se pede, resumindo, é um modelo de menu fofo para quem gosta de layouts sem banners pois acho que ficam melhores assim, então mais adiante prestem atenção certo?

Sem Brevia

1.

Vá no seu modelo clique em editar html, dentro procure por: body { e abaixo dele cole este código para usar a faixinha que entrará no lugar do banner (cabeçalho):

background: url("IMAGEM FAIXA")no-repeat;
}

 Imagens das faixinhas:

2.

Agora vá e dentro do html procure por ]]skin; e acima dele cole o código do menu:

Códigos

/*Menu no topo by gnmh*/
.back {display: inline-block; text-align: center; color:#f7c6c6;float:center;font-family: silkscreen;font-size: 8px; padding:5px; height:auto;width:750px;margin-left:-6px;-webkit-border-radius: 5px;-moz-border-radius:5px;
}
.topo a{background:#; padding 5px; margin:3px;font-family: PF Arma Five;width:100px;
font-size: 8px; color: #fff;text-shadow: 1px 1px 1px #A190B1; padding-left:5px; padding-right:6px; padding-top:5px; padding-bottom:10px; border-radius:1px;-webkit-transition: all ease-out 0.99s;}
.topo a:hover{background:#E4DAED;font-family: silkscreen;width:100px;
font-size: 8px;color:#A190B1;padding:12px;text-shadow: 1px 1px 1px #fff;}

3.

Para funcionar os links cole o código abaixo dentro de um gadget:

Códigos

<div style="position: absolute; margin-top: -143px; left: -140px;">
<div class="topo">
<div class="back">
<center>
<a href="/">Home</a>
<a href="/">Tutioriais</a>
<a href="/">Materiais</a>
<a href="/">Parcerias</a>
<a href="/">Extras</a>
<a href="/">Layouts</a>
<a href="/">Faq</a>
<a href="/">Créditos</a>
<a href="/">Destaques</a>
<a href="/">Sobre a Dona</a>
<a href="/">Blogroll</a>
<a href="/">plágios</a>
</center></div></div></div>

E para finalizar, eu já deixei tudo editado nomes dos links quantidade, e a cor é a mesma do preview se quiser usar outra vá alterando conforme o seu gosto e preferência, e podem perceber que até os códigos de alinhamento no topo eu já deixei, isso é para vocês terem uma noção de espaço e irem mudando conforme necessidade, então é isso acredito que é bem mais prático e sem neuras, agora a parte dos créditos, não se esqueçam de creditar tanto a wendy quanto a mim pois criei este menu da base do meu menu atual, então créditos ao bunny e créditos a mim ok? Kissus e até um próximo post!!