13 setembro 2012

Menu igual ao meu!


Yoo! 

Hoje irei postar como colocar o menu igual ao meu no seu blog. É muito fácil!
Espero que gostem!
Enjoy~
1. Procure por </head> e abaixo da tag cole:

<style type='text/css'>
ul#nav { width: 1500px; margin: 0 auto; text-align: center !important; overflow: hidden;}


ul#nav li {float: left; list-style: none; align: center;}


ul#nav li a{display: block; width: 110px; height: 90px; padding: 20px 0 0 0; margin-right: 30px; margin-left: 5px; font: bold 17px &#39;Audiowide&#39;; text-transform: uppercase; color: #fff !important; text-shadow: 0 1px 3px #636161; text-decoration: none; background: url(LINK DA SUA FAIXINHA) 0 -149px no-repeat; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;}


ul#nav li a:hover { background: url(LINK DA SUA FAIXINHA) 0 0 no-repeat;color: #eee9d9; text-shadow: 0 2px 3px #4c2222; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;}


ul#nav li a.js:hover {background: url(LINK DA SUA FAIXINHA) 0 -149px no-repeat; -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;}



</style>


Entendendo o código:

Link da sua Faixinha - É exatamente o que diz. Troque pela url da faixa que vai descer. O tamanho será de 110 x 90.

width: 110px; height: 90px - Caso você queira outro tamanho de faixinha, é aí que você vai mudar.

color: #fff  - Cor da fonte.

#4c2222 - Cor da sombra.



2. Procure por  </header> e depois da tag, cole:


<div style='top: 0px; height: 30px; width: 100%; z-index: 4; background: #b7e2f8; position: fixed; left: 0px; text-align: center; '>


<div style='position: absolute; top: -15px; width: 900px; text-align: center !important; float: center !important; '>
 <ul id='nav'>
        <li><a href='link1.blogspot.com'>Link1</a></li>
<li><a href='link2.blogspot.com'>Link2</a></li>
<li><a href='link3.blogspot.com'>Link3</a></li>
<li><a href='link4.blogspot.com'>Link4</a></li>
<li><a href='link5.blogspot.com'>Link5</a></li>
<li><a href='link6.blogspot.com'>Link6</a></li>
<li><a href='link7.blogspot.com'>Link7</a></li>
<li><a href='creditos.blogspot.com'>Créditos</a></li>
</ul>
</div> </div>

Todos os merecidos créditos ao Kawaii World, o link está na página de Créditos! Beijos!

11 Sweet(s) *3*:

Fernanda Guerra disse...

Oi, eu amei! Visita o meu blog

(The Memories) Emilly R. disse...

Ainw *O* Super lindo esse menu ^^
Resposta:
blog-the-memories: Aceito a afiliação sim :D

things-for-html: Aceeito!
;D

(sou dona dos dois kk )

(The Memories) Emilly R. disse...

Já coloquei você nos dois blogs :D

(The Memories) Emilly R. disse...

Ps. Não se esqueça de seguir ambos blogs :)

Joyce//* disse...

Gostei,,Lindoo-*

umagarotaeseublog-.blogspot.-com

Cherry Ice disse...

Oie linda ! Claro que aceito afiliação com vc! Blog lindo parabens ! Ja puis seu blog la na minha elite avisa quando colocar o meu aqui tambem ! Bjoos !
http://cherryice-2012.blogspot.com.br/

Larissa Novacosque disse...

Adorei a dica, vou fazer no meu agora (:
segue de volta?
http://vibracoesdeoutrafrequencia.blogspot.com.br/

Nathália-chan disse...

Estava mesmo precisando desse tutorial! Talvez eu use em meu próximo layout. :) Arigatou!
P.S: Adorei o Blog! Já estou seguindo. (^//w//^) Se quiser retribuir... xD Brinks!

http://anonlypossibility.blogspot.com.br/

Young Mi disse...

Eu não encontro nenhuma faixinha e não consigo fazer. Quem me ajuda? Super fofis seu blog.

Biiah Ana disse...

eu tbm não encontro faixinhas :'( :'( amoo seu blog!!!

bjuus'

Biiah Ana disse...

eu tbm não encontro faixinha :'( :'( amoo seu blog!!!

bjuus'
http://blogdabiiah-official.blogspot.com/

Postar um comentário

Aceito selinhos e tag's, encomendas e pedidos!!! *u*! O que importa é o carinho de vocês, leitores, por lembrarem do blog. Muito obrigada por comentar. Tudo que vem dos leitores no blog é bem vindo!!!