Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Botones de Redes Sociales con Efecto Expandible




Hace días que descubrí navegando por la red unos botones sociales que me llamaron mucho la atención, son extraordinariamente muy llamativos y atractivos, y pueden aplicarse en cualquier web o blog, y lo más de lo más, es que no usan ningún script, ni javascript, ni jQuery, están simplemente realizados con CSS3, por lo tanto, se pueden modificar sencillamente, traen un efecto hover consigo, expandible, y al pasar el cursor por encima del botón, hará que se depliegue hacía la derecha con el título de la red social al que queremos que sé nos hagan fan o nos sigan. Las redes sociales que forman este gadget, son: Facebook, Twitter, Suscripción por correo Rss, Google+, Pinterest. Vaya, las redes sociales más importantes e imprescindibles para cualquier blog o web. A continuación podrás ver una vista previa de lo que hablamos y de lo que te estoy intentando explicar:



Demo!


  1. La instalación de este gadget es muy sencillo: Ves a Blogger→ Diseño → Añadir un Gadget → Html/Javascript → Y pega allí el siguiente código que verás abajo a continuación o seguidamente:


  2. <style>
    #tbsose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
    #tbsose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
    #tbsose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
    #tbsose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
    #tbsose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
    #tbsose .icon{overflow:hidden; color:#fafafa;}
    #tbsose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
    #tbsose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
    #tbsose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
    #tbsose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
    #tbsose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
    #tbsose li:hover .icon,
    .touch #tbsose li .icon{width:210px;}
    .touch #tbsose li .facebook, #tbsose li:hover .facebook{background-color:rgba(59,89,152,1);}
    .touch #tbsose li .twitter, #tbsose li:hover .twitter{background-color:rgba(64,153,255,1);}
    .touch #tbsose li .googleplus, #tbsose li:hover .googleplus{background-color:rgba(228,69,36,1);}
    .touch #tbsose li .pinterest, #tbsose li:hover .pinterest{background-color:rgba(174,45,39,1);}
    .touch #tbsose li .rss, #tbsose li:hover .rss{background-color:rgba(255,102,0,1);}
    </style>
    
    <ul id="tbsose">
    <li data-alt="Síguenos en Facebook"><a class="icon facebook" href="http://www.facebook.com/USUARIO-FACEBOOK" target='_blank'>Síguenos en Facebook</a></li>
    <li data-alt="Síguenos en Twitter"><a class="icon twitter" href="http://www.twitter.com/USUARIO-TWITTER">Síguenos en Twitter</a></li>
    <li data-alt="Síguenos en Google+"><a class="icon googleplus" href="https://plus.google.com/ID-GOOGLE+" target='_blank'>Síguenos en Google+</a></li>
    <li data-alt="Síguenos en Pinterest"><a class="icon pinterest" href="http://pinterest.com/USUARIO-PINTEREST" target='_blank'>Síguenos en Pinterest</a></li>
    <li data-alt="Suscribete vía Email"><a class="icon rss" href="http://feedburner.google.com/fb/a/mailverify?uri=USUARIO-FEED" target='_blank'>Suscribete vía Email</a></li>
    </ul>


  3. Ahora por último añade las URL de tus redes sociales que hay al final del código resaltado en mayúsculas, debes de ingresar en cada una de tus cuentas y añadir el usuario de cada una de ellas, al final de cada url en la barra de direcciones.
  4. Nota: Para saber el usuario del feed, ingresa en Feedburner. Elige tu feed y le das clic en Edit Feed Details… (Está debajo del titulo de tu feed). Ahora en "Feed Address" dentro de un recuadro está el usuario de tu Feedburner, y ya lo tendrás.



Aizum Blog, domingo, junio 16, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9