Botones de redes Sociales con efecto deslizante para blogger

Botones de redes Sociales con efecto deslizante

  • Botones de redes sociales deslizantes...Ahora espacio en tu web.













1º Vamos a Diseño :


2º Añadimos un Gadget :




3º Seleccionamos y buscamos :




4º  Abrimos y pegamos el siguiente Código :

<style>
#iconptb1 {
position:fixed;
top:100px;
left  :-197px;
float:right;
width:300px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}


#iconptb1:hover {
left:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left :-45px;
width:190px;
height:65px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}
</style>

<div id='iconptb1'>
<img src='http://picasion.com/pic70/2930529666647f669fb55884a46f26b3.gif' style='float:right ;'/>
<div style='background:background:#fff;  position: fixed;  width: 10%; opacity: 0.9; height:60px;  margin-right:38px;padding: 0px 0px 0pt 50px;border-radius: 0px 0px 0px 0px;'><span><span><div class='likeboxwrap'>
<style type='text/css'>
ul#m-soc6{  margin:19px 0 0 10px; padding:0; width:190px; height:55px}
ul#m-soc6 li{list-style:none; margin:4px; padding:0; float:left; border:none}
ul#m-soc6 li a{background:url(http://1.bp.blogspot.com/-vYskmSEl_Tk/T08Sg9aQHAI/AAAAAAAAI-Q/n_v8UN14hVk/s400/sprite6-compartidisimo.png) no-repeat 0 0; margin:0; padding:0; display:block; position:relative; width:32px; height:32px; overflow:visible}
ul#m-soc6 li a.twitter{background-position:0 0}
ul#m-soc6 li a.facebook{background-position:-32px 0}
ul#m-soc6 li a.google{background-position:-64px 0}
ul#m-soc6 li a.rss{background-position:-96px 0}
ul#m-soc6 li a.twitter:hover{background-position: 0 -32px;}
ul#m-soc6 li a.facebook:hover{background-position: -32px -32px;}
ul#m-soc6 li a.google:hover{background-position:-64px -32px;}
ul#m-soc6 li a.rss:hover{background-position:-96px -32px;}
ul#m-soc6 li a span{background:#555; position:absolute; top:-5px; left:-10px; width:auto;opacity:0; padding:3px; text-align:left; color:#fff; filter:alpha(opacity=0); white-space:nowrap;text-decoration:none; border-radius:3px; font-size:12px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}
ul#m-soc6 li a:hover{text-decoration:none}ul#m-soc6 li a:hover span{opacity:.7; filter:alpha(opacity=70); top:-27px}
</style>
<ul id='m-soc6'><li><a class='twitter' href='Url Twitter'><span>Twitter</span></a></li><li><a class='facebook' href='Url Facebook'><span>Facebook</span></a></li><li><a class='google' href='Url Google+'><span>Google+</span></a></li><li><a class='rss' href='Url Rss'><span>Suscribete</span></a></li></ul>
<!-- by: www.paratusblogs.com -->
</div></span></span></div></div>




Donde nos pone Url... en rojo ponemos el url de nuestra red social

 Guardamos y listo!


Compartir con :

0 comentarios: