Revista Blog

Gadget social lateral profesional para que te sigan

Por Aizum Blog @aizumblog
Gadget social profesional lateral para que te sigan

En está pesquisa navegando por la red, me he topado con una widget social excepcional, que sé que os va a gustar, tanto cómo a mi, seguro que os gusta, no me cabe duda. Trata de un gadget social flotante, que se posiciona en la parte izquierda de tu blog en la plataforma Blogger, o también en la parte derecha, cómo lo prefieras, sólo debes de cambiar todos los "LEFT" del código CSS, por "RIGHT". Éste fantástico widget, lo he visualizado en el Blog: Digital Blog Inc, y me a parecido interesante compartirlo con todos ustedes. Se desliza mediante vayas bajando el scroll o barra de deslizamiento y sirve para que te sigan en tus redes sociales, básicamente, la barra social lateral, lleva consigo, las redes siguientes que verás escritas a continuación: Twitter, Google+, Facebook, y Feedburner. Ahora la demo:


Gadget Social Lateral!
Para añadir ésta barra social en Blogger, sigues estos pasos!
  1. Ir a Blogger
  2. Después a Diseño.
  3. Añadir un Gadget.
  4. Y ahora ir a HTML & Javascript.
  5. Y por último copiar y pegar el siguente código.
  6. Haz las modificaciones pertinentes, cambia las "#" por las URL de tus redes sociales.

<div id='social-sidebar'>
 <ul>
<li>
 <a class='entypo-twitter' href='#' target='_blank'>
 <span>Twitter</span>
 </a>
 </li>
<li>
 <a class='entypo-gplus' href='#' target='_blank'>
 <span>google+</span>
 </a>
 </li>
<li>
 <a class='entypo-facebook' href='#' target='_blank'>
 <span>facebook</span>
 </a>
 </li>
<li>
 <a class='entypo-rss' href='#' target='_blank'>
 <span>feedburner</span>
 </a>
 </li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://www.digitalhubinc.com/---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
right: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
right: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
right: -100%;
margin-top: -16px;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
 -webkit-transition: opacity .3s, right .4s;
 -moz-transition: opacity .3s, right .4s;
 -ms-transition: opacity .3s, right .4s;
 -o-transition: opacity .3s, right .4s;
transition: opacity .3s, right .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
right: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>

Digital Hub Inc!
Get free premium widgets for your blog and website.

Volver a la Portada de Logo Paperblog