Menu Tracks + Filminho


 Primeiramente, gostaria de agradecer pelos comentários da postagem anterior {mesmo sabendo que muitos não leram..}, nós blogueiros sabemos quando nossa postagem é lida ou não, não é?! Como prometido, eu consegui achar o Batman Ressurge Dublado, então estarei passando para vocês e tudo mais.. sobre o novo Layout, eu finalmente estou conseguindo mexer em um menu {não estava dando certo antes, ai do nada começou a dar, é a Rita viu gente.. xD}.. Aé, coisa de louco quase me esqueço, daqui uns 3 dias o eJhonas estará com uma enquete na sidebar, sobre uma novidade que deverá ou não ser feita aqui ;} Agora vamos começar com o trabalho, eu recebi algumas dicas sobre como fazer tutorial, achei super interessante, e agora estarei colocando imagens de como fazer para poder ajudar mais, o que acharam?!

 Entre no Blogger  Design  Editar HTML  Expandir Modelo de Widgets  Ctrl + F  Procure por:
 </head>
Achou? Cole abaixo desta tag, este código:

<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>
Link da sua faixinha é a faixa que desce ao passar do mouse, basta colocar o link dela.

#4c2222 é o sombra! {Mude para outra cor caso queira}
#fff é a cor dos links
Ficará assim:

 Agora procure por:
</header> 
Achou? Novamente abaixo desta tag, cole este código:

<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>
Ficará assim:

 As partes em negrito coloque o nome do menu. Já nas partes em vermelho coloque os link's dos menus, na qual ao clicar nele, será redirecionado para o endereço que você colocou. Onde está destacado sublinhado coloque a cor que você quer que apareça nos fundos do menu! Só para constar aprendi com o blog Kawaii World!

Filminho

  Como sempre cumpro o que prometo, disse que iria trazer o filme Batman: O Cavaleiro das Trevas Ressurge Dublado, consegui porém é imagem de cinema, mais dou nota 8,5 para a qualidade do Som/Imagem.
Novamente dizendo, gostaria muito que você votassem em mim para ganhar em um concurso que estou participando, o seu votinho é muito importante para mim viu? {www} Falta pouquinho para eu conseguir chegar no primeiro lugar, o seu voto para mim é muito importante.

13 comentários:

  1. Muito bom o menu.O filme já tava louca pra assistir ele.
    lifeonalin.blogspot.com.br

    ResponderExcluir
  2. Legal o tuto, parece difícil de fazer. É, é verdade mesmo, agente sabe quando o post é ou não lido, tipo, eu também fiz um tuto no meu blog, dai no final coloquei que era meio complicado, mas o resultado era ótimo, dai nos comentários falaram assim: é, super fácil mesmo! kkkkk mas Ok né?!
    Beijos
    segredos-deumapoeta.blogspot.com

    ResponderExcluir
  3. No começo é sempre complicado meche em Html tem um monte de coisas que ainda quero aprende, o layout ta lindo!
    http://kelly-club.blogspot.com.br/

    ResponderExcluir
  4. Bom, esse menu é mt diwo fik lindo *O*. Acho q vou assistir esse filme, acho legal o batman - kkk - ele é lindo *O*
    bjoos

    http://mundoodasblogueiras.blogspot.com/

    ResponderExcluir
  5. haha' é culpa da Rita mesmo kkkk
    fica bem legal esse menuu
    bjs
    noisconectados.blogspot.com.br

    ResponderExcluir
  6. Muito bom o tutorial, e o menu tbm eu estava querendo msm um menu que ficasse acima do cabeçalho e eu adorei ^^ e o filme é ótimo concerteza irei assistir.

    http://jovenclube.blogspot.com.br/

    ResponderExcluir
  7. Ah eu ne tinha visto o post de ontem, mas já li ele. É verdade que que nós blogueiros e blogueiras sabemos quando nossa postagem foi lida *-* intuição de blogguers. Eu também tava tendo um problema com um menu, bem lindinho que eu montei, mas deu erro e desisti, é a Rita...
    Sobre bullying, preconceito, racismo e exclusão na escola, já sofri e já defendi colegas. Pura verdade -.-
    Bjão, vou indo o/ kkkkk
    Blog Garotas Do Contra

    ResponderExcluir
  8. O meu fica lindo! Esse filme é muito massa ,eu adoro!
    Beijinhos - day-princess.blogspot.com

    ResponderExcluir
  9. Eu já votei em você,ok?
    Beijos

    http://amoraruffles-blogger.blogspot.com.br/

    ResponderExcluir
  10. adorei o tutorial! e sobre o filme, eu já tava mega ansiosa pra assistir!
    http://blogtrashrock.blogspot.com.br/

    ResponderExcluir
  11. Olá,
    Amei o tutoo, muito util :D
    Adoorei seu blog e já estou seguindo!
    Se puder dá uma visitinha?
    http://garotavipbyaninha.blogspot.com.br/
    Beijos!

    ResponderExcluir
  12. existem váarios tipos de menu né? conheço bastante,ms nao conhecia esse.. ótimo tuto!
    sobre o filme: to louca pra ver ;p e agora você facilitou minha vida colocando o site onde baixar haha vlw!

    http://blogportalteen.blogspot.com

    ResponderExcluir

© eJhonas - 2012. Todos os direitos reservados.
Design Jhonas Balsas.
Tecnologia do Blogger.
imagem-logo