7 de nov de 2011

Menu social embutido com efeito j.query


Que tal ter em seu blog os links em forma de botão para suas páginas sociais, mas de uma forma bem discreta, sem tomar espaço em seu blog e ainda, com um efeito deslizante ? Esse menu social existe, foi projetado pelo blog Codrops, e trago agora para vocês. Basta seguir o exemplo, ter bastante atenção e em 2 simples passos, instala-lo em seu blog.

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:

/*Menu List----------------------------------------*/
.rp_list {
    position:fixed;
    right:136px;
    bottom:-50px;
    margin:0;
    padding:0;
}
.rp_list a img{
    width:40px;
    border:none;
    -moz-box-shadow:0px 0px 4px #ccc;
    -webkit-box-shadow:0px 0px 4px #ccc;
    box-shadow:0px 0px 4px #ccc;
    margin-left:8px;
    line-height:40px;
}
h3#relatedPosts{
    position:fixed;
    right:0px;
    bottom:23px;
    cursor:pointer;
    font-size:13px;
    background:#000;
    color:#fff;
    padding:3px 10px 5px 10px;
    margin:0;
    font-weight:normal;
    text-transform:uppercase;
    text-shadow:0px 0px 1px #fff;
    opacity:0.8;}
span.reference{font-family:Arial;position:fixed;left:10px;bottom:10px;font-size:14px;}
span.reference a{color:#aaa;text-decoration:none;margin-right:20px;}
span.reference a:hover{color:#ddd;}

]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
            $(function() {
                //the loading image
                var $loader        = $('#st_loading');
                //the ul element
                var $list        = $('#st_nav');
                //the current image being shown
                var $currImage     = $('#st_main').children('img:first');
              
                //let's load the current image
                //and just then display the navigation menu
                $('<img>').load(function(){
                    $loader.hide();
                    $currImage.fadeIn(3000);
                    //slide out the menu
                    setTimeout(function(){
                        $list.animate({'left':'0px'},500);
                    },
                    1000);
                }).attr('src',$currImage.attr('src'));
              
                //calculates the width of the div element
                //where the thumbs are going to be displayed
                buildThumbs();
              
                function buildThumbs(){
                    $list.children('li.album').each(function(){
                        var $elem             = $(this);
                        var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
                        var $thumbs         = $thumbs_wrapper.children(':first');
                        //each thumb has 180px and we add 3 of margin
                        var finalW             = $thumbs.find('img').length * 183;
                        $thumbs.css('width',finalW + 'px');
                        //make this element scrollable
                        makeScrollable($thumbs_wrapper,$thumbs);
                    });
                }
              
                //clicking on the menu items (up and down arrow)
                //makes the thumbs div appear, and hides the current
                //opened menu (if any)
                $list.find('.st_arrow_down').live('click',function(){
                    var $this = $(this);
                    hideThumbs();
                    $this.addClass('st_arrow_up').removeClass('st_arrow_down');
                    var $elem = $this.closest('li');
                    $elem.addClass('current').animate({'height':'170px'},200);
                    var $thumbs_wrapper = $this.parent().next();
                    $thumbs_wrapper.show(200);
                });
                $list.find('.st_arrow_up').live('click',function(){
                    var $this = $(this);
                    $this.addClass('st_arrow_down').removeClass('st_arrow_up');
                    hideThumbs();
                });
              
                //clicking on a thumb, replaces the large image
                $list.find('.st_thumbs img').bind('click',function(){
                    var $this = $(this);
                    $loader.show();
                    $('<img class="st_preview"/>').load(function(){
                        var $this = $(this);
                        var $currImage = $('#st_main').children('img:first');
                        $this.insertBefore($currImage);
                        $loader.hide();
                        $currImage.fadeOut(2000,function(){
                            $(this).remove();
                        });
                    }).attr('src',$this.attr('alt'));
                }).bind('mouseenter',function(){
                    $(this).stop().animate({'opacity':'1'});
                }).bind('mouseleave',function(){
                    $(this).stop().animate({'opacity':'0.7'});
                });
              
                //function to hide the current opened menu
                function hideThumbs(){
                    $list.find('li.current')
                    .animate({'height':'50px'},400,function(){
                        $(this).removeClass('current');
                    })
                    .find('.st_thumbs_wrapper')
                    .hide(200)
                    .andSelf()
                    .find('.st_link span')
                    .addClass('st_arrow_down')
                    .removeClass('st_arrow_up');
                }

                //makes the thumbs div scrollable
                //on mouse move the div scrolls automatically
                function makeScrollable($outer, $inner){
                    var extra             = 800;
                    //Get menu width
                    var divWidth = $outer.width();
                    //Remove scrollbars
                    $outer.css({
                        overflow: 'hidden'
                    });
                    //Find last image in container
                    var lastElem = $inner.find('img:last');
                    $outer.scrollLeft(0);
                    //When user move mouse over menu
                    $outer.unbind('mousemove').bind('mousemove',function(e){
                        var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
                        var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
                        $outer.scrollLeft(left);
                    });
                }
                $('#relatedPosts').toggle(
                    function(){
                        $('#rp_list').animate({'bottom':'10px'},500);
                    },
                    function(){
                        $('#rp_list').animate({'bottom':'-50px'},500);
                    }
                );
                $('#rp_list a').tipsy({gravity: 's'});
            });
        //]]>
</script>




Salve. Procure por:

 <div class='main-cap-bottom cap-bottom'>

Se não encontrar, procure por:

<div id='content-wrapper'>


 E acima do código cole este trecho abaixo, inserindo onde se pede o endereço de suas páginas.

<h3 id='relatedPosts'>Rede social</h3>
<div class='rp_list' id='rp_list'>
<a href='#' target='_blank' title='Blogger'>
<img alt='' src='https://lh4.googleusercontent.com/-PzPYn4AJVFE/TXMWwfNf8XI/AAAAAAAAAEk/l0cfAZxi1wQ/s1600/blogger.png'/></a>

<a href='ENDEREÇO FLICKER' target='_blank' title='Flickr Galeria'>
<img alt='' src='https://lh6.googleusercontent.com/-BAp0PG1aj-k/TXMXC7azhHI/AAAAAAAAAEw/niDawt-cHeU/s1600/flickr.png'/></a>

<a href='ENDEREÇO YOUTUBE' target='_blank' title='Meu canal '>
<img alt='' src='https://lh4.googleusercontent.com/-OZwEYt1C6cc/TXMXQqK67oI/AAAAAAAAAE4/r3Q-PRUND2Y/s1600/youtube.png'/></a>

<a href='ENDEREÇO FACEBOOK' target='_blank' title='Encontre-me no Facebook'>
<img alt='' src='https://lh3.googleusercontent.com/-ZjccS-wE7cs/TXMWxee6j8I/AAAAAAAAAEo/gLevgnoUF5Q/s1600/facebook.png'/></a>

<a href='ENDEREÇO TWITTER' target='_blank' title='Siga-me Twitter'>
<img alt='' src='https://lh4.googleusercontent.com/-kIAJTQLDmok/TXMXGPBwGBI/AAAAAAAAAE0/bGwKwxRgcA0/s1600/twitter.png'/></a>
          
<a href='ENDEREÇO DO FEED' target='_blank' title='Leia-me Feed'><img alt='' src='https://lh5.googleusercontent.com/-9IY_gttQI_o/TXMXB_sGcBI/AAAAAAAAAEs/rZRunztQ-Kk/s1600/rss.png'/></a>

      
</div>

Prontino. Está feito !

3 comentários:

  1. Tem como mudar a cor de fundo da fileira dos gadgets?
    Por favor....

    ResponderExcluir
  2. Acho que eu fiz alguma coisa errada, pois dizia no final que deu erro e tal, o que fazer?

    ResponderExcluir
  3. muito bom esse tutorial, bem explicado e a função é ótima, coloquei no meu blog, obrigada. http://guapamonster.blogspot.com.br/

    ResponderExcluir

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