Tutorial: Adicione botões de redes sociais ao seu blog no Blogger

  • Autor Autor unadisco
  • Data de início Data de início
Este tópico foi traduzido automaticamente do espanhol. Ver original
U

unadisco

Gamma
SEO
No recomendado
Olá a todos, hoje trago uma barra de ferramentas para o Blogger para que possam compartilhar suas postagens nas redes sociais.

Características da barra:

  • Botões Facebook, Twitter, Google+
  • Flutuando à direita na zona média
  • Sua posição é modificável

DEMO
blogger-el-foro-barra-delizable.webp​


Para instalar:

Agora sim, como primeiro passo entre na Edição HTML do blog e marque a caixa Expandir modelos de widgets, depois busque a etiqueta:

Buscamos a etiqueta:
Inserir CODE, HTML ou PHP:
<body>

Abaixo dela colamos este código:
Inserir CODE, HTML ou PHP:
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Agora crie um novo gadget HTML e cole nele este código.
Inserir CODE, HTML ou PHP:
<style type="text/css">
#menudesli {
background-color: #00FFFF; /* Color de fondo */
width: 75px;
padding-top:5px;
padding-bottom:25px;
text-align: center;
/* POSICION FLOTANTE */
position:fixed !important; 
right:5%;  /* Esto decide Izquierda o derecha 5% */
top:200px;  /* Distancia de arriba para abajo */
z-index:10 !important
/* POSICION FLOTANTE */
/* REDONDEADO */
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
/* REDONDEADO */
  border:-color: #000000; /* Color de borde */
  border-width: 2px;
  border-style: solid;
}
</style>
<div id="light" class="white_content">
<div class="menudesli" id="menudesli">



<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img src="http://3.bp.blogspot.com/-_0qFToAh1VM/UVtBehic5GI/AAAAAAAAHBE/y8k-BUg54PE/s1600/cerr.png" border="0"/></a>
<a href="http://blogger.el-foro.com/t2-barra-deslizante-botones-compartir-opcion-cerrar" target="_blank"><img src="http://1.bp.blogspot.com/-QnTbXSOlL7Y/UWHw4hJVPSI/AAAAAAAAHM0/LrRlbgyyN2M/s1600/Gadgets.png" border="0"></a>

<div class="fb-like" data-send="false" data-layout="box_count" data-width="75" data-show-faces="false" data-font="arial"></div>

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="es" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<div class="g-plusone" data-size="tall">
</div>

Espero que gostem, qualquer dúvida é só comentar.
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Tutorial aprovado e adicionado à lista de tutoriais.
 
Muito obrigado, este tutorial vem muito a calhar!
 
Obrigado brother :encouragement:
 
muito obrigado, serve de muito
 
Obrigado pela contribuição! :encouragement:
 
Não tem uma forma de aparecer somente nas postagens e não na página inicial?
 
Excelente !!!!!!!!!!!!!!!!! Estou montando algo e ainda não cheguei nessa parte, e pensava no que colocar para montar algo como isto.... mas isto é exatamente o que preciso.

OBRIGADO ! Excelente fim de semana :applause::applause::applause:
 
Funciona com qualquer tipo de Theme?

- - - Atualizado - - -

obrigado amigo, me serviu
 
Última edição:
Muito bom, funcionou bem para mim, obrigado
 
Voltar
Topo