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,DeeRz.


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



Usuarios navegando en este tema: 1 invitado(s)