11 de mai de 2012

Menu social na lateral do Blogger com efeito J.query

DEMO

Este é um menu com alguns efeitos interessantes. A começar que, os botões das páginas ficam escondidos, sendo mostrados a medida em que se passa o mouse. Há um tooltip que é mostrado assim que se pausa o mouse sobre os botões.




Vá até o Modelo de seu blog, clique em Editar modelo
  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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011














Agora procure por: ]]></b:skin>  




Substitua então pelo código abaixo:



]]></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>




Salve. Agora clique em Layout


Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias.



<style>

/* Menu social-----------------------------------------------*/
#menu-pro1{margin: -10px 0 0 0;
}
div.sc_menu_wrapper {
position:absolute; top:30px; left:0; z-index:9999; overflow:hidden; width: 80px; position: fixed;
height: 350px; /* modifique o número para diminuir a altura */
width: 200px; /* modifique o número para modificar a largura */
overflow: auto;
}
div.sc_menu {
padding: 3px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 164px;
-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: 40px;
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;
}
</style>



<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='http://3.bp.blogspot.com/_fN8wBWylUn8/TQ0waJqAGiI/AAAAAAAACrs/-t4Sb285MhE/s1600/blogger-webtreats.pn' width='115px'/></a>

<a href='ENDEREÇO DO FACEBOOK' title='Encontre-me no Facebook'><img alt='' height='120px' src='http://1.bp.blogspot.com/_fN8wBWylUn8/TQ0wZHUZXdI/AAAAAAAACro/RLgpKHq7Lkw/s1600/facebook-logo-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO TWITTER' title='Siga-me'><img alt='' height='120px' src='http://2.bp.blogspot.com/_fN8wBWylUn8/TQ0wjRrgPzI/AAAAAAAACr4/WKJQSv-KGpM/s1600/twitter-bird3-webtreats.png' width='135px'/></a>

<a href='ENDEREÇO DO YOUTUBE' title='Assista ao meu canal'><img alt='' height='120px' src='http://4.bp.blogspot.com/_fN8wBWylUn8/TQ0xdduFNLI/AAAAAAAACsA/NefQg7oBrX4/s1600/you-tube1-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO FLICKER' title='Minhas imagens'><img alt='' height='120px' src='http://3.bp.blogspot.com/_fN8wBWylUn8/TQ0x1RQpwTI/AAAAAAAACsE/MlkYtMkidas/s1600/flickr-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO DIGG' title='Digg'><img alt='' height='120px' src='http://2.bp.blogspot.com/_fN8wBWylUn8/TQ0wbcME6pI/AAAAAAAACrw/zysdEaMe3bY/s1600/digg-logo-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO ORKUT' title='Encontre-me no Orkut'><img alt='' height='120px' src='http://2.bp.blogspot.com/_fN8wBWylUn8/TQ0wfjJVFJI/AAAAAAAACr0/DPYmMT0HrTE/s1600/orkut-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO FEED' title='Assine'><img alt='' height='120px' src='http://4.bp.blogspot.com/_fN8wBWylUn8/TQ0xa9nLwRI/AAAAAAAACr8/vrWxQ7bFbuM/s1600/rss-basic-webtreats.png' width='115px'/></a>


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


2 comentários:

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube