27 enero 2014

Otros originales botones para compartir en Redes

botones para compartir redes sociales
En esta ocasión, os traigo otra forma de compartir vuestras entradas en las Redes Sociales con un original estilo y un aspecto bastante atractivo. Incorpora los iconos de las tres grandes redes de estos momentos: Facebook, Twitter y Google+, siendo su instalación en blogger de lo más sencillo.






Ver otras formas de agregar los botones sociales:

Como colocar los botones para compartir
1.- Blogger - Plantilla - Editar Html
2.- Presione CTRL + F y busque el siguiente código: post-footer-line-1 o , post-footer-line-2 seguramente encontrará dos de cada uno, coloque lo siguiente bajo el segundo del elegido (1-2):

<b:if cond='data:blog.pageType == &quot;item&quot;'><style>@import url(http://fonts.googleapis.com/css?family=Open+Sans);@import &quot;//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css&quot;;#cajared{width:430px;overflow: hidden;margin: 10px auto 0;}
.botones{float:left;margin-right: 10px;width: 120px;background: #eaeaea;border: 1px solid #cbcbcb;border-radius: 3px; -o-border-radius: 3px;-ms-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow:inset 0 1px 0px #fdfdfd;padding:15px 5px 5px;box-sizing:border-box;}
.botones i{background: #c5c5c5;color: #eaeaea;text-align:center;line-height:40px;font-size: 18px;width:40px;height:40px; display:block;margin: 0 auto 10px;border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;-moz-border-radius: 50%; -webkit-border-radius: 50%;}
.social-container{text-align:center;text-transform:uppercase;font-size: 12px;color: #656565;line-height: 54px;font-family: Open Sans;background: #d8d8d8;width: 100%;height: 45px;box-shadow:inset 0 -2px 4px #c7c7c7;border-radius: 3px;-o-border-radius: 3px;-ms-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;position:relative;overflow: hidden;}
.slide,.botones i{-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;}
.slide {box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);border-radius: 0 0 22px 22px;-o-border-radius: 0 0 22px 22px; -ms-border-radius: 0 0 22px 22px;-moz-border-radius: 0 0 22px 22px;-webkit-border-radius: 0 0 22px 22px;transition: all 0.2s ease-in-out;position: absolute;height: 45px;width: 100%;top: -35px;}
.slide::after {content: &quot;&quot;;display: block;position: absolute;width:100%;height: 10px;box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd;border-radius: 3px;-o-border-radius: 3px;-ms-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;background: #eaeaea;border:1px solid #cbcbcb;box-sizing: border-box;bottom: 0;}
.botones:hover .slide {top: 0;border-radius: 3px;}
.IN-widget,.botones iframe, .google #___plusone_0 {top:-2px;position: relative;}
.twitter iframe {width: 79px !important;}
.google #___plusone_0 {width: 60px !important;}
.botones.facebook:hover i, .facebook .slide {background:#305c99;color: white;}
.botones.twitter:hover i, .twitter .slide{background: #00cdff;color: white;}
.botones.google:hover i, .google .slide{background: #d24228;color: white;}
</style><div id='cajared'><div class='facebook botones'> <i class='icon-facebook'/> <div class='social-container fb'> <div class='slide'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px'/> </div> Facebook </div></div><div class='twitter botones'> <i class='icon-twitter'/> <div class='social-container tw'> <div class='slide'><a class='twitter-share-button' href='https://twitter.com/share'> Tweet </a> <script> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;; if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script></div>Twitter </div></div><div class='google botones'> <i class='icon-google-plus'/> <div class='social-container tw'> <div class='slide'><div class='g-plusone' data-size='medium'/><script type='text/javascript'>(function(){var po=document.createElement(&#39;script&#39;);po.type = &#39;text/javascript&#39;;po.async = true;po.src=&#39;https://apis.google.com/js/plusone.js&#39;; var s =
document.getElementsByTagName(&#39;script&#39;)[0];s.parentNode.insertBefore(po, s);})();</script></div>Google+</div></div></div><div style='text-align: right;'/></b:if>

Guardar plantilla!


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

18 comentarios

Muy bueno Antonio sin duda eso atraerá la atención del lector :D. Compartido en las Twitter y Google+.

¡Hola Antonio! Como siempre un tutorial genial. Lo apliqué en mi blog y se ve genial, el problema es que se me queda el "Publicado por..." debajo del widget. ¿Cómo puedo hacer para que quede arriba el "Publicado por..." y abajo el widget de compartir? Gracias por toda tu ayuda
Laura.

Blueli, corta el código completo y pégalo antes de <div class='post-footer-line post-footer-line-2'> y así aparecerá antes el Publicado por:

No funcionó :( No aparece.

Prueba de nuevo, colocandolo después en lugar de antes de ese código:

Nada, sigue sin funcionar. Hay algún widget que debe de de mezclarse y no funciona. Gracias por la ayuda pero desisto, probaré con otro widget.

Blueli, antes de nada observa el código que hay antes de #Stats1, no está cerrado. Cierralo con esto }
Ahora borra todo el css de #Stats1.................hasta......#totalCount.......}
Y en su lugar coloca esto:
#Stats1 ul{margin:0px 0;border:0;padding:0;}
#Stats1 li{display:inline;width:28%;margin:0;border:0;background:#F5F5F5;float:left;padding:5px 6px;text-decoration:none;text-shadow:none;margin:0 1px 1px 0;font-size:12px;list-style-type:none;text-align:center}
#Stats1 h4{margin:0;font-size:14px;line-height:1.2em;color:#535252;text-shadow:none;text-align:center}
#Stats1 span{font-size:10px;color:#535252;text-shadow:none;}
#totalComments{background-position:0 -68px}
#totalCount{background-position:0 -136px;}

Ahora reduce el lema "Páginas Vistas" por solo Páginas y lo tendrás funcionando sin problemas.

Para los botones si te gustan los que tienes vale, pero si quieres los anteriores, sigue los pasos del tutorial y desinstala los que tienes, pero elimina los dos códigos el del </head> y el del post-footer-line-1 .

Ahora instala el otro después del 2 <div class='post-footer-line post-footer-line-2'/ con esto debe funcionar todo como quieres.

hola, una preguntita un poco tonta, quiero esos botones, me gusta, pero no tengo que poner mi id de face, google o algo? osea, esos me gusta luego aparecen en la entrada que aparece en face también? o son solo adorno? Uf nose, es q me gustan y quiero saber como funcionan. Gracias

Marisiver, solo son botones para compartir contenido, no se coloca ningún nombre porque ellos extraen la url y el título de cada entrada.
Si yo clikease en tu blog a cualquiera de los tres botones, ejemplo Facebook, aparecería en mi perfil de facebook un "me gusta" con el nombre de la entrada de tu blog, o en Twitter un tweet con el título de la entrada.

Saludos.

Amigo aqui dando molestia nuevamente mira en mi plantilla me aprece asi

< div class='post-footer'>
< div class='post-footer-line post-footer-line-1'>

y lo coloque antes y despues y en medio y no me aprece nada espero me puedas ayudar una vez mas gracias

PD: TUVE QUE DARLE ESPACIO EN DIV YA QU ENO ME PERMITIA DEJAR EL COMENTARIO :D

Perdon me eh olvidado de dejar el link de mi blog en el otro comentario espeor no lo tomes como spam solo te dejo el link para que me puedass ayudar si gusta lo eliminas depsues gracias

http://mas-descargas-mexico.blogspot.mx/

Ownez, el código debes colocarlo después de <div class='post-footer'>, pero ojo en portada no sale, solo son visibles en las páginas.

Este comentario ha sido eliminado por el autor.

Una maravilla amigo UNA VEZ MAS GRACIAS!! eres todo un PRO!!

HOLA ANTONIO LO COLOQUE JUSTO DESPUES DE div class='post-footer-line post-footer-line-1' PERO NADA NO ME APARECE :(

Ve Dvdcba, ten en cuenta que en algunas plantillas hay varios post-footer-line-1

Buenos días, Antonio.
De nuevo decide instalar el widget pero no funcionó. Esta vez no se ve a pesar de estar instalado.Creo que es porque instalé algo anteriormente que impide que se vea pero no se que es ni como eliminarlo, ¿podrías ayudarme? Además también me desapareció el post-footer solo me muestra los comentarios y no el "Publicado por..", etiquetas y esas cosas. ¿Es posible restaurarlo?

Como siempre gracias por tu ayuda.

Blueli siempre deberías tener una copia de seguridad guardada en tu pc para posibles fallos en cualquier código que instales.
De todas formas si no la tienes (copia de plantilla) siempre puedes "Restablecer plantillas de artilugios a los valores predeterminados" y en tu caso que no tienes muy modificada la plantilla, sería lo ideal.

Vete a plantilla-editar Html- en la parte de arriba veras "Restablecer plantillas de artilugios a los valores predeterminados"- click en "Blog1" y luego click en Recuperar valores predeterminados de los widgets selecionados.

Con esto debería aparecerte lo que me comentas.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"