Só 72 Bundas
Só 72 Bundas
(+18)
AS BARATINHAS #39
AS BARATINHAS #39...
...Conteúdo (+18)
superentretenimento
Cabeça, ombro,
joelho e pernas
Buião
37 decotes que vão deixar a
sua semana melhor



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

Como Bill gates: " se você nasce pobre não é culpa sua mas se você morre pobre a culpa é toda sua." | "ver vídeo"
DicasHot
Widget by DicasHot