Agregar botones de compartir al estilo de Taringa

Wizard

Wizard Seguir

Xi
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
27 Ago 2011
Mensajes
4.257
buenas tardes el día de hoy quisiera saber si me podrían ayudar colocar los botones de compartir en las redes sociales al estilo de taringa, como los tiene actualmente, yo desde su página he sacado el código HTML y CSS de los botones, pero me hace falta la parte de la funcionalidad para compartir, alguien sabe como se puede colocar?, Aquí abajo coloco el código que yo he copiado:

Insertar CODE, HTML o PHP: 
<div class="social-bar top">
<a class="facebook sharer-button" title="Compartir via Facebook"></a>
<div class="facebook sharer-counter">0</div>
<a class="twitter sharer-button" title="Compartir via Twitter"></a>
<div class="twitter sharer-counter">0</div>
<a class="google sharer-button" title="Compartir via Google+"></a>
</div>




<style>
.social-bar {
    text-align: center;
}
.social-bar.bottom {
    border-bottom: 1px solid [B]Enlace eliminado[/B] [/URL] ;
    display: block;
    padding: 5px 0 15px;
    position: relative;
    width: 638px;
}
.social-bar .sharer-button {
    background: none repeat scroll 0 0 [B]Enlace eliminado[/B] [/URL] ;
    border: 1px solid [B]Enlace eliminado[/B] [/URL] ;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    display: inline-block;
    height: 30px;
    margin: 0 7px 0 12px;
    position: relative;
    vertical-align: top;
    width: 32px;
}
.social-bar.bottom .sharer-button:first-child {
    -moz-box-sizing: border-box;
    color: [B]Enlace eliminado[/B] [/URL] ;
    height: auto;
    left: 0;
    margin: 0;
    padding: 6px 0 6px 24px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    top: 5px;
    width: 110px;
}
.social-bar.bottom .sharer-button:first-child + div {
    left: 117px;
    position: absolute;
    top: 5px;
}
.social-bar .sharer-button:after {
    content: "";
    display: block;
    height: 22px;
    left: 5px;
    position: absolute;
    top: 5px;
    width: 22px;
}
.social-bar .facebook {
    background-image: linear-gradient(to bottom, [B]Enlace eliminado[/B] [/URL]  0px, [B]Enlace eliminado[/B] [/URL]  100%);
    border-color: [B]Enlace eliminado[/B] [/URL] ;
}
.social-bar .sharer-button.facebook:after {
    background: url("http://o1.t26.net/img/share-buttons.png") no-repeat scroll 0 -23px transparent;
}
.social-bar .twitter {
    background: linear-gradient(to bottom, [B]Enlace eliminado[/B] [/URL]  0px, [B]Enlace eliminado[/B] [/URL]  100%) repeat scroll 0 0 [B]Enlace eliminado[/B] [/URL] ;
    border-color: [B]Enlace eliminado[/B] [/URL] ;
}
.social-bar .sharer-button.twitter:after {
    background: url("http://o1.t26.net/img/share-buttons.png") no-repeat scroll 0 -45px transparent;
}
.social-bar .google {
    background: linear-gradient(to bottom, [B]Enlace eliminado[/B] [/URL]  0px, [B]Enlace eliminado[/B] [/URL]  100%) repeat scroll 0 0 [B]Enlace eliminado[/B] [/URL] ;
    border-color: [B]Enlace eliminado[/B] [/URL] ;
}
.social-bar .sharer-button.google:after {
    background: url("http://o1.t26.net/img/share-buttons.png") no-repeat scroll 0 -67px transparent;
}
.social-bar .sharer-button:hover {
    opacity: 0.85;
}
.social-bar .sharer-counter {
    background: none repeat scroll 0 0 [B]Enlace eliminado[/B] [/URL]  !important;
    border: 1px solid [B]Enlace eliminado[/B] [/URL]  !important;
    border-radius: 4px 4px 4px 4px;
    display: inline-block;
    padding: 6px 9px;
    position: relative;
}
.social-bar .sharer-counter:after, .social-bar .sharer-counter:before {
    background-image: none !important;
    border: medium solid transparent;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    width: 0;
}
.social-bar .sharer-counter:after {
    border-color: rgba(248, 250, 252, 0) [B]Enlace eliminado[/B] [/URL]  rgba(248, 250, 252, 0) rgba(248, 250, 252, 0);
    border-width: 5px;
    margin-top: -5px;
    top: 50%;
}
.social-bar .sharer-counter:before {
    border-color: rgba(189, 189, 189, 0) [B]Enlace eliminado[/B] [/URL]  rgba(189, 189, 189, 0) rgba(189, 189, 189, 0);
    border-width: 6px;
    margin-top: -6px;
    top: 50%;
}
</style>

Muestra de los botones:
Enlace eliminado

espero puedan ayudarme, saludos
 
Última edición:
elcuervito

elcuervito

Eta
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
29 Mar 2013
Mensajes
1.398
Pedro Fumero dijo:
No pero yo quiero insertar precisamente los de taringa, utilizando los script de cada red social, sin hacer uso uso de otra aplicación
Hacer clic para expandir...

yo no se mucho , `pero de casualidad seran estos

falta el de taringa

<div class='mbt_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false});</script>
<span class='st_fblike_vcount' displaytext=''/>
<span class='st_twitter_vcount' displaytext='' st_via='nombre de la cuenta'/>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
</div>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>


actualizo, te dejo el link de los que uso yo Como crear botones flotantes para compartir todas las redes sociales, Crear Bar Flotante « Widgets y Plugins para Blogger

capas de aca lo podes sacar lo que te falta

sino aca tenes otros
http://www.ayudadeblogger.com/2013/09/como-agregar-un-widget-flotante-social-media-en-blogger.html
 
Última edición:
Wizard

Wizard

Xi
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
27 Ago 2011
Mensajes
4.257
ezequielvillagra dijo:
yo no se mucho , `pero de casualidad seran estos

falta el de taringa

<div class='mbt_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false});</script>
<span class='st_fblike_vcount' displaytext=''/>
<span class='st_twitter_vcount' displaytext='' st_via='nombre de la cuenta'/>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
</div>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>


actualizo, te dejo el link de los que uso yo Como crear botones flotantes para compartir todas las redes sociales, Crear Bar Flotante « Widgets y Plugins para Blogger

capas de aca lo podes sacar lo que te falta
Hacer clic para expandir...

Gracias por la ayuda, amigo, pero los que trato de implementar son los que han implementado hace unas 3 semanas, esos son los anteriores.

PD: Los que necesito son estos:

Enlace eliminado
 
E

Elpadrotte

Épsilon
Desde
14 Ene 2013
Mensajes
776
Pedro Fumero dijo:
buenas tardes el día de hoy quisiera saber si me podrían ayudar colocar los botones de compartir en las redes sociales al estilo de taringa, como los tiene actualmente, yo desde su página he sacado el código HTML y CSS de los botones, pero me hace falta la parte de la funcionalidad para compartir, alguien sabe como se puede colocar?, Aquí abajo coloco el código que yo he copiado:

Insertar CODE, HTML o PHP: 
<div class="social-bar top">
<a class="facebook sharer-button" title="Compartir via Facebook"></a>
<div class="facebook sharer-counter">0</div>
<a class="twitter sharer-button" title="Compartir via Twitter"></a>
<div class="twitter sharer-counter">0</div>
<a class="google sharer-button" title="Compartir via Google+"></a>
</div>




<style>
.social-bar {
    text-align: center;
}
.social-bar.bottom {
    border-bottom: 1px solid [B]Enlace eliminado[/B] [/URL] [/URL] ;
    display: block;
    padding: 5px 0 15px;
    position: relative;
    width: 638px;
}
.social-bar .sharer-button {
    background: none repeat scroll 0 0 [B]Enlace eliminado[/B] [/URL] [/URL] ;
    border: 1px solid [B]Enlace eliminado[/B] [/URL] [/URL] ;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    display: inline-block;
    height: 30px;
    margin: 0 7px 0 12px;
    position: relative;
    vertical-align: top;
    width: 32px;
}
.social-bar.bottom .sharer-button:first-child {
    -moz-box-sizing: border-box;
    color: [B]Enlace eliminado[/B] [/URL] [/URL] ;
    height: auto;
    left: 0;
    margin: 0;
    padding: 6px 0 6px 24px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    top: 5px;
    width: 110px;
}
.social-bar.bottom .sharer-button:first-child + div {
    left: 117px;
    position: absolute;
    top: 5px;
}
.social-bar .sharer-button:after {
    content: "";
    display: block;
    height: 22px;
    left: 5px;
    position: absolute;
    top: 5px;
    width: 22px;
}
.social-bar .facebook {
    background-image: linear-gradient(to bottom, [B]Enlace eliminado[/B] [/URL] [/URL]  0px, [B]Enlace eliminado[/B] [/URL] [/URL]  100%);
    border-color: [B]Enlace eliminado[/B] [/URL] [/URL] ;
}
.social-bar .sharer-button.facebook:after {
    background: url("http://o1.t26.net/img/share-buttons.png") no-repeat scroll 0 -23px transparent;
}
.social-bar .twitter {
    background: linear-gradient(to bottom, [B]Enlace eliminado[/B] [/URL] [/URL]  0px, [B]Enlace eliminado[/B] [/URL] [/URL]  100%) repeat scroll 0 0 [B]Enlace eliminado[/B] [/URL] [/URL] ;
    border-color: [B]Enlace eliminado[/B] [/URL] [/URL] ;
}
.social-bar .sharer-button.twitter:after {
    background: url("http://o1.t26.net/img/share-buttons.png") no-repeat scroll 0 -45px transparent;
}
.social-bar .google {
    background: linear-gradient(to bottom, [B]Enlace eliminado[/B] [/URL] [/URL]  0px, [B]Enlace eliminado[/B] [/URL] [/URL]  100%) repeat scroll 0 0 [B]Enlace eliminado[/B] [/URL] [/URL] ;
    border-color: [B]Enlace eliminado[/B] [/URL] [/URL] ;
}
.social-bar .sharer-button.google:after {
    background: url("http://o1.t26.net/img/share-buttons.png") no-repeat scroll 0 -67px transparent;
}
.social-bar .sharer-button:hover {
    opacity: 0.85;
}
.social-bar .sharer-counter {
    background: none repeat scroll 0 0 [B]Enlace eliminado[/B] [/URL] [/URL]  !important;
    border: 1px solid [B]Enlace eliminado[/B] [/URL] [/URL]  !important;
    border-radius: 4px 4px 4px 4px;
    display: inline-block;
    padding: 6px 9px;
    position: relative;
}
.social-bar .sharer-counter:after, .social-bar .sharer-counter:before {
    background-image: none !important;
    border: medium solid transparent;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    width: 0;
}
.social-bar .sharer-counter:after {
    border-color: rgba(248, 250, 252, 0) [B]Enlace eliminado[/B] [/URL] [/URL]  rgba(248, 250, 252, 0) rgba(248, 250, 252, 0);
    border-width: 5px;
    margin-top: -5px;
    top: 50%;
}
.social-bar .sharer-counter:before {
    border-color: rgba(189, 189, 189, 0) [B]Enlace eliminado[/B] [/URL] [/URL]  rgba(189, 189, 189, 0) rgba(189, 189, 189, 0);
    border-width: 6px;
    margin-top: -6px;
    top: 50%;
}
</style>

Muestra de los botones:
Enlace eliminado

espero puedan ayudarme, saludos
Hacer clic para expandir...

aqui encontre un tuto viejo Botones para compartir estilo Taringa | Ciudad Blogger - Trucos y tutoriales para tu blog espero te sirva o en su caso solo sustituye los css que tienes.
 
G

ganzopt

Préstamo
Eta
SEO
Desde
23 Mar 2011
Mensajes
1.298
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Distes con ellos?

Me interesan :encouragement:
Pedro Fumero dijo:
buenas tardes el día de hoy quisiera saber si me podrían ayudar colocar los botones de compartir en las redes sociales al estilo de taringa, como los tiene actualmente, yo desde su página he sacado el código HTML y CSS de los botones, pero me hace falta la parte de la funcionalidad para compartir, alguien sabe como se puede colocar?, Aquí abajo coloco el código que yo he copiado:

Insertar CODE, HTML o PHP: 
<div class="social-bar top">
<a class="facebook sharer-button" title="Compartir via Facebook"></a>
<div class="facebook sharer-counter">0</div>
<a class="twitter sharer-button" title="Compartir via Twitter"></a>
<div class="twitter sharer-counter">0</div>
<a class="google sharer-button" title="Compartir via Google+"></a>
</div>




<style>
.social-bar {
    text-align: center;
}
.social-bar.bottom {
    border-bottom: 1px solid [B]Enlace eliminado[/B] [/URL] ;
    display: block;
    padding: 5px 0 15px;
    position: relative;
    width: 638px;
}
.social-bar .sharer-button {
    background: none repeat scroll 0 0 [B]Enlace eliminado[/B] [/URL] ;
    border: 1px solid [B]Enlace eliminado[/B] [/URL] ;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    display: inline-block;
    height: 30px;
    margin: 0 7px 0 12px;
    position: relative;
    vertical-align: top;
    width: 32px;
}
.social-bar.bottom .sharer-button:first-child {
    -moz-box-sizing: border-box;
    color: [B]Enlace eliminado[/B] [/URL] ;
    height: auto;
    left: 0;
    margin: 0;
    padding: 6px 0 6px 24px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    top: 5px;
    width: 110px;
}
.social-bar.bottom .sharer-button:first-child + div {
    left: 117px;
    position: absolute;
    top: 5px;
}
.social-bar .sharer-button:after {
    content: "";
    display: block;
    height: 22px;
    left: 5px;
    position: absolute;
    top: 5px;
    width: 22px;
}
.social-bar .facebook {
    background-image: linear-gradient(to bottom, [B]Enlace eliminado[/B] [/URL]  0px, [B]Enlace eliminado[/B] [/URL]  100%);
    border-color: [B]Enlace eliminado[/B] [/URL] ;
}
.social-bar .sharer-button.facebook:after {
    background: url("http://o1.t26.net/img/share-buttons.png") no-repeat scroll 0 -23px transparent;
}
.social-bar .twitter {
    background: linear-gradient(to bottom, [B]Enlace eliminado[/B] [/URL]  0px, [B]Enlace eliminado[/B] [/URL]  100%) repeat scroll 0 0 [B]Enlace eliminado[/B] [/URL] ;
    border-color: [B]Enlace eliminado[/B] [/URL] ;
}
.social-bar .sharer-button.twitter:after {
    background: url("http://o1.t26.net/img/share-buttons.png") no-repeat scroll 0 -45px transparent;
}
.social-bar .google {
    background: linear-gradient(to bottom, [B]Enlace eliminado[/B] [/URL]  0px, [B]Enlace eliminado[/B] [/URL]  100%) repeat scroll 0 0 [B]Enlace eliminado[/B] [/URL] ;
    border-color: [B]Enlace eliminado[/B] [/URL] ;
}
.social-bar .sharer-button.google:after {
    background: url("http://o1.t26.net/img/share-buttons.png") no-repeat scroll 0 -67px transparent;
}
.social-bar .sharer-button:hover {
    opacity: 0.85;
}
.social-bar .sharer-counter {
    background: none repeat scroll 0 0 [B]Enlace eliminado[/B] [/URL]  !important;
    border: 1px solid [B]Enlace eliminado[/B] [/URL]  !important;
    border-radius: 4px 4px 4px 4px;
    display: inline-block;
    padding: 6px 9px;
    position: relative;
}
.social-bar .sharer-counter:after, .social-bar .sharer-counter:before {
    background-image: none !important;
    border: medium solid transparent;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    width: 0;
}
.social-bar .sharer-counter:after {
    border-color: rgba(248, 250, 252, 0) [B]Enlace eliminado[/B] [/URL]  rgba(248, 250, 252, 0) rgba(248, 250, 252, 0);
    border-width: 5px;
    margin-top: -5px;
    top: 50%;
}
.social-bar .sharer-counter:before {
    border-color: rgba(189, 189, 189, 0) [B]Enlace eliminado[/B] [/URL]  rgba(189, 189, 189, 0) rgba(189, 189, 189, 0);
    border-width: 6px;
    margin-top: -6px;
    top: 50%;
}
</style>

Muestra de los botones:
Enlace eliminado

espero puedan ayudarme, saludos
Hacer clic para expandir...
 
Souhiro

Souhiro

Épsilon
SEO
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
12 Nov 2013
Mensajes
982
Ese en un plugin yo he visto similares no se puede implementar en blogger, y menos con un contador
 
Hay que estar conectado o registrado para responder aquí.
Arriba