Como flutuar um objeto em cima de uma imagem

Tumblr_lnekxbjo6y1qbt8b8o1_500_large

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ã...

Comente usando seu facebook!


Comente!

  1. ADOREI, vou fazer isto lá na minha cbox :D

    ResponderExcluir
  2. Nossa eu simplesmente adorei esse tutorial, tão legal, acho que no meu layout do mês que vem vou fazer isso! (kkk) Gostei, mesmo! E adorei o layout novo do seu blog, eu queria te perguntar como você fez a sua sidebar ficar duas!? Que template você estava usando quando fez esse efeito? Qual tutorial usou? Sabe, eu encontrei o tutorial na NET, mas não encontrei o código inicial, deve ser pelo template que eu estou usando! Pode me ajudar respondendo as minhas perguntas?! Simplesmente adorei tudo aqui, o layout principalmente! (kkk)Fico também muito feliz por você está gostando do festival HP!!! (^^)

    http://acessopermitidoblog.blogspot.com/

    ResponderExcluir
  3. amei o tutorial, parabéns mesmo!
    O blog tá lindo demais *-*
    amei,bjs
    www.dearblueorange.blogspot.com

    ResponderExcluir
  4. ótimo tutorial, vou tentar depois!

    Bjs,
    http://placestyle.blogspot.com/

    ResponderExcluir
  5. Legalzinho. O template do blog está bem legal, igual o do Trechy Teen, né?
    @agarotafashion

    "Kerli: Novidades sobre o álbum e o encontro com MariMoon"
    http://blogdagarotafashion.blogspot.com/

    ResponderExcluir
  6. Aí obrigado pessoal, muito feliz pelos elogios!
    Beijos...

    ResponderExcluir
  7. A euu gostei da volta do seu blog ! hiper lindo o layout,
    faz uma tuuto mostrando como colocar as barras laterais assim ? *oo*
    Beijos @LuOliveira6
    Novidades : http://paradateen1.blogspot.com/2011/07/ferias-oque-fazer.html ! ferias oque fazer . comenta ? *o*

    ResponderExcluir
  8. Heey, queria saber se aceita afiliação... http://chillipeppers91.blogspot.com
    Beijoos

    ResponderExcluir
  9. curti muito *-* já sabia fazer , mesmo assim ótimo tutorial , obrigada por aceitar afiliação , já coloquei o link lá também *-* http://fashionscream.blogspot.com/

    ResponderExcluir
  10. Claro que entendo! Qundo tomar uma decisão, me avisa lá! Bjjs
    http://chillipeppers91.blogspot.com

    ResponderExcluir
  11. Trashy Girl, nossa estou até rindo, eu mexendo com HTML todos os dias para achar o modelo das colunas, e ele estava na minha cara! (kkk) Obrigado por esclarecer minha dúvida, perguntei há 4 blogueiros e só você me disse! thank's.. (^^)

    Aceita afiliação?
    http://acessopermitidoblog.blogspot.com/

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

    ResponderExcluir
  13. O blog Acesso Permitido, está dando para você merecidamente 6 selos! Pegue logo! (^^)
    http://acessopermitidoblog.blogspot.com/p/selos.html

    ResponderExcluir
  14. Sem problemas flor *_*
    ótimo tutorial, kissus
    cherry-liah.blogspot.com

    ResponderExcluir
  15. Lindo aqui, te seguindo .
    Adorei os tutorias do seu blog *-*

    Beijos.
    http://vaniteeen.blogspot.com/

    ResponderExcluir
  16. Oieee, amei o blog!!! Seguindo, segue de volta??? Aceita parceria??? Só pra avisar acabei de abrir uma página de encomendas de desing pra quem tiver interesse!!!
    www.selenamgdemais.blogspot.com

    ResponderExcluir
  17. Oi Juu, eu ainda não tenho uma cbox, mas quando tiver vou usar sua dica. Você poderia me dizer como fez para que seu blog ficasse com as duas colunas de cores diferentes?

    Beijos
    http://palavras-e-sentimentos.blogspot.com

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

    ResponderExcluir
  19. Ajudou demais esse tutorial, parabéns! Bjs

    ResponderExcluir
  20. Vaaleu, flor! Ajudou bastante :)

    www.menina-dedeus.blogspot.com

    ResponderExcluir
  21. Olá!
    você me visitou no meu blog, e deixou seu link, então vim aqui conhecer o seu!
    muito lindo aqui, adorei as cores do blog!
    Ví que vc curte html/css, tbm adoro!

    Ahhh, achei que vocês poderiam se interessar, lá no meu blog, tem um post sobre como colocar um domínio próprio para o blog (tipo: www.trasshygirl.com). e tem um cupom de desconto junto. com ele você gasta R$6,00 por 1 ano com o domíno, só que vale até final de setembro (amanha) então se quiser pega o numero do cupom la!
    segue o link do post: http://www.coresdodia.com/2013/09/como-instalar-um-dominio-do-godaddy-no.html

    Adorei aqui! E já estou curtindo a fanpage!
    beijos

    http://www.coresdodia.com/

    ResponderExcluir