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.
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&width&height=290&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true&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.
Adorei, super genial essa ideia de colaboração!!!
ResponderExcluirQuero fazer isso no meu blog, será que tem como fazer isso no tumblr também?
tem sim amiga mas n sei como,faz muito tempo que nao uso tumblr... abraços :*
Excluir