Barra flotante con botones de Facebook, Twitter y Google+ en Blogger

Hola amigos de Trucasos Blogger hoy les traigo un tutorial para poner una barra flotante o deslizante con los botones de compartir de las redes sociales y también la opción de "cerrar" bueno empecemos con el tutorial:

Características del la barra:

*Botones Facebook, twitter, google+.
*Esta flotando a la derecha zona media.
*Su posición es modificable.

Primero vamos a Plantilla>Edición HTML>Plantilla de artilugios (expandir artilugios)... y luego buscamos la etiqueta:

<body>

justo debajo de ella pegamos el siguiente código:

<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>

Ahora vamos a Diseño>Añadir Gadget... y agregamos un gadget HTML/Javascript y en el pegamos este código:

<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>
<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>

y Listo ya lo tenemos listo nuestra barra para blogger es muy fácil editar el código para los colore si quieren cambiar la Imagen en el código verán el link VERDE esa es la imagen lo que esta en ROJO son botones aleatorios de twitter y facebok los pueden cambiar por el codigo de sus fan pages o respectivos twitters espero que les haya gustado el tutorial. ¿Dudas? deja un comentario Saludos

Recientes

Barra flotante con botones de Facebook, Twitter y Google+ en Blogger

Relacionados

2 comentarios

Recomendamos: