26/08/2012

Tutorial - Gadgets deslizantes

Konnichiwaa minna-saan ( > w < )/ ~
Espero que estejam todos bem :3.
Hoje vou ensinar como colocar esses "gadgets deslizantes" iguais aos do AEG. Na verdade, não são os gadgets da sidebar que se movem. São "caixas de texto" independentes. Pra dar esse efeito eu exclui todos os widgets da sidebar e os códigos necessários eu coloquei abaixo da área de postagem ^w^ ~truques da camicamii para criar o layout sendo revelados: now~
De qualquer maneira, ensinarei como colocar essas caixinhas deslizantes mega-fofas =3.
Esse é o meu primeiro tutorial, então pode ser que eu não explique muito bem tá? ^ ^"



Primeiro, vá no painel do blogger  Layout    Adicionar um gadget    HTML/Javascript e cole o seguinte código:



<div style="background-color:#fff;border:1px dotted #eee;position:fixed; bottom:65px; right:20px; width:200px; height:275px; padding:10px">

<br /><br />
<center>
TEXTO TEXTO TEXTO TEXTO  TEXTO TEXTO  TEXTO TEXTO  TEXTO TEXTO
</center>

<br />


<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f40e4631c34898f"></script></div>

Ok, agora vamos entender as partes mais importantes do código (em italico) ~

background-color: #fff < Nessa parte do código você pode escolher a cor da caixinha flutuante ^ ^.

Border: 1pxo tamanho da borda
dotted < o estilo da borda (pode ser dashed, solid, etc)
#eee < cor da borda

Position: fixed deixe assim caso queira que o gadget se mova junto com a página; coloque Absolute se quiser que fique num local fixo no blog

bottom:65px < distância da caixinha até o fim da tela, pode alterar se quiser e colocar "top" ao invés de bottom pra facilitar caso queira a caixa perto do topo

right:20px < a distância da caixinha até a parte direita da tela, pode mudar "right" por "left" se quiser que a caixinha fique no lado esquerdo

width:200px < a largura da caixinha

height:275px a altura da caixinha

padding:10px é como o "espaçamento" entre o conteúdo da caixinha e o final dela (não sei explicar muito bem isso, me desculpem =~=")

Prontinho *-*! Editando essas coisinhas você já pode utilizar da maneira que quiser sua caixinha flutuante \õ/.
Onde tem "TEXTO TEXTO" você pode colocar qualquer código que queira, como afiliados, imagens, links, etc ^ ^.

Espero que o tutorial seja útil nee~ <3

Kissus kissus

16 comentários:

  1. Oi flor !
    Já te coloquei nas Afiliações, obrigada ;]
    Heim, vs pode me seguir ? Te sigo de volta, prometo ;33

    beijoos

    ResponderExcluir
    Respostas
    1. Oiees =3
      Imagina, eu que agradeço nee~
      Claro claro, me desculpe por não seguir antes acabei me esquecendo ^v^

      Kissus <3

      Excluir
  2. Arigatou Camicamii -chan!!! Vou usar com certeza!! Arigatou mesmo!

    Kisses~~

    ResponderExcluir
    Respostas
    1. Nandemoo Manaami-chaan *-*!
      Que bom que gostou do tutorial :3 ~

      Kissus kissus

      Excluir
  3. Anônimo27.8.12

    Gostei do post, apesar de não saber mexer muitos nos códigos!Watashi baka~ ^///^
    Não precisa agradecer, eu é que lhe agradeço por fazer um design tão kawaii para meu blogue!!Arigatou outra vez *abraça*

    Xau kisses

    ResponderExcluir
    Respostas
    1. Arigatooo imouto-chaan >w< ~
      Yee, você não é baka! Só não entende muito bem os códigos, super-normal :3.
      Hihi, me deixa muito muito feliz que tenha gostado do layout novo nee *abraça 'fofamente'*

      Kissus *u*

      Excluir
  4. uaaaaaaaaaaaaaaaaaaau o3o adorei :3 vou usar em algum próximo layout meu o3o

    ResponderExcluir
    Respostas
    1. Obrigada obrigaada Maa-chaan c:
      Haha ook! Espero que fique legal no seu layout xDDD.

      Excluir
  5. Anônimo28.8.12

    Adorei o3o..coloquei no meu :3...é bem útil para mim,já que sou desorganizada XD ..fica mais bonitinho,e organizado ...:]

    ResponderExcluir
    Respostas
    1. Hontoo? *O*
      Que mágico alguém está utilizando um tutorial meu TTwTT ~felicidade felicidade~
      Hehe, que bom que gostou nee~
      Realmente fica bem mais organizadinho mesmo ^ ^.

      Kissuuuuus ^w^

      Excluir
  6. Camii-chan, a 2º fase do concurso Hakken Suru, já foi postada ontem. Tens hoje e amanhã para enviares as tuas respostas, cuidado com o tempo, sim?
    **Kissus
    http://hanayuuki-chan.blogspot.pt/2012/08/concurso-hakken-suru-fase-2.html

    ResponderExcluir
    Respostas
    1. Hai hai Hanna-chan!
      Eu tinha visto o post ontem e já te enviei o e-mail a alguns minutinhos ~hehe ^ ^".
      Arigatoo pelo lembrete, muito atencioso de sua parte >w<.

      Kissus minha coisinha kawaii *aperta bochechas* <3

      Excluir
  7. Nyaaan adorei <33
    Eu não sabia *uu*
    Talvez use em um próximo layout ^-^


    Sorvete de Morango @ Blogspot

    ResponderExcluir
    Respostas
    1. Que bom Nesu-chan >www<!
      Oh, ok ok espero que fique perfeito no seu layout ;3 ~


      Kissuuuuus

      Excluir