En este super tutorial te voy a explicar el truco de añadir el widget Medios social con estilo extraible al poner el cursor sobre el mismo. Usando este widget puedes dar acceso a tu profile de medios sociales de Facebook, Twitter and Rss Google plus y YouTube.
Solo chequea la demostracion de abajo
Ejemplo:Da click en la imagen.
1. Entra en tu cuenta de blogger account
4. Pegue el codigo de abajo.
<style>
.StarsBloggingSocialButtonsBorder {
margin:0 auto;
padding:5px;
width:auto;
background:white;
border-radius:5px;
border: 1px #BBBBBB solid;
}
#ciudadblogger-SexySocialButtons{
list-style:none;
text-decoration:none;
font-size:0.9em;
font-family:trebuchet ms,sans-serif;
}
#ciudadblogger-SexySocialButtons a{
text-decoration:none;
font-family:trebuchet ms,sans-serif;
}
#ciudadblogger-SexySocialButtons li{
position:relative;
height:38px;
cursor:pointer;
padding: 0 !important;
}
#ciudadblogger-SexySocialButtons .facebook, .googleplus, .YouTube, .rss, .twitter{
position:relative;
z-index:5;
display:block;
float:none;
margin:5px 0 0;
width:210px;
height:38px;
border-radius:5px; background:url(http://1.bp.blogspot.com/-JKq0eFFwx34/UGx39fhHO_I/AAAAAAAABE4/56i9phAS2do/s1600/NBT+Sprites+Social+Icons.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;
}
#ciudadblogger-SexySocialButtons li:after{
position:absolute;
top:0;
left:50px;
z-index:2;
display:block;
height:38px; color:#ffffff;
content:attr(data-alt);
line-height:32px;
}
#ciudadblogger-SexySocialButtons .icon{
overflow:hidden;
color:#fafafa;
}
#ciudadblogger-SexySocialButtons .facebook{
width:32px;
height:32px;
background-color:rgba(59,89,152,0.42);
background-position:0 0;
}
#ciudadblogger-SexySocialButtons .twitter{
width:32px;
height:32px;
background-color:rgba(64,153,255,0.42);
background-position:0 -33px;
}
#ciudadblogger-SexySocialButtons .googleplus{
width:32px;
height:32px;
background-color:rgba(228,69,36,0.42);
background-position:-3px -66px;
}
#ciudadblogger-SexySocialButtons .YouTube{
width:32px;
height:32px;
background-color:rgba(174,45,39,0.42);
background-position:-2px -95px;
}
#ciudadblogger-SexySocialButtons .rss{
width:32px;
height:32px;
background-color:rgba(255,102,0,0.42);
background-position:-3px -126px;
}
#ciudadblogger-SexySocialButtons li:hover .icon,
.touch #ciudadblogger-SexySocialButtons li .icon{
width:210px;
}
.touch #ciudadblogger-SexySocialButtons li .facebook, #ciudadblogger-SexySocialButtons li:hover .facebook{
background-color:rgba(59,89,152,1);
}
.touch #ciudadblogger-SexySocialButtons li .twitter, #ciudadblogger-SexySocialButtons li:hover .twitter{
background-color:rgba(64,153,255,1);
}
.touch #ciudadblogger-SexySocialButtons li .googleplus, #ciudadblogger-SexySocialButtons li:hover .googleplus{
background-color:rgba(228,69,36,1);
}
.touch #ciudadblogger-SexySocialButtons li .YouTube, #ciudadblogger-SexySocialButtons li:hover .YouTube{
background-color:rgba(174,45,39,1);
}
.touch #ciudadblogger-SexySocialButtons li .rss, #ciudadblogger-SexySocialButtons li:hover .rss{
background-color:rgba(255,102,0,1);
}
</style>
<div class="ciudadbloggerSocialButtonsBorder" background:white;>
<ul id="ciudadblogger-SexySocialButtons">
<li data-alt="Siguenos en Facebook"><a class="icon facebook" href="https://www.facebook.com/ciudadblogger">Siguenos en Facebook</a></li>
<li data-alt="Siguenos en Twitter"><a class="icon twitter" href="https://twitter.com/ciudadblogger">Siguenos en Twitter</a></li>
<li data-alt="Siguenos en Google+"><a class="icon googleplus" href="https://plus.google.com/107955298793879607966">Siguenos en Google+</a></li>
<li data-alt="Subscribenos en YouTube"><a class="icon YouTube" href="https://youtube.com/Nombre de Usuario">Subscribenos en YouTube</a></li>
<li data-alt="Subscribete con RSS"><a class="icon rss" href="http://feeds.feedburner.com/ciudadblogger">Subscribete con RSS</a></li></ul></div>
Puedes cambiar los contadores manualmente, solo cambia el color rojo de acuerdo al profile.
Remplace ciudadblogger con tu nombre de usuario de Facebook
Reemplace ciudadblogger con tu nombre de usuario de Twitter
Replace 107955298793879607966 con tu ID de Google plus
Reemplace Nombre de Usuario con tu nombre de usuario de Youtube
Reemplace ciudadblogger con tu ID de Feedburner
5. Ahora guarda la HTML/Javascript'.
Listo.
0 comentarios:
Publicar un comentario