Gisele Gama
no Diamond Brazil - (+18)
...Conhece essa atriz de filme adulto?
(+18)
kkkk...10 Tentativas
fracassadas tentando ser sexy (+18)
... Só imagens de lamber os dedos
(+18)

Facebook Expansível do Lado Direito do Blog


Facebook Expansível do Lado Direito do Blog
Neste post falarei aqui no Dicashot para vocês como vocês podem estar colocando no blogger uma box expansível do facebook que automaticamente se abre ao passar o mouse por cima. Na figura ao lado você pode ver como ela fica quando está fechada. Veja na figura um pouco abaixo como ela fica quando está com a aba aberta.
Geralmente não se vê muitos destes gadgets em blogs, mas, como vocês podem ver, é possível colocá-lo no blogger.


                           

A algum tempo escrevi um post ensinando a colocar redes sociais expansíveis do lado esquerdo do blogger; caso você ainda não tenha lido este post leia agora clicando neste: Menu Expansível de Redes Sociais





Facebook Expansível do Lado Direito do Blog



Inserindo o código HTML

1° passo: Acesse o Painel do Blogger, escolha o blog e selecione a opção "Design" e clique em "Editar HTML".

2°passo: Agora usando o Ctrl+F, procure por:


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>

4° passo: Clique em "Salvar modelo" e feche a edição de HTML.

5° passo: Agora selecione a guia "Design", clique em "Adicionar gadget" e escolha a opção "HTML/JavaScript".

6° passo: Deixe sem "Título" e cole o seguinte código na caixa do gadget:

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".box-flutuante-facebook").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.box-flutuante-facebook{background: url("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.box-flutuante-facebook div{border:none;position:relative;display:block;}
.box-flutuante-facebook span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.box-flutuante-facebook span a{color: #808080;text-decoration:none;}
.box-flutuante-facebook span a:hover{text-decoration:underline;}
</style>
<div class="box-flutuante-facebook" style="">
<div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=URL-DA-SUA-PÁGINA-DO-FACEBOOK&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe>
</div>
</div>




7° passo: SUBSTITUA a URL destacada de vermelho no código pela URL da sua página no Facebook.

Se inscreva e receba nossas atualizações por e-mail:





Facebook Expansível do Lado Direito do Blog Facebook Expansível do Lado Direito do Blog Reviewed by Muca on 8/19/2013 09:51:00 AM Rating: 5

2 comentários

  1. Colega!
    Tem alguma condição de você explicar qual seria o código para colocar a caixa de comentários do blogger ao lado da caixa de comentários do facebook. E quando ocorrer o carregamento da página, que seja aberta uma por uma, nos clicks. Gostei do seu layout de comentários! Do lado esquerdo o face e do lado direito o blogger.

    Envia um convite pro meu facebook
    www.facebook.com/lglf77

    ResponderExcluir
  2. Olha Léo Lima, veja este tutorial aqui no nosso blog: http://dicashot.blogspot.com.br/2013/08/como-usar-comentarios-do-facebook-e-do.html

    Faça tudo conforme mostra o tutorial...

    ResponderExcluir