Menu social com efeito jquery

Encontrei esse código no blog da Gema e achei melhor fazer dele um menu social, mas ele pode ser adaptado para fotos também, fica excelente.

 DEMO

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI

Primeiro, no HTML de seu blog procure por:

]]></b:skin>

Agora o substitua por todo o código abaixo.

/* Menu social-----------------------------------------------*/
#menu-pro1{margin: -10px 0 0 0;
}
div.sc_menu_wrapper {
position: relative;
height: 250px; /* modifique o número para diminuir a altura */
width: 120px; /* modifique o número para modificar a largura */
margin-top: 10px;
overflow: auto;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 114px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;

/* color y fondo efecto hover */
color: #fff;

}
.sc_menu a:hover {
background: #fff;
}
.sc_menu img {
display: block;
border: none;
}
.sc_menu_wrapper .loading { /* estilos de carga */
position: absolute;
top: 20px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
border: 1px solid #63B0B4;
background: #022A4A;
}
.sc_menu_tooltip { /* estilos tooltip */
display: block;
position: absolute;
padding: 6px;
font-size: 12px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid rgb(79, 79, 79);
background: #08044E;
}

]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>
<script type='text/javascript'>/*<![CDATA[*/

function makeScrollable(wrapper, scrollable){
    // Get jQuery elements
    var wrapper = $(wrapper), scrollable = $(scrollable);
  
    // Hide images until they are not loaded
    scrollable.hide();
    var loading = $('<div class="loading">Carregando...</div>').appendTo(wrapper);
   
    // Set function that will check if all images are loaded
    var interval = setInterval(function(){
        var images = scrollable.find('img');
        var completed = 0;
       
        // Counts number of images that are succesfully loaded
        images.each(function(){
            if (this.complete) completed++;   
        });
       
        if (completed == images.length){
            clearInterval(interval);
            // Timeout added to fix problem with Chrome
            setTimeout(function(){
               
                loading.hide();
                // Remove scrollbars   
                wrapper.css({overflow: 'hidden'});                       
               
                scrollable.slideDown('slow', function(){
                    enable();   
                });                   
            }, 1000);   
        }
    }, 100);
   
    function enable(){
        // height of area at the top at bottom, that don't respond to mousemove
        var inactiveMargin = 99;                   
        // Cache for performance
        var wrapperWidth = wrapper.width();
        var wrapperHeight = wrapper.height();
        // Using outer height to include padding too
        var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
        // Do not cache wrapperOffset, because it can change when user resizes window
        // We could use onresize event, but it's just not worth doing that
        // var wrapperOffset = wrapper.offset();
       
        // Create a invisible tooltip
        var tooltip = $('<div class="sc_menu_tooltip"></div>')
            .css('opacity', 0)
            .appendTo(wrapper);
   
        // Save menu titles
        scrollable.find('a').each(function(){               
            $(this).data('tooltipText', this.title);               
        });
       
        // Remove default tooltip
        scrollable.find('a').removeAttr('title');       
        // Remove default tooltip in IE
        scrollable.find('img').removeAttr('alt');   
       
        var lastTarget;
        //When user move mouse over menu           
        wrapper.mousemove(function(e){
            // Save target
            lastTarget = e.target;

            var wrapperOffset = wrapper.offset();
       
            var tooltipLeft = e.pageX - wrapperOffset.left;
            // Do not let tooltip to move out of menu.
            // Because overflow is set to hidden, we will not be able too see it
            tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
           
            var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
            // Move tooltip under the mouse when we are in the higher part of the menu
            if (e.pageY - wrapperOffset.top < wrapperHeight/2){
                tooltipTop += 80;
            }               
            tooltip.css({top: tooltipTop, left: tooltipLeft});               
           
            // Scroll menu
            var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
            if (top < 0){
                top = 0;
            }           
            wrapper.scrollTop(top);
        });
       
        // Setting interval helps solving perfomance problems in IE
        var interval = setInterval(function(){
            if (!lastTarget) return;   
                                       
            var currentText = tooltip.text();
           
            if (lastTarget.nodeName == 'IMG'){                   
                // We've attached data to a link, not image
                var newText = $(lastTarget).parent().data('tooltipText');

                // Show tooltip with the new text
                if (currentText != newText) {
                    tooltip
                        .stop(true)
                        .css('opacity', 0)   
                        .text(newText)
                        .animate({opacity: 1}, 1000);
                }                   
            }
        }, 200);
       
        // Hide tooltip when leaving menu
        wrapper.mouseleave(function(){
            lastTarget = false;
            tooltip.stop(true).css('opacity', 0).text('');
        });           
       
        /*
        //Usage of hover event resulted in performance problems
        scrollable.find('a').hover(function(){
            tooltip
                .stop()
                .css('opacity', 0)
                .text($(this).data('tooltipText'))
                .animate({opacity: 1}, 1000);
   
        }, function(){
            tooltip
                .stop()
                .animate({opacity: 0}, 300);
        });
        */           
    }
}
   
$(function(){   
    makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
/*]]>*/</script>

 

Agora procure por:

<div id='main-wrapper'>

E cole antes dele este código abaixo, trocando no local indicado pelo endereço de suas páginas sociais.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='sc_menu_wrapper'>
<div class='sc_menu'>
<a href='https://www.google.com/accounts/Login?service=blogger' title='Login'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf2ajclVlOoSPu3QS5gZezS3iVrhWYxpc9Taic8BDMdjmSKhuEZ2wxC79ZXvqR9oMZsGReNPajvgl_SYhdHDPe9GU4AB7r41HPaDzFtyyoCu46RONnEKSnoAQTDRsgzoPp442hvmZRsG0/s1600/blogger-webtreats.pn' width='115px'/></a>

<a href='ENDEREÇO DO FACEBOOK' title='Encontre-me no Facebook'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7moxanX8yFd6wIhDfXxpQjfySIsQCqGL8EkyvwhiWihl_L1TgXX25X8DLgNYel8ZqgQzkUZha7l-Vf34AeGR_rg9KnOYNo8G5e5KJ9r-QvGg1jJz11zml245bHUQofl9wkuFEDt4EnCo/s1600/facebook-logo-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO TWITTER' title='Siga-me'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAy-Aw3bdlI2YRxe-H4o6TyNjIdj3HOcv_wOZuUlWNGgA7A3RUVZ4ejO_rLwaW1RKMWF0oljaXV7GSFlMUaiaKJe2Cnx-qlwZkSjQ45XyjEn0uzLGmRx9sdlUmxAxqMSlsGGCnGH5GnTE/s1600/twitter-bird3-webtreats.png' width='135px'/></a>

<a href='ENDEREÇO DO YOUTUBE' title='Assista ao meu canal'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim8Gdm78pAYx0iakkcdtBzQi9ocwXYj_dl3TYA-rZIA9xI1fJbLhOXsrO0gn9GgVIMMGhitNaQ1DwZYRdmSXMDVeDll7KFrCSz3f2Fv5MP68gbGAbDrmA0_G_uxhYEZc71YY_QICm2jxE/s1600/you-tube1-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO FLICKER' title='Minhas imagens'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRCNAWAsuxRMeGHdS11hONSy_XWc_l5snpDJd-w19I_jvmUebpK2VaVgzzu777Q9s2Bw_qeR3ojEZj7USYMk8XsSsp0AoNJf1exw17QsZu4CCJa0-ZUZPBOsP2L8C8jn6KplVaG1tkVfs/s1600/flickr-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO DIGG' title='Digg'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeTtJfaS2_HbY96uaqg-5VBU8jk7DvtYESAw3jJOKbHbUAKyhj8CHETHk7GYv5INy9V_TmjYHBOMYAoO6SlLVgM4zGaj4amgIE4w6npXru9ecgdTtNDXGVIDRP4CFKkBGZdhW8DLMimAg/s1600/digg-logo-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO ORKUT' title='Encontre-me no Orkut'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1fmIvJa0lF_gzeHISDMs0HJl_I9az9Ky38WqTQhEzJqKxzBm02ZHJVC7aVC75w4yAF1zqBwaO3_ptA7HYgF1liiTBi8gse8fRSIGnQibr9FHXrXhJ4nOC_YjHB-vkjRCGFk8ASTMSt_Q/s1600/orkut-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO FEED' title='Assine'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzxfSGfeusvnKGNHDgLqErS2a83dSWBGAMDQ4WbqrE7E1posP61hL3I0GejLiyNMK0bKcKTMXnM8s_oToWFPYg8kcaw4PvDn3vedywUT0mWJEf3ONrMqsx0IOCaOr4Amvu5SupjHlCC8g/s1600/rss-basic-webtreats.png' width='115px'/></a>


</div></div>
</b:if>
</b:if>