13/04/2014

Tutorial: Gadget flutuante com efeito deslizante

||

Konnichiwa minna-san, como vai o final de semana de vocês? Espero que bem. O meu não vai muito bem, minhas novidades não são muito boas. Um amigo meu de longa data faleceu ontem... motivo de não ter aparecido aqui no blog. Meu CD da Koda Kumi chegou nessa Sexta Feira, mas estou tão depressiva... que nem abri ainda, acreditam? Estava toda empolgada pela chegada do álbum de minha diva, não me xinguem eu gosto muito dela. Mas realmente dificil perder alguém querido... então gomenasai, não ter aparecido. Hoje devido a um pedido decidi postar como colar gadget flutuante de seguidores, como se encontra no blog. É bem fácil de fazer é só ter um pouquinho de paciência, tem várias formas de fazer, mas vou ensinar a minha maneira. Se estiver interessado é só continuar lendo.

Na  primeira vez que realizei esse tutorial havia dado erro, então precisa de um pouco de paciência. Se ocorrer erro tente novamente se ainda assim persistir basta deixar um comentário que darei uma ajudinha. O que irei ensinar é deixar o gadget de seguidores em um pequeno box, com uma aba para fora assim quando o leitor ou visitante passar o mouse, ele desliza para fora. Fica muito fofo é diferente, acho importante dar atenção a cada pedacinho do blog, então porque não aos seguidores onde fica nosso amigos? Também tem como colocar outras coisinhas nesse gadget flutuante como:Chat, Cbox do Facebook etc... basta ter um código para adicionar. Então vamos, lá?



Primeiramente vá ate seu Modelo/Design, Editar Html. Procure por </head> e acima disso cole este código:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>

Agora procure por ]]></b:skin> e acima disso cole:
.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(URL DA SUA IMAGEM) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}

Nesse código as partes destacadas em vermelho e rosa são:
Width e heigth - tamanho da sua imagem de fundo.
URL da Imagem - endereço da sua imagem de fundo.| Imagem para o fundo:  www
rigth | (-250px) - posição da imagem; o número negativo faz com que a imagem fique mais para a direita, só mostrando uma partezinha dela; se vc retirar o sinal de menos, por exemplo, a imagem ficará bem ao centro do seu blog. Aí é só ir modificando o número ate ficar ao seu agrado.
top | (130px) -  posicionamento da imagem, mas para cima ou para baixo. É só ir modificando também, assim como o de cima.
Width e heigth = se referem ao tamanho do fundo do gadget.
Background-color = a cor de fundo do gadget.

Agora salve e vá ate o Layout/Design, adicione um novo Gadget, Html/Javascript, e dentro dele cole esse código:
<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnome-de-sua-pagina-de-facebook&amp;width=238&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>

Isso para adicionar uma  Fanbox, agora se quiser adicionar outro código HTML use esse aqui:
<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'>CÓDIGO HTML &amp;width=238&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></div></span></div></div>

Se não souber como pegar o código dos seguidores, acesse esse tutorial e faça ate o terceiro passo: www Agora cole o código na parte que indicada em vermelho. Prontinho seus gadget flutuante e deslizante esta pronto. 

Todos os créditos do tutorial vão para:  Reino Kawaii e Ciudad Blogger

27 comentários:

  1. Gostei do tutorial, acho que usarei em algum outro layout que eu fizer ^3^

    Chu~
    http://the-kawaiis.blogspot.com

    ResponderExcluir
  2. Lamento imenso pelo seu amigo...sério,odeio essas coisas tristes! T-T
    Vai ver que se puser o CD da Kumi-san a tocar vai-se sentir mais leve!Nada melhor que uma boa música para nos abstrairmos da realidade,não é?Desejo-lhe toda a sorte e coragem do mundo para que supere essa fase!
    Quanto ao post...magnífico como sempre! *O*
    Sério,é muito útil!Amei de coração!
    Aguardando mais posts seus >o|| Black Snow ||

    ResponderExcluir
    Respostas
    1. Eu li seu comentário e coloquei o CD para tocar e realmente me animei, muito obrigada. Me ajudou muito, realmente me fez sentir melhor. Desculpe não ter respondido antes Snizhana-chan, mas muito obrigada pelo carinho e pela força. Espero que posa usar esse tutorial um dia, ficara lindo em seu blog. :3

      Excluir
  3. Qualquer dia eu irei tentar fazer esse tutorial, dá mais espaço ao blog >3<

    Até mais, www.b-urning.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Hihi dá sim muito mais espaço ao blog, espero que possa usar um dia.

      Excluir
  4. Sinto muito , sei como é . perdi minha biza a pouco tempo , mas espero que fique bem viu >u<
    Era doida pra saber como faz isso :33 obrigada o/


    ~ geekegirlie.blogspot.com ~☆

    ResponderExcluir
    Respostas
    1. Obrigada Celly -Chan vou sim ficar bem, logo logo. Espero que você também esteja bem. ^^ Muito obrigada pelo carinho e pela força.

      Hihi que bom, que pode aprender aqui. Espero que use ficaramuito bonito em seu blog.

      Excluir
  5. Nossa, eu sinto muito.
    Espero que se sinta melhor,é difícil dizer algo sei como é horrível isso.
    Ah bem isso é delicado.

    Ah bem, CD da Koda Kumi,sonho ...
    Minha mãe está me enrolando para comprar o do After School desde o ano
    passado!!
    QUERO MEU CD KK

    Esse tutorial parece bem complicado,vou tentar usar mais pra frente!
    Mas fica muito legal!

    Sarang Cute!

    ResponderExcluir
    Respostas
    1. Verdade mas muito obrigada pelo carinho, viu? Muito obrigada, nem sei como agradecer por esse carinho.

      Hihi, eu pedi bem antes de lançarem, pedi quando saiu o ultimo album dela o JAPONESQUE. Assim já estava combinado de que quando sai se o novo album completo eu ganharia. Você gosta do After School? *O* Puxa..que chato isso, mas tenho certeza que vai ganhar tenho certeza que vai. ^^

      Hihi ele não e tão complicado executar como parece, mas sim arrumar a imagem para colocar no fundo, essa parte que é bem complicada e chatinha rsrs Mas muito obrigada por achar legal e pelo carinho.

      Excluir
  6. Minha nossa sinto muito por seu amigo, eu nunca perdi ninguém muito muito próximo, mas imagino como deve ser barra pesada uma situação assim '-'.... e eu amei esse Gadget fiquei me perguntando como faria para deixa-lo assim ... arigato por ensinar... ♥

    ResponderExcluir
    Respostas
    1. Sim, mas logo estarei melhor. Mais muito obrigada pelo carinho Jay, fico realmente grata por isso nem sei como agradecer. Hihi não foi nada, espero que use um dia. ^^

      Excluir
  7. Sinto muito pela perda do seu amigo, eu entendo isso é muito ruim mesmoo /:
    Amei o tutoo bem útil mesmoo

    Beijos <3
    p-perfectsthings.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada pelo carinho Estefani, realmente é muito ruim. t.t
      Mas obrigada por gostar do tutorial, beijinhos e mais uma vez obrigada pelo carinho.

      Excluir
  8. Não sei como vai ficar o resultado , mas acho q vai ficar fofo :3 com certeza vou usar no próximo lay.

    > http://www.g00dv1b3s.blogspot.com.br/ Visita :3

    ResponderExcluir
  9. Oooh quero usar 'u'
    Nossa amei seu layout, faz um tempo que nao visito pois fiquei em hiatus ;-;
    1000kawaiiblog.blogspot.com

    ResponderExcluir
    Respostas
    1. Usa sim, espero que goste. :3
      Hihi thanks por gostar, tudo bem ficarei feliz sempre em ver você aqui mesmo que demore um tikinho. Mas que bom, que saiu em hiatus. :3

      Excluir
  10. Muito bom!
    Lá no blog falei de si e do seu blog: http://vidadepanqueca.blogspot.pt/2014/04/meus-blogs-favoritos.html

    http://vidadepanqueca.blogspot.pt/

    ResponderExcluir
    Respostas
    1. Obrigada, serio??? Thanks eu irei ver. ^^

      Excluir
  11. Esse tutorial é muito, muito, muito útil, ADOREI!
    http://bubble-feelings.blogspot.com.br/

    ResponderExcluir
  12. Hey Wendy. Sinto muito pelo teu amigo, sei como é difícil perder alguém. Hey, eu meio que tive um problema com o código, deu até certo, mas apareceram as letrinhas embaixo com o código junto com o gadget deslizante e ficou horrível. Aí eu vi que não tinha fechamento depois do código html, coloquei mas não fez a mínima diferença. Aí eu retirei o código que tava aparecendo (<&width=238&colorscheme=light&connections=15&stream=false&header=false&height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true">) e não foi que deu certo? Mas, será que o gadget vai ficar com algum problema? '-' bju *3*

    ResponderExcluir
    Respostas
    1. Obrigada pela compreensão. Bom respondendo sua pergunta, dá não eu uso o meu sem. ^^

      Excluir
  13. Wendy- chaaaaaan, não acredito que você postou esse tuto ~*^*~ sempre amei esse seu gadget de seguidores que desliza mas nunca imaginei nem por onde começar. Obrigada por ter ensinado, quando eu for tentar fazer um layout com certeza seu tuto será de imensa ajuda. Por falar em layout eu to usando um que você fez <3 arigatooou
    Que triste isso que aconteceu com seu amigo, eu já passei por uma situação semelhante é muito ruim mesmo! ): fica difícil de acreditar que algo desse tipo realmente aconteceu...

    Beijinhos, Wendy-chan >3<

    Senhorita Bru

    ResponderExcluir
  14. Wendy, meu html tinha mts códigos, e aggr, aos poucos, td vai sumindo, tem mt poucos códigos, n dá nem pra encher uma tela SEM barra de rolagem, e msm quando tinha mais códigos, smp dava 0 de 0, aggr isso continua, me ajuda Weendy <3 Pfv e obg <3

    ResponderExcluir
  15. Este comentário foi removido pelo autor.

    ResponderExcluir