Espectaculares y originales marcadores sociales

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

28 thoughts on “Espectaculares y originales marcadores sociales

  • enero 20, 2014 en 4:15 pm
    Permalink

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

    Sigue así!

    Responder
  • enero 27, 2014 en 3:12 am
    Permalink

    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

    Responder
    • febrero 4, 2014 en 9:38 pm
      Permalink

      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>

      Responder
  • febrero 17, 2014 en 7:23 pm
    Permalink

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

    Responder
  • febrero 17, 2014 en 8:07 pm
    Permalink

    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?? ;(

    Responder
  • marzo 13, 2014 en 5:15 pm
    Permalink

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

    Responder
  • marzo 31, 2014 en 11:58 pm
    Permalink

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

    Responder
    • abril 9, 2014 en 12:19 pm
      Permalink

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

      Responder
    • junio 5, 2014 en 11:11 pm
      Permalink

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

      Responder
  • septiembre 13, 2014 en 7:14 pm
    Permalink

    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.

    Responder
  • diciembre 11, 2014 en 10:03 pm
    Permalink

    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.

    Responder
    • diciembre 13, 2014 en 10:41 pm
      Permalink

      Ó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

      Responder

Deja un comentario

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