Tutorial - Gadgets deslizantes

Heart no Kuni no Alice ~ o mangá mais perfeito da Terra, lar do meu marido ♥-q

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: 1px < o 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