Bueno pues primero como quedaria:
bueno empesemos:
en su
index.template.php buscan:
// Here comes the JavaScript bits!
echo '
y debajo agregan:
<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:
template_menu();
echo '
<br class="clear" />
</div></div>
y de bajo pondre esto:
<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:
#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.