22/04/2013

Tutorial: Efeito 4 Slidings

||
  ♥ Postagem Programada♥

Bom dia amores, como vão? Trago mais um tutorial para vocês ele se chama Efeito 4 Slidings, achei ele no blog Mono Kawaii, o efeito e simplismente divino, querem ver? Então clique aqui, shown não é? Então vou mostrar como fazer agora. E não esqueçam de dizer o que acharam nos comentários, ok? Sua opnião é muito importante para mim. Então vamos lá!!?


Vá ate seu HTML e procure pelo ]]></b:skin>, achou? Então cole esse código acima dele:

.qitem {
    width:140px;
    height:140px;   
    border:4px solid #222;  
    margin:5px 5px 5px 0;
    background: url('http://www.queness.com/resources/html/bar/bg.gif') no-repeat;    
    overflow:hidden;
    position:relative;
    float:left;
    cursor:hand; cursor:pointer;
    font-family: arial;
}
 
    .qitem img {
        border:0;
     
        /* allow javascript moves the img position*/
        position:absolute;
        z-index:200;
    }
 
    .qitem .caption {
        position:absolute;
        z-index:0;  
        color:#ccc;
        display:block;
    }
 
        .qitem .caption h4 {
            font-size:18px;
            padding: 10px;
            margin: 0px;
            color: #D40C0C;
            text-align: center
        }
 
        .qitem .caption p {
            font-size:11px; 
            padding: 10px;
            margin:0;
            text-align: ce;nter
        }
 
.bar1, .bar2, .bar3, .bar4 {
    position:absolute;
    background-repeat: no-repeat; 
    z-index:200;
}
 
.clear {
    clear:both; 
}

Otimo, eu aconselho não mecher em nada a não ser na imagem "gif", cor e largura como altura estão todos destacados em negrito. Agora salve é va ate layout e adicione um gadget HTML/JavaScript e cole esse código nele.

Outra vez aconselho a não mecher em nada a não ser a url da imagem e a descrição/link, bom é isso espero que tenham gostado, sorry os erros de português. Ate a proxima!!!

9 comentários:

  1. amei <3<3
    kissus ;3
    ncnosekai.blogspot.com

    ResponderExcluir
  2. que legal, gostei ^.~
    cr4zy-world.blogspot.com

    ResponderExcluir
  3. Oii, faz quanto tempo que não passo aqui!
    Adorei o post talvez eu use no lay de soreteio
    Bom, passei para avisar que assim que o WK alcançar a meta de 100 seguidores terá um sorteio de um layout. Peço que ajudem a divulgar! E convidem seus amigos a seguir o blog e ajudar na meta.
    Kisses! Julie
    withoutkawaii.blogspot.com.br/

    ResponderExcluir
  4. Anônimo24/4/13

    Volta logo Drw

    ResponderExcluir
  5. Anônimo24/4/13

    Muito legal o efeito!!!!

    ResponderExcluir
  6. Bruno24/4/13

    Lindo o lay do kuro!!!

    ResponderExcluir
  7. como por um ao lado do outro?

    ResponderExcluir