Como flutuar um objeto em cima de uma imagem?

15:00

Tumblr_lo825osrni1qjrusjo1_500_large

Hoje vou ensinar um efeito muito legal para colocar no seu blog! É uma imagem que seve mais como Background, para 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:


Imagens retiradas 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....


Deixe seu comment.
By:Andy

Você também pode gostar:

Comentários
4 Comentários

4 mil comentários

  1. Amei o tuto futuramente, vou usar no meu blog, vou fazer um lay especial de aniversário de 2 anos do blog ;D Obg por sempre comentar.
    http://meninasapeca-ms.blogspot.com/

    ResponderExcluir
  2. Hahah' tinha visto esse tutorial, agora essa imagem, haha' ENGRAÇADA.. demaiiss. rsr'

    Ecleticus

    ResponderExcluir
  3. Legal a dica! ;)

    garotas100teen.blogspot.com

    ResponderExcluir
  4. Tudo de bom essa dica.

    Valew

    Beijos
    Aêssa Caroline Hoehne do:
    belasmulheres2.blogspot.com

    ME VISITE!

    ResponderExcluir

Já curtiu?

+ Lidas