Botones para compartir deslizantes Facebook, Twitter, Google+, Taringa y Bitácoras

Botones para compartir deslizantes Facebook, Twitter, Google+, Taringa y Bitácoras

Hola a todos, hoy les traigo este recurso que es muy importante y he visto que se busca con mucha frecuencia en la red, pero pocos blog lo postean con los pasos adecuados, asi que hoy les dejate explicado paso a paso como tienen que hacer para tener este barra CSS3 aplicado en nuestro blog para que los usuarios que visitan nuestros post puedan compartirlo directamente asus perfiles de la redes sociales que se muestran en los botones. Con este codigo lo que haremos es mostrar solo la burbuja amarilla para que al dar click se pueda desplegar para que puedan usar los botones de preferencia para compartilo.

Comenzemos como primer paso lo que tenemos que hacer es entrar a la plantilla del blogger que queremos agregar esta barra.

Paso 1»» Ingresar a Edición de HTML

Paso 2»» Expandir plantillas de artilugios, y antes de </head> pega el siguiente script: sin los «« »»

««<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'/>

jQuery.noConflict();

jQuery(function()

{

jQuery("#msg-compartir").click(function(event) {

event.preventDefault();

jQuery("#btns-compartir").slideToggle();

});

</script>»»

Paso 3»» Buscar en la Plantilla ]]></b:skin> y Ahora antes de ]]></b:skin> agrega los estilos:

«« /* Botones para compartir

----------------------------------------------- */

.msg-compartir {

width:140px; /* Ancho de la burbuja */

position:relative;

padding:10px;

margin:1em 0 3em;

text-align:center;

color:#000; /* Color del texto */

background:#F3961C; /* Color de fondo de la burbuja en navegadores que no soporten CSS3 */

/* Color de fondo gradiente de la burbuja */

background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));

background:-moz-linear-gradient(#f9d835, #f3961c);

background:-o-linear-gradient(#f9d835, #f3961c);

background:linear-gradient(#f9d835, #f3961c);

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

}

.msg-compartir::after {

content: "";

position: absolute;

bottom: -15px;

left: 67px;

border-width: 15px 15px 0;

border-style: solid;

border-color: #F3961C transparent; /* Color de fondo del triángulo de la burbuja */

display: block;

width: 0;

}

.btns-compartir {

display: none;

margin-top:-10px;

background:#F2F2F2; /* Color de fondo del contenedor de los botones */

border:1px solid #D0C9AF;

-webkit-border-radius:8px;

-moz-border-radius:8px;

border-radius:8px;

margin-bottom:20px;

}»»

Paso 4»» Buscar en la Plantilla esta linea de código. <div class='post-footer'> Una vez encontrado justo arriba de ese codigo colocaremos el siguiento Codigo que contiene los botones.

«« <b:if cond='data:blog.pageType == "item"'>

<center><a href='#' id='msg-compartir' style='text-decoration:none'><p class='msg-compartir'>Comparte esta entrada</p></a></center>

<tr>

<td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>

<td><script type='text/javascript'>(function(){var x=document.createElement('script'), s=document.getElementsByTagName('script')[0];x.async=true;x.src='http://widgets.itaringa.net/share.js';s.parentNode.insertBefore(x,s)})()</script>

<t:sharer data-layout='big'/></td>

</tr>

</table>

</div>

</center>

</b:if>»»

Y eso es todo, ahora proceda a Guardar los cambios que has realizado y dale vista previa para que puedas ver los cambios.. Espero a verlos ayudado cualquier duda pueden dejar un comentario en este post para que yo les ayude de una forma mas directa.. Gracias por la visita.

--------------------------