Tutorial: Barra deslizante botones compartir con la opción cerrar

unadisco

Préstamo
Gamma
SEO
Verificación en dos pasos desactivada
Desde
7 Ene 2013
Mensajes
281
Hola a todos hoy les traigo un toolbar que es para blogger para que puedan compartir sus en las redes sociales su entradas.

Características del la barra:

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

DEMO
blogger-el-foro-barra-delizable.png


Para instalarlo:

Ahora sí, como primer paso entra en la Edición HTML del blog y marca la casilla Expandir plantillas de artilugios, luego busca la etiqueta:

Buscamos la etiqueta:
Insertar CODE, HTML o PHP:
<body>

Debajo de ella pegamos este código:
Insertar CODE, HTML o 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>

Ahora crea un nuevo gadget html y pega en el este código.
Insertar CODE, HTML o 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 les guste alguna duda solo comente.
 

Carlos Arreola

Admin
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
4.341
Tutorial aprobado y agregado al listado de tutoriales.
 

Joselin

Alfa
Verificación en dos pasos desactivada
Desde
25 Mar 2013
Mensajes
26
Muchas gracias, me viene muy bien este tutorial!
 

emski

Pi
Verificación en dos pasos desactivada
Desde
27 Jul 2012
Mensajes
5.202
Gracias brother :encouragement:
 

anferro

Ómicron
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
29 Oct 2011
Mensajes
4.519
Gracias por el aporte! :encouragement:
 

spacedeejays

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
30 Oct 2011
Mensajes
69
No hay una forma de que salga solamente en las entradas y no en el incio?
 

Gustavito

Dseda
Verificación en dos pasos desactivada
Desde
26 Abr 2013
Mensajes
1.216
Exelente !!!!!!!!!!!!!!!!! Estoy armando algo y todavia no llegue a esa parte, y pensaba que poner para armar algo como esto.... pero esto es justo lo que necesito.

GRACIAS ! Exelente fin de semana :applause::applause::applause:
 

mikimoney

Gamma
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
4 Abr 2012
Mensajes
461
Funciona con cualquier tipo de Theme?

- - - Actualizado - - -

gracias amigo me sirvio
 
Última edición:

kibrot

Dseda
Verificación en dos pasos desactivada
Desde
10 Dic 2012
Mensajes
1.104
Muy bueno, me ha funcionado bien, gracias
 

Arriba