Box Flutuante de Rede Social no Blog


Usar redes sociais para divulgar seus conteúdos ajudam a deixar o leitor por dentro das novidades do seu blog. Como o fecebook é a plataforma mais usado pelos usuários, se você não quer perder essa  fatia de leitores, é necessário que crie uma pagina para seu blog. Assim seus leitores receberam no seu feed de noticia, as atualizações de seu blog.

Adicionando Like box Flutuante no blog

  1. Acesse seu blog;
  2. Modelo;
  3. Editar HTML;
  4. Ctrl+F
 Procure pela tag </head> e copie o código acima dela.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Salve as mudanças feitas no seu template;


2. Parte
  1. Layout
  2. Adicionar um Gadget
  3. HTML/JavaScript
  4. Copie o código abaixo e salve:
<script type="text/javascript"> //<!-- $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fmisterblogando&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>By <a href="http://misterblogando.com/">MisterBlogando</a> / <a href=" http://misterblogando.com"> Acesse!</a></span></div></div>

Altere o nome em vermelho para o nome de sua página.
Salve essa gadget, e posicione na área que você achar melhor.
Com isso você tera um box flutuante da rede social do seu blog.

17:13
Marcadores:

Postar um comentário

[facebook][disqus][blogger]

Alberto Monteiro

Formulário de contato

Nome

E-mail *

Mensagem *

Tecnologia do Blogger.
Javascript DisablePlease Enable Javascript To See All Widget