Image Map

15/10/2012

Tutorial: Caixinha deslizante

Créditos: - Gente, visitem o blog lindo de bonito da Vitória, o Viih's Design! Ele é muito bom :3
AHSUAHSUASH
 Enfim, o tutorial tão pedido!
 Sim, caras leitoras, finalmente o tutorial de como colocar a caixinha deslizante. Já ensinei como colocar o ask.fm no blog aqui, mas agora vem a parte 2 do tutorial.
 Você pode colocar qualquer coisa nessa caixinha, não só o ask.fm, pode ser também c-box, ask do tumblr, caixa de pesquisa, avisos ou qualquer budega. Caso você ainda não tenha visto como é/esteja vendo em um futuro breve sem essa caixinha aqui tem print:
antes e depois de clicar
 Vamos lá?
 Vá no seu blog e clique em Layout>Adicionar Gadget> HTML/Javascript e cole nele o seguinte código:
<style type="text/css">#gb{position:fixed;top:100px;margin-left: -100px;z-index:+1000;}* html #gb{position:relative;}.gbtab{height:101px;width:50px;float:left;cursor:pointer;background:url('URLDAIMAGEM') no-repeat;}.gbcontent{float:left;border: 2px; solid #CORDABORDA;background:#CORDEFUNDO;padding:10px;}</style><script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 150-w) : moveGB(170-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;gb.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script><div id="gb"><div class="gbtab" onclick="showHideGB()"> </div><div class="gbcontent">Código da Cbox aqui.<div style="text-align:right"><a href="javascript:showHideGB()">[fechar]</a></div></div></div><script type="text/javascript">var gb = document.getElementById("gb");gb.style.right = (140-gb.offsetWidth).toString() + "px";</script>
 Agora vamos ás mudanças! O que está sublinhado é o espaço que a sua caixinha flutuante/deslizante vai ter do topo do seu blog e do lado esquerdo (respectivamente), sendo que você pode/deve modificar pra que fique bem juntinho, você pode aumentar ou diminuir a vontade. O que está em itálico são a altura e a largura da imagem na qual a pessoa vai clicar pra que a caixinha apareça. O que está em negrito é a url da imagem na qual a pessoa vai clicar. O que está em vermelho é a borda e o back da caixinha que desliza. O que está em azul é o código do que você quer que fique na caixinha e, finalmente, o que está em verde é o que vai ter escrito no botão onde a pessoa clica pra fechar a caixinha.
 E como eu quero ser legal trouxe algumas imagens pra vocês usarem! Usem e abusem, ok? Caso vão fazer as suas próprias tentem não copiar a minha, sejam criativos.
 Enfim, se usarem tanto as imagens quanto o tuto (quem usar as imagens vai ter que usar o tuto, então anyway) creditem, ok?
Post completo por Piink Cookie. Todos os direitos reservados. Copyright 2012. Plágio é crime.
 Bem, espero que tenham gostado! Não sabem quantas pessoas me pediram esse tuto, hahaha. Sei que agora vão chover blogs usando, isso me deixa um pouco triste, mas pelo menos eu fui a primeira :3
 É isso. Beijinhos com glitter :*

59 comentários:

  1. Hihi* Ótimo tutorial! O resultado é super prático porque não ocupa muito espaço. :)

    ResponderExcluir
  2. ótimo tutorial paula rsrs
    beijãao

    ResponderExcluir
  3. Nyaaaaaaaaaaaaaaaa , sua deusa do html ~o~ thanks baby !

    ResponderExcluir
  4. Já vi o tutorial, é bem facinho de fazer, e vou ver se utilizo no novo layout do blog. Um beijo.

    http://world-cutest.blogspot.com.br/

    ResponderExcluir
  5. ~ le , as mina pira no tuto da Paulinha .
    -http://blog-foreverpretty(.blogspot.)com.br/ retire os parênteses (ou clique no perfil) . Kissuuuuuus

    ResponderExcluir
  6. Simplesmente tenho que elogiar este blog, ele é muito original, muito perfeito. Já tenho uma amizade com vocês, donas do blog.. olha que maravilha, um blog me trouxe várias amigas!. kkkk. ADOREI o tutorial, muito original, não tenho ask, mas sempre quis fazer algo neste estilo para a c-box do Facebook.

    Hoje no Acesso Permitido, está publicada a primeira postagem do F.Click, uma postagem com contém uma lista de quatro blogs que conheço há muito tempo e que admiro muito, é uma oportunidade de conhecer novos blogs, que não sinônimos de novos leitores, seguidores, visitantes, blogueiros e principalmente de novos amigos. Um beijo e um grande abraço do seu querido leitor, Acesso Permitido.Entre pelo perfil ~*

    ResponderExcluir
    Respostas
    1. Oown, muito obrigada Andy! Sério mesmo, isso me deixa muito feliz! Pode saber que todas nós te consideramos um amigo :3
      E bom que gostou! ^^

      Excluir
  7. Na boa! Eu achei muito criativo essa caixinha do ask.me flutuando ali do lado. E realmente, eu nunca tinha visto nenhum outro blog com algo assim, parabéns! Eu também aposto como você, que vão chover blogs usando isso HAHAHA

    Adorei o tutorial e as dicas, bjbj.

    http://rascunhosdasuuka.com

    ResponderExcluir
    Respostas
    1. Oown, brigada flor! Vamos ganhar a aposta juntar, bate aí o/ hahaha ><
      Bom que gostou, flor!

      Excluir
  8. gente que legal
    ahauahushu eu adoro esse gif

    ResponderExcluir
  9. UHUUUUU mais um capítulo da nossa infinita novela "Ensinamentos Da Mestra Paula" :3 como sempre,os seus modelos são lindos (também né,olha quem faz u.u)
    :**

    ResponderExcluir
  10. Bem legal, mas não tem os créditos?
    Ah, eu comentei lá, se ficou meio estranho a explicação me avise kkkkkkk
    Bjos!
    http://amonailart.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. O das minhas imagens não, mas o da caixinha ta lá em cima, na blockquote ^^
      Okok, pode deixar que vou ver!

      Excluir
  11. Sempre quis saber como fazer isso! Talvez faça...

    omeubrilhantemundo.tk

    ResponderExcluir
  12. Adorei Paulinha sua diva,sempre arrasando *-*
    Ótimo tutorial (((:
    Beijinhos ~GA

    ResponderExcluir
  13. Amei, fica linda e sem ocupar tanto espaço
    beijos

    ResponderExcluir

  14. HORA DE AVENTURA ~~ <3
    Amei o tuto, tava precisando :D
    Kisses :3
    GA~

    ResponderExcluir
  15. Tutorial muito útil pro blog! Estou pensando em colocar no meu, ai qualquer dúvida é mais fácil responder!

    Posso te pedir um favor? Vota em mim neste blog aqui: http://novidadesdatekinha.blogspot.com.br ?
    É só clicar em Blog Moda Online, na enquete na barra lateral! Se votar, vai lá no meu blog e me avisa, pois farei uma divulgação dos blogs que me ajudaram!
    Obrigado.
    Beijos

    blogmodaonline.blogspot.com

    ResponderExcluir
    Respostas
    1. Ok, pode deixar que voto! Bom que gostou, flor :3
      Aaah, okok ^^

      Excluir
  16. Ótimo tutorial amore, é bem útil e fica super mega hiper lindo -qq ' Amei =)

    Sweet Teen - Acesse o meu blog clicando no meu perfil -

    ResponderExcluir
  17. É ótimo que você poste tutoriais, pq, sério, o seu design é lindo.

    ResponderExcluir
  18. Muito bom o tutorial ótima dica pra quem tem ask e não quer que ocupe espaço na barra lateral
    Naflordaiidade(.blogspot.com)é sem o parenteses ;*

    ResponderExcluir
  19. Que facinho! Será que dá pra colocar a fã-page do Facebook também? Só por curiosidade, porque eu ainda não tenho uma .-.

    Beijos,
    Anna
    garota-queen.blogspot.com

    ResponderExcluir
  20. Esse tutorial é perfeito mesmo! Vou usar em 5,4,3,2..
    Gostei muuuito. ♥

    - xoxo -

    ResponderExcluir
  21. Adoreei o tuto é muito boom ! Vou tentar usar ! Aii quanto tempo Paulinha , estava com saudades mas não estava dando tempo de entrar no pc , mas voltei ! Bjoos

    http://meninachicmc.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bom que voltou, Laura! Tava com saudades, viu? :3

      Excluir
  22. Tava procurando um tutorial assim. :3
    Amei seu blog!;*

    http://koorean-lovers.blogspot.com.br

    ResponderExcluir
  23. Faz tempo que eu estava esperando esse tutorial.bjs
    no-planetaroom

    ResponderExcluir
  24. OMG! Acho tão mágico criar um código HTML e depois ensinar. É meio que
    / bitches, please. i'm fabulous. you're not. you will just catch the code that i invented. /
    ISUAHDUADH parei
    BEIJOWS
    /existe iPhone rosa? :O eu n sabia/
    Just Debee

    ResponderExcluir
    Respostas
    1. Mesmo que esse não seja meu, também me sinto assim! hahaha ><
      Beijos :*

      Excluir
  25. O tutorial,é bem legal!
    Já tinha,acho que ele dá um tchã no blog né?
    #SUPERQUEAMEI!
    karenselajaalmiron . blogspot . com . br /

    ResponderExcluir
  26. Tutorial ótimo!!!!! Ah tempo queria saber <3 ,3
    Bjs *-* Boa semana!
    umaxicaradeleite.blogspot.com

    ResponderExcluir
  27. Nunca tinha visto um tutorial do tipo! É um jeito fácil e que chama muito a atenção do leitor. Foi muito bem explicado também e eu adorei!!

    Mil beijos, momamoraes.blogspot.com

    ResponderExcluir
  28. Paulinhaa, desculpa, não li o post :(
    É uma hora e meia da manhã, só vim dar uma passadinha e deixar um oi. :)
    Enviei a foto da unha da leitora, você recebeu certinho ? Não tenho prática em mandar email, então só Deus sabe se eu enviei certo ! hehehe
    Mil beijos :*

    ResponderExcluir
    Respostas
    1. Aah, que isso! Oii :3
      Recebi sim! Pode deixar que vai aparecer no post *---*
      Beijos :*

      Excluir
  29. ótimo tuto.
    adorei, só naum uso pq naum preciso ^^
    bjs

    ResponderExcluir
  30. Paula, eu não sei como escrever no about e no contato .... me ensina?

    ResponderExcluir