Mouseover sobre botón con efecto fade y jQuery en Socia

Bueno pues primero como quedaria:


bueno empesemos:
en su index.template.php buscan:

Code: [Select]

// Here comes the JavaScript bits!
echo 'y debajo agregan:

Code: [Select]

<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:

Code: [Select]

template_menu();
echo '
<br class="clear" />
</div></div>y de bajo pondre esto:

Code: [Select]

<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:

Code: [Select]

#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:


Fuente: martiniglesias en SMF por mi.

Saludos,azecktR12.

Excelente aporte!

buen aporte gracias por compartir +1

Muy buenos! me encantan a parte esos iconos que "rompen" la pantalla

+1

a mi en mi no me aparece estas lineas en mi index.template

Code: [Select]

template_menu();
echo '
<br class="clear" />
</div></div>
Me das una mano que me encanto esto!