Caixa flutuante Facebook “Like Box” para implementação no seu blogue do Blogger.
Esta caixa permanece numa posição fixa do lado direito do seu blogue e quando você passa o rato por cima da imagem azul com a palavra facebook, a caixa desliza para a esquerda e revela-se.
Implementação;
No Blogue do Blogger;
Passo 1 - Entrar no painel principal do blogger.
Passo 2 - Seleccionar o separador Design e Elementos de Página, e Adicionar uma Miniaplicação e escolher HTML / JavaScript.
Passo 3 - Deixar o título vazio, e na área de conteúdo, cole o código abaixo.
Passo 4 - Verificar se está tudo bem, caso exista algum problema verifique se efectuou tudo bem, repita os passos caso necessário.
Para copiar o código clicar no ícone abaixo<! -- caixa lateral facebook -->
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".facebookwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-253"}, "medium");}, 500);}); /*]]>*/ </script>
<style type="text/css">
.facebookwidgets{
background: url("https://dl.dropboxusercontent.com/u/3883727/CodeBox/public/facebookWidgets/facebook_widget.png") no-repeat scroll left center transparent !important;
float: right;
height: 270px;
padding: 0 8px 0 46px;
width: 245px;
z-index: 99999;
position:fixed;
right:-250px;
top:20%;
}
.facebookwidgets div{
padding: 0;
margin-right:-8px;
border:4px solid #3b5998;
background:#fafafa;
}
.facebookwidgets span{
bottom: 4px;
font-size: 8px;
position: relative;
right: 6px;
text-align: right;
z-index: 99999;
}
.facebookwidgets span a{
color: gray;
text-decoration:none;
}
.facebookwidgets span a:hover{
text-decoration:underline;
}
.facebookwidgets iframe{
text-decoration: underline;
display: inline-block;
position: relative;
margin: 0px;
}
</style>
<div class="facebookwidgets" style="">
<div><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fmycodebox&width=240&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:258px;" allowTransparency="true"></iframe>
<span><center><a style="color:#a8a8a8;font-size:8px;" href="http://my-code-box.blogspot.pt/">Floating Facebook Widget</a></center></span>
</div>
</div>
<! -- /caixa lateral facebook -->
Passo 5 - Como Personalizar para ver os seus seguidores;
No código que colocou anteriormente procure pelo seguinte texto:
www.facebook.com%2Fmycodebox
Onde está mycodebox coloque o seu texto, se não souber qual é, abra a sua página do Facebook e veja o url dela, que será mais ou menos assim: https://www.facebook.com/mycodebox, portanto o que precisa será o texto que está a seguir a https://www.facebook.com/ no meu caso é mycodebox.
Se a sua conta de Facebook não tem um nome de utilizador, pode obter um já, para isso clique aqui:
Passo 6 - Experimentar e ver se está a funcionar, se não estiver a funcionar, pode ser devido a não ter ainda no seu blogue o JQuery necessário, então e só nesse caso faça o seguinte;
Passo 6a - Entrar no painel principal do blogger.
Passo 6b - Entrar na zona do HTML do Blogger; Modelo > Editar HTML.
Passo 6c – Procurar pela tag <head> e abaixo desta colar o código que está abaixo.
Para copiar o código clicar no ícone abaixo<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
Se alguma coisa estiver mal, estarei à sua disposição para o ajudar, basta contactar-me.
Parabéns irmão!!! Funcionou perfeitamente!!!!!!
ResponderEliminar