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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOjW3f_MOjtOQ9VpkqITykN0ajHHRrD7NQaAuGvTmqaqX4DFDQ-0fxZ_3wPt6ztL12KU5TGC5Mk-Oar_dRGS5OZle63vQhjGp4S0sK3MbLNg-ouV6XGTEpy9RgunfqFedemkpvN1iAlbJa/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
5º Guardamos y listo!
0 comentarios: