Mil Trucos Blogger

Espectaculares y originales marcadores sociales

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Ya he compartido muchos pack de marcadores sociales pero ninguno de los que he publicado hasta ahora es tan espectacular como este, este conjunto de marcadores sociales incorpora los botones de las principales redes sociales: Google+, Facebook y Twitter con un espectacular efecto hover.

Vista previa del truco.


Para agregar este truco a tu blog ve a Plantilla, Editar HTML y busca la siguiente linea:

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

Debajo de la anterior linea pega lo siguiente:

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

Ahora solo falta que guardes los cambios y hemos finalizado el truco de hoy.

Como ves es un truco muy fácil de agregar a Blogger y es muy atractivo.

Vía: Amorsevillista

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

28 Comentarios

  1. enero 18, 2014    

    muy buenos la verdad. Se pueden poner como gadget en una columna de gadgets? :S

    • enero 23, 2014    

      Alberto este truco esta pensado mas para ser marcador social que un gadget.

      Saludos

  2. enero 19, 2014    

    Este comentario ha sido eliminado por el autor.

  3. enero 20, 2014    

    Muy bueno! Cada vez soy más fan de tu web! Aplico muchos de tus consejos

    Sigue así!

  4. enero 25, 2014    

    Hola, yo no tengo la primera linea que hay que buscarvpodrías ayudarme? ;-(

    • enero 26, 2014    

      Bryan puedes buscar otra linea similar, por ejemplo la de line-1 o line-2

      Saludos :>)

  5. enero 27, 2014    

    Lo intente y no me ha salido, tengo line 1 y line 2, he probado las dos pero no aparece, aver si me puedes dar una mano. Gracias por compartir tus conocimiento. Saludos desde ECuador

    • enero 27, 2014    

      Fernando suele haber hasta 2 códigos line-1 por lo general el que sirve es el segundo.

      Saludos

  6. enero 30, 2014    

    ¿Cómo puedo añadir el texto “comparte este artículo”?

    • febrero 4, 2014    

      En la parte superior agrega lo siguiente:

      <div style=’text-align: center;’>
      <span style=’color: #3d85c6; font-family: Century Gothic, serif; font-size: x-large;’><b>Comparte este artículo ↓ </b></span></div>

  7. febrero 8, 2014    

    🙂 Buena yerkolobo-hack-corporation.blogspot.com

  8. febrero 9, 2014    

    (o) bn androidgo2.blogspot.com

  9. febrero 17, 2014    

    oye pero NO comparte en facebook solo le das LIKE o me gusta como hago para compartir por favor ?

    • marzo 30, 2014    

      Jesús solo cambia el código del botón me gusta por el de compartir y listo

  10. febrero 17, 2014    

    Yo no he visto la frase: <div class=… (esque no me deja ponerlo completo ) ni line-2 ni 1 no me sale yo no entiendo mucho de esto. me puedes especificar más el sitio donde debo buscar?? ;(

  11. JMS JMS
    marzo 13, 2014    

    a mi no me sale :/………………….. q hise mal y segi todo !!! 🙁 😕

    • marzo 30, 2014    

      Amigo vuelve hacer los pasos desde el principio.

      Saludos

  12. marzo 31, 2014    

    Lo e puesto en la line 1 y 2 porque la tres no me sale(lo e intendado en cada una) y aun asi no funciona ;((

    • abril 9, 2014    

      wow pensé que era yo el único que le pasaba esto, no solo en esta ocasión, si no que en varias ocasiones e buscado lineas dentro del código y no las encuentro [-(

    • abril 12, 2014    

      Pon en el buscador de códigos : line-3 y seguro que lo encuentras.

      Saludos

    • junio 5, 2014    

      Me pasa exactamente lo mismo lo eh colocado despues de lina 1 y 2 por que 3 no tengo y nada de hecho ahy varios coodigos para compartir que me pasa lo mismo a que se devera??

    • junio 8, 2014    

      Intenta con el segundo line-1

      Saludos

  13. septiembre 13, 2014    

    Lo he puesto y todo perfecto pero,

    he intentado cambiar el script de me gusta por el de compartir, como respondiste en un comentario en que te preguntaban sobre como hacer que en vez de me gusta se compartiera el post pero no se bien como hacerlo y tampoco sé cual es el script correcto, no me sale, podrías dejarme el código con el script ya cambiado?, por favor lo agradeceria mucho.

  14. diciembre 11, 2014    

    Me gusta mucho como queda en la entrada. El único inconveniente que al insertar salto de línea en las entradas no se ve en un primer plano y hasta que no le das para ver la entrada completa no salen estos iconos. ¿Como se soluciona esto? Gracias.

    • diciembre 13, 2014    

      Óscar al segundo código quitale esto:

      <b:if cond=’data:blog.pageType == “item”‘>

      (Está al principio)

      Y ahora quitale esto (está al final):

      </b:if>

      Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo