Input Slider

06/12/2012
Yoo! tudo bem com vocês ?
Não postei ontem por que minha internet está horrível de boa rs. Sem muito o que dizer o tutorial de hoje é de um efeito em imagens que mais parece um sidle, o resultado é bem legal, eu super amei, veja meu exemplo. Gostou do resultado ? ele é bem fácil de fazer...




Vá em modelo >> Editar HTML, aperte F3 e procure pela tag  ]]></b:skin> e acima dessa tag cole esse enorme código:

.ia-container {
    width: 550px;
    margin: 0px auto;
    overflow: hidden;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
    border: 7px solid rgba(255,255,255,0.6);
    }

.ia-container figure {
    position: absolute;
    top: 0;
    left: 0px; /* width of visible piece */
    width:300px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
    -webkit-transition: all 0.3s ease-in-out;
    margin-top: 0px;
    margin-bottom: 0px;
}
.ia-container > figure {
    position: relative;
    left: -50px !important;
}
.ia-container img {
    display: block;
    width: 100%;
}

.ia-container input {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px; /* just cover visible part */
    height: 100%;
    cursor: pointer;
    border: 0;
    padding: 0;
    opacity: 0;
    z-index: 100;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ia-container input:checked{
    width: 5px;
    left: auto;
    right: 0px;
}
.ia-container input:checked ~ figure {
    left: 200px;
    -webkit-transition: all 0.7s ease-in-out;
}

.ia-container figcaption {
    width: 250px;
    height: 100%;
    background: rgba(87, 73, 81, 0.1);
    position: absolute;
    top: 0px;
    -webkit-transition: all 0.2s linear;
}
.ia-container figcaption span {
    position: absolute;
    top: 40%;
    margin-top: 50px;
    right: 20px;
    left: 20px;
    overflow: hidden;
    text-align: center;
    background: rgba(87, 73, 81, 0.3);
    line-height: 20px;
    font-size: 18px;
    opacity: 0;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
    padding: 20px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{
    background: rgba(87, 73, 81, 0);
}
.ia-container input:checked + figcaption span {
    -webkit-transition: all 0.4s ease-in-out 0.5s;
    opacity: 1;
    top: 50%;
}
.ia-container #ia-selector-last:checked + figcaption span {
    -webkit-transition-delay: 0.3s;
}
.ia-container input:hover + figcaption {
    background: rgba(87, 73, 81, 0.03);
}
.ia-container input:checked ~ figure input{
    z-index: 1;
}
@media screen and (max-width: 720px) {
    .ia-container {
        width: 500px;
    }
 
    .ia-container figure {
        left: 0px;
        width: 500px;
    }
 
    .ia-container input {
        width: 10px;
    }
 
    .ia-container input:checked ~ figure {
        left: 260px;
    }
 
    .ia-container figcaption span {
        font-size: 16px;
    }
}
@media screen and (max-width: 520px) {
    .ia-container {
        width: 320px;
    }
 
    .ia-container figure {
        left: 20px;
        width: 180px;
    }
 
    .ia-container input {
        width: 20px;
    }
 
    .ia-container input:checked ~ figure {
        left: 180px;
    }
 
    .ia-container figcaption span {
        font-size: 12px;
        letter-spacing: 2px;
        padding: 10px;
        margin-top: -20px;
    }


Entendo e personalizando o sidle:
Todo o código da div .ia-container figcaption span { é aonde você edita o fundo, e a descrição do slide.
E a div .ia-container input:checked ~ figure { é o tanto da imagem que você quer que apareça quando clicar na imagem, tipo assim se você quer que apareça a imagem toda ou só a metade dela e o modo de como a imagem vai ser distribuida sobre o sidle.
E a primeira div a .ia-container { você pode alterar a borda do slide.


Agora vá em layout, adicione um gadget Script/HTML cole esse código lá alterando o que se indica:
<div class="ia-container">
               
    <figure>
        <img src="URL DA IMAGEM 01" alt="image01" />
        <input type="radio" name="radio-set" checked="checked" />
        <figcaption><span>DESCRIÇÃO</span></figcaption>
       
        <figure>
            <img src=" IMAGEM " alt="image02" />
            <input type="radio" name="radio-set" />
            <figcaption><span>DESCRIÇÃO</span></figcaption>
           
            <figure>
               <img src="URL DA IMAGEM 03" alt="image03" />
            <input type="radio" name="radio-set" />
            <figcaption><span> DESCRIÇÃO</span></figcaption>
               
                <figure>
                    <img src="URL DA IMAGEM 04" alt="image04" />
            <input type="radio" name="radio-set" />
            <figcaption><span> DESCRIÇÃO</span></figcaption>
                   
                    <figure>
                        <img src="URL DA IMAGEM 05" alt="image05" />
            <input type="radio" name="radio-set" />
            <figcaption><span> DESCRIÇÃO</span></figcaption>
                       
                        <figure>
                            <img src="URL DA IMAGEM 06" alt="image06" />
            <input type="radio" name="radio-set" />
            <figcaption><span>DESCRIÇÃO</span></figcaption>
               
                            <figure>
                                <img src="URL DA IMAGEM 07" alt="image07" />
            <input type="radio" name="radio-set" />
            <figcaption><span>DESCRIÇÃO</span></figcaption>                              

                                <figure>
                                    <img src="URL DA IMAGEM 08" alt="image08" />
            <input type="radio" name="radio-set" />
            <figcaption><span>DESCRIÇÃO</span></figcaption>
                                </figure>
                               
                            </figure>
               
                        </figure>
                           
                    </figure>
                       
                </figure>
                   
            </figure>
           
        </figure>
       
    </figure>
   
</div>
Espero que tenham gostado do tutorial, Até o próximo!
Achei esse código na Single, então se usar credite a ST e o ADO pela tradução e alterações.

47 comentários

  1. Que perfeitoo, parece meio que revista né?? parabéns. iricardodesigner

    ResponderExcluir
  2. Que lindo, lindo, lindo que ficou eu vou tentar fazer *-*

    siteiloveit.blogspot.pt

    ResponderExcluir
  3. ótimo tutorial flooor. Vou tenta fazer isso no meu blog. Estou te convidando a visitar o meu bloguito. Espero que goste >>> http://juhhrabelo.blogspot.com.br/

    ResponderExcluir
  4. Que lindo esse slide ! *O*
    Nunca tinha visto antes desse modelo! Quando for colocar em meu blog, vou usar esse ^^

    Luce ~ Unicorns of Plush

    ResponderExcluir
  5. Vei está ideal demais, eu vou usar na minha elite no layout que eu estou fazendo e vou dar os devidos créditos.
    ladyalen.blogspot.com

    ResponderExcluir
  6. Que fodaaaaaaaaaaaaaaaaaaaaaaaa, adoreeeeeei s2
    Você é muito divona em html vey *uuu*

    pinkpimenta.blogspot.com.br/

    ResponderExcluir
  7. Amei d+ *-* posso repassar no meu blog??? Claro com creditos :)

    girl-super-secret(blogspot*com*br)

    ResponderExcluir
  8. Que perfeito! Acho que vou usar no futuro layout *u*

    blog--the-memories.blogspot.com

    ResponderExcluir
  9. Ai que legal, lindo, mas demora muito pra carregar!

    Beijinhos <3
    Garota Inocente

    ResponderExcluir
  10. Goostei dmz, da pra colocar no cabeçalho flor ?? *--*
    http://comentariosde1garotaqualquer.blogspot.com.br/

    ResponderExcluir
  11. amei acho que vou usar pq tô fazendo um layout então preciso de tutoriais úteis como os do seu blog, quando eu terminar irei creditar seu blog pois está me ajudando pakas no lay

    ResponderExcluir
  12. Nossa, fica muito lindo! Eu preciso melhorar nos meus layouts e usar códigos assim, haha. O Seu layout está perfeito! Muito lindo, amei demais! <3 E obrigada pelos elogios no meu post, ^^ Sim, as primeiras fotos são minhas, rs E eu tenho 14 anos! :33

    Beijinhos, Paula! ♥
    ~Sweet Makeup~
    (clica no perfil pra visitar meu blog)

    ResponderExcluir
  13. muito legal, mais quando tentei encaixar no cabeçalho não ficou tão legal então vou deixar pro próximo :) mais tô triste pq é muuuuito lindo

    ResponderExcluir
  14. Nossa ficou lindo, adorei o tutorial, super bem explicadinho *-*
    Acho que vou usar no meu próximo lay, fica perfeito *-*

    Estou seguindo seu blog, amei aqui. Beijos!

    brechodeconteudo.blogspot.com

    ResponderExcluir
  15. awwn que lindo. Amei!
    Vou ver se coloco no meu blog no próximo Lay :)

    Beijos <33
    www.mundoo-cute.blogspot.com

    ResponderExcluir
  16. Uau que legal adorei *-* super lindo!
    Beijos

    lastday-keep.blogspot.com

    ResponderExcluir
  17. ótimo tutu! ameei haha' ^^
    Bjoos Nhaaack --> My Candy Space (acesse pelo meu perfil)

    ResponderExcluir
  18. Lindo, lindo, lindo, lindo e lindo *-* OMG, vou tentar fazer :33 Eu adorei *8* hahaha

    Kissu ♥
    Querida Loucura

    ResponderExcluir
  19. Lindo seu blog *-*
    Seguindo, sdv ??

    http://umagarotadeallstar.blogspot.com.br/

    ResponderExcluir
  20. Não tinha visto esse slider,amei!
    http://bloggogirls.blogspot.com.br/

    ResponderExcluir
  21. Annaaaaa minha diva, to voltando e que saudades de você e do blog, gata!
    Esse efeito é lindo parece um slide mesmo ficaria legal no cabeçalho!
    E layout do seu blog ta MA-RA-VI-LHO-SO, adorei!
    Beijos, sz'

    BANGTEEN.BLOGSPOT.COM

    ResponderExcluir
  22. Nossa que show esse efeito ♥ amei amei, um dia eu uso.
    Ainda não tinha visto rs adorei o tuto ^^
    bjinhos
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
  23. Gente que slide é esse *---* perfeito!
    Olá flor, obrigada por comentar lá no Black Cherry, é sempre um prazer te ver por lá. Seu blog é tão lindo que dá uma invejinha rosa...
    Vou favoritar esse post pra usar o slide depois, okay?
    Beijos!

    myacidblackcherry.blogspot.com

    ResponderExcluir
  24. esse slide é lindoo

    http://adolescentenerd.blogspot.com.br/

    ResponderExcluir
  25. Adorei o resultado , ficou mt bom!
    Otimo tutorial (:

    Já conhece o meu blog? corre lá !
    http://www.paaradateen.com

    ResponderExcluir
  26. Oooooi tudo beem?
    entao tava dando uma olhada no seu Blog e achei ele lindooo viu Amei mesmo *-*
    Ja to seguindo e se puder me segue tambeeem ?

    http://menina-de-atitude.blogspot.com.br/

    ResponderExcluir
  27. Oi linda , ameei seu bloog , muito lindo e supeer fofo ! Ja estoou seguindo ( Dããr , claro como não seeguir esse blog rs ) Se voce puder da uma passadinha no meu e me seguiir tambem agradeço !]
    Bjooos de Moorango !
    http://cherryice-2012.blogspot.com.br/

    ResponderExcluir
  28. gostei do tutorial... devo usar no proximo laay!
    tudo lindo aqui

    fb group: AB - Amizade na Blogsfera.
    @esteffanifontes, segue? Beijos,
    Aos Dezesseis Anos - aosdezesseisanos.blogspot.com.br
    Seja bem vinda do meu blog.

    ResponderExcluir
  29. Nossa. bem diferente, ainda não tinha visto esse tipo de menu.
    bjoos

    http://blog-purpleparty.blogspot.com.br/

    ResponderExcluir
  30. Nossa que diferente , não conhecia !
    Fofinha , muuito lindo seu blog hein , ta de parabéns muuito perfeito aquii ~~~ Seguindo ! ♥
    E ficaria muito honrada se você passasse la no meu cantinho ♥

    lorhannyschneeider(.)blogspot.com.br
    (Só tira os parenteses )

    ResponderExcluir
  31. Que slide lindo♥
    Kristen seduzindo u.ú
    chokawai.blogspot.com.br

    ResponderExcluir
  32. Ey flor, você tinha falado que os créditos era seus então coloquei ok?! veja:
    http://adolescentenerd.blogspot.com.br/2012/12/efeito-degrade-no-blog.html#comment-form

    Valeu pelo aviso! :) até breve

    ResponderExcluir
  33. Anna, passei aqui de novo pra avisar que eu te tenho como afiliada ainda, mais você não me tem :((
    Pode arrumar? Adoro ser seu parceiro, não queria perder a parceria!
    Beijos
    Bang Teen

    ResponderExcluir
  34. AI MEU DEUS,esse é o Adolescente do Oposto?Jura?Caramba eu nem consigo acreditar,mas,Ana eu vim aqui pra pedir desculpas,no dia que conheci o blog falei que amei e que ia virar uma leitora,mas,o motivo pelo qual parei de visitar aqui foi que fiquei sem computador e varias outras coisas,gente quando me lembro do antigo ADO penso o quanto ele cresceu,nossa,e eu queria ter acompanhado esse crescimento mas infelizmente não consegui,posso te dizer que vou começar a ler assiduamente aqui,desde onde eu parei...Beijos

    P.S:Talvez o Girly Cute volte.

    ResponderExcluir
  35. Amei o slider...

    Beijo, Lili
    Princesa Teen. // Agora você tem chance de aparecer na sidebar.

    ResponderExcluir
  36. olha tao te plagiando: http://queridomundoteen.blogspot.com.br/

    ResponderExcluir
  37. Aceita afiliação ? Ainda estou reformando o blogger,mais gostaria muito de ser sua afiliada. Ja fui dona de um blog (Bomba de Brilho) mais eu acho que ninguem conhecia,espero que aceite. Se aceitar por favor responda este comentário. Beijos. Bia :)

    DayDreaming

    ResponderExcluir
  38. Amei o layout, tipo tumblr bem diferente, feliz ano novo.
    Rebeldia em V ~ Blog

    ResponderExcluir
  39. Adorei o resultado,até acho que vou usar em outro layout que eu vou fazer,floor inaugurei hoje o meu blog,queria tanto que você fizesse uma visitinha,desde já obrigada,beijos!
    http://fashion-4ever1.blogspot.com.br/

    ResponderExcluir
  40. Adorei o seu blog, é a primeira vez que entro aqui no seu blog, e já amei, parabéns e muito sucesso com o seu blog *-*

    http://segredosdeblogueira.blogspot.com.br/

    ResponderExcluir
  41. Divo, já vi esse slide em outro blog e pirei, bem moderno, com certeza usaria.

    Beijos de amora

    carismaticaoficial.blogspot.com

    ResponderExcluir
  42. O slide é divinamente legal, mais não era o que eu precisava, ): mais é muito util :) flor ^^ poderia me ajudar a cumprir minha meta de 100 seguidores até 10 de janeiro,
    eu ia ficar super grata e ja estou seguindo aqui, um beijo e amei aqui:)

    http://oseumundomaisfashion.blogspot.com.br/

    ResponderExcluir
  43. Olá, gostaria que me ajudasse com algo, se estiver disposta, clique aqui.

    Obrigada, beijos.

    ResponderExcluir
  44. Seu blog é muito bom!
    Comenta e segue o meu tb:
    nossoblogdemodaa.blogspot.com

    ResponderExcluir
  45. Bem legal o tutorial
    Http://decora-harajuku.blogspot.com

    ResponderExcluir

Retribuo todos os comentários, menos comentários como Seguindo, segue de volta ? ou parecidos, esses NUNCA serão respondidos!
Fora isso fique a vontade para comentar e volte sempre <3