Tag Meme + Menu Deslizante


   Ontem recebi uma Tag Meme e um selinho, agradeço muito pelos dois, estarei respondendo a Tag primeiro, e na Próxima postagem o Selinho, ok?! Por sinal gente, meu blog atingiu a meta de 200 seguidores ontem, agradeço muito á vocês, muito obrigado mesmo viu gente?! Então, ontem eu lembrei que duas blogueiras me pediu para postar este tutorial, ensinando como colocar aqueles menu deslizante la em cima do blog, ele fica muito show.. um dos menus mais bonitos {Que eu acho}, é bem facilzinho de fazer, entretanto merece atenção obviamente..

Tag Meme {Recebi do blog Paulinha Dream}

1. Se não pudesse mais morar no Brasil, em qual país gostaria de viver ?
 Com certeza Espanha, por sinal, meu sonho é morar e fazer faculdade lá.
2. Tem uma amizade de infância que dura até hoje?
 Tenho sim, e várias por sinal.. {Mariana, Pamella, etc..}
3. O que pra você nunca é demais?
 Bolo de chocolate {KKK}
4. O que não pode faltar no seu dia-a-dia?
 Umas comidinhas/bebidinhas de alta ajuda {Chocolate, Refrigerante}
5. O ultimo motivo que te fez chorar?
 Lembrar de um ente querido {Familia}
6. Quem é o sua cantora favorita?
 Britney Spears
7. Já chorou ouvindo música?
 Não que eu me lembre  {KK}
8. Melhor programa de televisão?
 AHH, quando eu tinha uns 8 Anos adorava assistir Topa ou não Topa do Silvio Santos, agora nem programas assisto mais {KK}
9. Qual a história favorita de infância?
 AHH, nunca gostei muito de histórias {KK}
10. uma data que marcou sua vida?
 COM CERTEZA 8 DE DEZEMBRO, meu aniversário, foi tão bom ele.. eu convidei alguns amigos da escola {falsos por sinal}, eles não foram e mesmo assim aquele foi o aniversário que mais me marcou, como eles não veio deu tudo certo, trouxeram até UMA TELEVISÃO GIGANTE {Magina subindo as escada com uma TV}, ainda bebi batida pela primeira vez, aprendi a dançar eletrônico/Black, NUNCA me esquecerei daquele aniversário..
11. Dois melhores lugares da sua cidade?
 Como eu moro em guarulhos, um lugar que eu adoro ir é ao Shopping e ao Centro.

 Sobre Mim:
1. Sou sincero.
2. Odeio Falsidade.
3. Adoro Bloggar.
4. Sou Fã 100% da Britney Spears
5. Gasto muito.. {xD}
6. Adoro Boliche
7. Detesto McDonald {Na última vez que comi, veio estragado :@}
8. Não suporto mentira.
9. Sou muito na minha..
10. Suporto quase qualquer coisa menos que xinguem meus entes queridos {Amigos, Família, e a diva Britney Spears}
11. Sou blogueiro desde 2010 {Eu tinha outro blog, Fã site}

 Regras á quem participar:
Escrever 11 coisas (aleatórias) sobre você;
Responder às 11 perguntas feitas por quem indicou você e criar 11 novas perguntas para os blogs que você indicar;
Escolher 11 pessoas para repassar este tag e passar o link dos respectivos blogs;
Avisá-los em seus blogs que foram escolhidos;
Não retornar o tag para o blogueiro de que enviou à você;
Postar as regras.

  Perguntas: 
1. Se você fosse escolher entre Família e um emprego muito bem sucedido, que ganha-se tipo bilhões por mês, qual escolheria?
2. Qual música marcou sua infância?
3. Qual seu gênero musical favorito?
4. Entre amor e amizade, qual escolhe?
5. 3 Coisas que fazem você escolher seu(sua) parceiro(a)?
6. 3 Coisas que lhe fazem feliz!
7. Qual seu(sua) cantor(a) favorita(o)
8. Hobby predileto?
9. 3 Comidas Favoritas!
10. 4 Coisas que te irritam muito!
11. Nome de três pessoas que são/foram muito especiais para você!

 Indico:
- Alma Poetica {www}
- L' Amour Mon Age {www}
- O Blog da Blogueira {www}
- Garota Apimentada {www}
- One Esmalte {www}
- Amo Nail Art {www}
- Cover of Girl {www}
- Menino Ridículo {www}
- Jeito Único {www}
- Just Be Happy {www}
- Mundo das Blogueiras {www}

Finalmente o Tutorial:

  Aos que não sabem como é que ficará, veja a imagem logo abaixo:

  Vá em Design  Editar HTML  Expandir Modelo de Widgets  Ctrl + F  Procure por:
]]></b:skin>
Logo acima cole este código:


/* Aqui definimos as propriedades CSS para a lista do menu */
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;    
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9; /*---cor de fundo---*/
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;  /*---cor da borda---*/
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
}
ul#navigation li a:hover{
background-color:#CAE3F2;
opacity: 1;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8; /*---cor do link---*/
    text-shadow: 0 -1px 1px #fff;      
}


/* Aqui definimos as imagens de fundo para os links dos itens da lista do menu*/
ul#navigation .home a{
background-image: url(http://1.bp.blogspot.com/-8kXTrCSJ6TI/T7PpNQtumCI/AAAAAAAAAF4/TfFELS_TSJk/s1600/home%2B%25281%2529.png);
}
ul#navigation .sobre a      {
background-image: url(http://2.bp.blogspot.com/-8b0NOVUuGpQ/T7PpNqWONsI/AAAAAAAAAGE/ncafVsfgxg8/s1600/id_card%2B%25281%2529.png);
}
ul#navigation .contato a    {
background-image: url(http://2.bp.blogspot.com/-tmsZ5WfQVy0/T7Pp1sJqh2I/AAAAAAAAAGo/tO5AWC7Xb48/s1600/mail%2B%25281%2529.png);
}
ul#navigation .feedrss a   {
    background-image: url(http://1.bp.blogspot.com/-jMeVHtFdzbc/T7Pp1Qq2rtI/AAAAAAAAAGc/HaGlP612qSE/s1600/rss%2B%25281%2529.png);
}
ul#navigation .imagens a     {
    background-image: url(http://3.bp.blogspot.com/-WWPgJGVlBZU/T7PpNy2-9fI/AAAAAAAAAGQ/Z2aP6VN4SKA/s1600/images.png);
}
 Copie o código que está logo acima {Ele é longo, por isto tive que colocar em uma caixinha de texto} Agora procure pela tag:
</head>
Cole este código logo acima:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    var d=300;
    $(&#39;#navigation a&#39;).each(function(){
        $(this).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },d+=150);
    });

    $(&#39;#navigation &gt; li&#39;).hover(
    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-2px&#39;
        },200);
    },
    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },200);
    }
);
});
</script>

 Agora para acabar tudinho, procure por:
<header>
                                                        Cole este código acima:
<ul id='navigation'>
 <li class='home'><a href='URL-AQUI'><span>Home</span></a></li>
 <li class='sobre'><a href='URL-AQUI'><span>Sobre</span></a></li>
 <li class='contato'><a href='URL-AQUI'><span>Contato</span></a></li>
 <li class='feedrss'><a href='URL-AQUI'><span>Feed</span></a></li>
 <li class='imagens'><a href='URL-AQUI'><span>Imagens</span></a></li>
</ul>


  Entendendo um pouquinho mais:
 Bem pessoal no primeiro código que eu passei para vocês tem alguns itens assim acompanhado de http://___.png, elas são as imagens que quando você passa o mouse, o menu desce e aparece ela..vocês podem mudar {Só um concelho coloque imagens não tão grandes, e nem tão pequenas, porque se não fica estranho}, já no segundo código não pode mudar nada.. Passando para o terceiro, ele é a parte que aparece, você tem que colocar os dados corretamente, apenas as partes em negrito você deve/pode mudar com o que se pede..
   Espero que eu tenha ajudado vocês com este tutorial, a postagem foi longa, mais garanto que ela ajudará muitos! ;) Todos os créditos ao Mundo Blogger!

68 comentários

Postar um comentário

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