Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Mouseover sobre botón con efecto fade y jQuery en Sociales SMF
#1
Bueno pues primero como quedaria:
[Imagen: kLa50.png]

bueno empesemos:
en su index.template.php buscan:
Código:
    // Here comes the JavaScript bits!
    echo '
y debajo agregan:
Código:
<script type="text/javascript"> <!--
           $(function() {
            $(".fade").hover(function() {$(this).children("span").fadeOut("250");},function() {$(this).children("span").fadeIn("250");})
        });
//--></script>

despues este codigo se pone donde ustedes quieran que aparescan los sociales yo lo pondre abajo del menu haci que buscare esto:
Código:
    template_menu();
    echo '
        <br class="clear" />
    </div></div>
y de bajo pondre esto:
Código:
<div id="social">
        <a href="#" title="" class="fade facebook" target="_blank"><span>facebook</span></a>
        <a href="#" title="" class="fade googleplus" target="_blank"><span>googleplus</span></a>
        <a href="#" title="" class="fade twitter" target="_blank"><span>twitter</span></a>
        <a href="#" title="" class="fade linkedin" target="_blank"><span>linkedin</span></a>
        <a href="#" title="" class="fade feedburner" target="_blank"><span>feedburner</span></a>
</div>
y en su index.css agrean al final esto:
Código:
#social{float:right;display:inline;margin:20px 0 0 0} /* NO NECESARIO */
#social a,#social a span{width:53px;height:48px;display:block;border:0;margin:0 10px 0 0;text-decoration:none;float:left;text-indent: -1000em;background-image: url(/images/social.png);background-repeat: no-repeat;background-position: 0px 0px;}
#social a.facebook{background-position:0 -48px;}
#social a.facebook span{background-position:0px 0px;}
#social a.googleplus{background-position:-53px -48px;}
#social a.googleplus span{background-position:-53px 0px;}
#social a.twitter{background-position:-106px -48px;}
#social a.twitter span{background-position:-106px 0px;}
#social a.linkedin{background-position:-159px -48px;}
#social a.linkedin span{background-position:-159px 0px;}
#social a.feedburner {background-position:-212px -48px;}
#social a.feedburner span{background-position:-212px 0px;}

y en su images/theme/ suben esta imagen:
[Imagen: social.png]

Fuente: martiniglesias en SMF por mi.

Saludos,azecktR12.
#2
lo probé esta muy bueno gracias
#3
Buen aporte gracias
Cada vez sabemos mas, pero cada vez entendemos menos.
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  botón de prohibición de administración en el post jhoancito123 0 162 14-02-2016, 08:16 PM
Último mensaje: jhoancito123
  Que ventajas Tiene Spirate sobre otros script? Zero 29 3,564 04-07-2013, 11:37 AM
Último mensaje: DannecraftWTF
  [Truco] Boton BBC para "Hide Tag" lukas 0 389 28-05-2013, 09:36 PM
Último mensaje: lukas
  [TIP] Efecto en Avatar azecktR12 11 1,344 06-03-2013, 06:26 AM
Último mensaje: romero
  sobre la versión movil? laweb 10 1,073 10-11-2012, 08:44 AM
Último mensaje: lasr
  [duda] como agregar redes sociales y google traslate en el indice laweb 0 514 25-09-2012, 08:29 AM
Último mensaje: laweb
  Solucionado: [DUDA] sobre back up laweb 15 1,486 11-09-2012, 01:33 PM
Último mensaje: Juliens
  Solucionado: [consulta] agregar botones de redes sociales laweb 11 1,369 10-09-2012, 04:48 PM
Último mensaje: Juliens
  Mouseover sobre botón con efecto fade y jQuery en Sociales SMF DeeRz 0 858 18-09-2011, 08:14 PM
Último mensaje: DeeRz



Usuarios navegando en este tema: 1 invitado(s)