08 setembro 2012

2 tutoriais em um post!

Olá povo brasileiro!Como estão meus amores?
Hoje,um dos tutoriais é pedido de uma leitora!
E outro é eu que quis colocar!
Os tutoriais serão de:

-Como colocar Ask.fm no blog.
-Como colocar menu deslizante no blog.

Se quiser saber como se faz essas coisas,aperte em Mais informações!



Primeiro tutorial!
Como colocar menu deslizante no blog.

Vá em Design > Editar HTML e procure por:

 ]]></b:skin>

Acima da tag, cole:

/* Aqui definimos as propriedades CSS para a lista do menu */
ul#navigation {
    position: absolute;
    margin: -25px;
    padding: 0px;
    top: 0px;
    right: 150px;
    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:#d4d4d4; /*---cor de fundo---*/
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px dashed #8d898b;  /*---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.8;
    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:13px;
    color:#3e3d3e; /*---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://i1234.photobucket.com/albums/ff411/SweetLG/homee.png);
}
ul#navigation .sobre a      {
background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/sobre.png);
}
ul#navigation .foryou a    {
background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/fpryou.png);
}
ul#navigation .tutoriais a   {
    background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/tuto.png);
}
ul#navigation .png a     {
    background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/png.png);
}


Explicar o código levaria muito tempo, vou dar a vocês o básico:
position: absolute;
Se você trocar por fixed o seu menu vai acompanhar a rolagem da página.
opacity: 0.8;
Aumente o número se quiser diminuir a opacidade do fundo.

    margin: -25px;

Aumente o número MANTENDO o - se tiver algum espacinho quando você passar o mouse. Vai fazer subir mais.
O resto está explicado entre "/*" no código.
3 - Procure por:
 </head>


4 - Acima da tag cole:
<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>

5 - Agora procure por:
<header>


6 - Acima da tag cole:
<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='foryou'><a href='URL-AQUI'><span>For You</span></a></li>
 <li class='tutoriais'><a href='URL-AQUI'><span>Tutoriais</span></a></li>
 <li class='png'><a href='URL-AQUI'><span>Png's</span></a></li>
</ul>
Pronto!Gostaram?
Esse tutorial foi pego do blog Half My Heart!
 Vamos ao outro tutorial!

Como colocar Ask.fm no blog.

Bom esse tutorial vai ser feito por imagens,então vamos lá!
Abra se Asf.fm ~> Vá em:

E vá em:

Arrume do jeito que quiser!
Vá em Layout ~> Add gadget ~> HTML/JavaScript ~>Cole o código e pronto!
E aí,gostaram do post de hoje?
Comentem!
Qualquer outro post que quiserem,é só falar na Ask.fm ou por comentário!
Beijos ^^

   

Um comentário:

  1. Oii ,, tudo bem amigaa ?
    Ameii a postagem lindaa ,, cada dia que passa seu blog fica mais lindo *..*
    Como estamos no final de semana ai decidi vim fazer uma visitinha e desejar um otímo final de semana :33

    Há tem postagem nova lá no meu bloguinho dá uma passada por lá pra vose ver !

    2beijos querida , e aguardo tua visita em meu blog ;**

    (Se for visitar o meu blog retire os espaços , pois coloquei estes espaços porque estão dizendo que o google tah excluindo o blog )

    party-fucking . blogspot . com . br

    ResponderExcluir