terça-feira, 15 de julho de 2014

Tutorial: Like box do facebook na lateral.

Olá povo,aqui é a Dessa do blog belos sonhos postando pela primeira vez no blog gramatifiquei que para quem não sabe,é um blog em que eu colaboro e vice-versa. Estou postando no blog da Tatiana (minha colaboradora) e também somos parceiras.

Então povo,está anunciado a minha colaboração e a parceria :)

Vamos lá,primeiramente vou deixar a preview de como vai ficar. Mas vocês poderão editar a imagem (fundo) do jeito que quiser,sem alterar o tamanho,as posições e a transparência.
(o efeito de movimento da caixinha saiu meio estranho porque isso é apenas um print)

Como começar? Primeiro de tudo. Quero que vocês criam uma caixa de curtir no site do facebook clicando aqui. (você provavelmente deve ter essa like box).
É bem fácil de criar,tem vários tutoriais na internet mas como o post não é sobre isso,vou ao que interessa:
Colocar a like box do facebook em aba lateral.
Bem,vou deixar o código,você copia e cola em qualquer lugar. Porém, antes de adicionar um gadget html/javascript em seu blogger em layout: Você terá de fazer certas alterações:
Ao criar uma like box do facebook em que eu mandei,você copia o código IFRAME. Ai está o código:
Você terá de apagar todo o código desde <iframe> até </iframe> e colar o código de sua like box do facebook.
<div id="facebook-bpd-position">
<div id="facebook-bpd">
<div id="facebook-bpd-fb">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FBelos-Sonhos-Blog%2F611495805564218%3Fref_type%3Dbookmark&amp;width&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=254110221429714" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:220px;" allowTransparency="true"></iframe>
</div>
</div>
</div>
<style>
#facebook-bpd-fb{
padding-left: 60px;
padding-top: 2px;
}
#facebook-bpd{
background:url('http://i.imgur.com/tP13dIe.png')no-repeat;
width:393px;
opacity: 0.3;
height:250px;
transition:all 1s;
}
#facebook-bpd:hover {
opacity:100;
}
#facebook-bpd-position {
right: -352px;
top: 233px;
transition: all 1s;
position: fixed;
z-index: 500000000000000;
}
#facebook-bpd-position:hover {
right: 0px;
}
</style>
NÃO SE ESQUEÇA DE ALTERAR A POSIÇÃO EM QUE A LIKE BOX VAI FICAR,CASO NÃO APARECER CERTO NO SEU BLOG,AFINAL,CADA BLOG TEM UMA CERTA LARGURA,UMA CERTA POSIÇÃO,ENTÃO CASO NÃO DÊ CERTO OU NÃO APARECER....

Você simplesmente, procura por #facebook-bpd-position { neste código que mandei e faz uma alteração (grande alteração) nos números do right: -352px; e também colocando negativo (-) ou positivo (em branco) até chegar no jeito que você mais preferir.

E para mudar a posição de onde ele vai ficar em cima,em baixo,no meio... Faça a mesma alteração que eu falei mas, com o top: 233px;.

Após isso,prontinho..

Caso queira personalizar a caixinha de fundo basta salvar esta imagem e editar,respeitando a transparência,tamanho (altura e largura) e depois,hospedar a sua imagem em algum site,eu utilizo o imgur.com e após enviar,clicar na imagem ou pegar o URL da imagem e,no código,só trocar o:
background:url(' URL DA IMAGEM AQUI ')no-repeat; 

Simples assim, mas você não pode excluir as aspas. Beijos.

2 comentários:

  1. Adorei, super genial essa ideia de colaboração!!!
    Quero fazer isso no meu blog, será que tem como fazer isso no tumblr também?

    ResponderExcluir
    Respostas
    1. tem sim amiga mas n sei como,faz muito tempo que nao uso tumblr... abraços :*

      Excluir

 
© CAPRICATI © TODOS OS DIREITOS RESERVADOS. DESIGN E PROGRAMAÇÃO POR DESIGNLC. imagem-logo