Como flutuar um objeto em cima de uma imagem

Oi, então já voltei viu? Foi bem rapidinho, rsrs  Hoje eu vou ensinar a vocês uma "técnica" que esta sendo muito utilizada hoje em dia pelos blogueiros, lembram a um tempo atras no Material Extra que ela colocou a c-box em cima do cabeçalho? Hoje vamos aprender a fazer isso! Lembrando que com isso podemos colocar um background(fundo) na c-box, num player do youtube, na caixa de curtir do facebook, num contador de visitas, ou até mesmo nos seguidores do nosso blog...

Vou mostrar alguns exemplos:

Essas imagens foram printadas por mim e tiradas respectivamento do Cherry Bomb e do Dicas para blogs

Agora é bem mais simples do que você imagina, com um pouco de atenção você consegue fazer isso em um piscar de olhos...

Passo 1 - Criar o gadget com a opção html/java script para fazer qualquer uma das opções acima.

Passo 2 - Copie o código abaixo e cole no gadget.

<div style="background:url(endereço da imagem) left no-repeat; height: 100px; width: 256px;"><div style='float:left; padding-top:68px; padding-left:155px;'>código do contador de visitas</div></div>

Então vamos lá as explicações:

Vinho - Na primeira opção vinho você vai colocar o endereço da imagem a ficar como fundo na segunda opção você vai colocar o código usado(c-box, player do youtube, caixa de curtir do facebook, contador de visitas, seguidores e etc).

Vermelho - Em vermelho é a altura da imagem que você vai usar(confira no criador ou editor de imagens).

OBS: Só edite o numero!

Laranja - Em laraja é a largura da imagem que você vai usar(confira no criador ou editor de imagens).

OBS: Só edite o numero!

Verde - Em verde é a direção que ele vai flutuar... left = esquerda | right = direita 

Mude conforme sua necessidade. 

OBS: Só edite a palavra!

Azul Claro - Em azul claro é a distância em que o objeto que vai "flutuar" sobre a imagem tem em relação ao TOPO, isso daí é com vocês... É mais na base do chute mesmo. Lembrando que existem numeros positivos(0, 1, 2, 3, 4) e negativos (-4, -3, -2, -1).

Azul Escuro - Em azul escuro é novamente a distância que o objeto que vai "flutuar" sobre a imagem tem em relação a ESQUERDA. Prossiga com a explicação a cima.

Passo 3 - Salve o gadget e visualize se estiver tudo certo ok, se não estiver deixe um comentário.

Bom, esse tutorial foi todinho feito por mim, minha mão ta até doendo aqui. Por favor se você usou me credite e tambem deixe o link do blog pra eu ver o resultado ok? Espero que tenha gostado e até amanhã...