Botão de subir e descer no blog. Vamos aprender? | Quero Dicas | Tutoriais para seu blogs


Botão de subir e descer no blog. Vamos aprender?


Se você tem um blog com artigos, página longa ou postagens com vasta informações. Saiba: Por mais quê muitas vezes possam ser importantes, nem todos gostam de lê-las até o final. Para esses visitantes, dê a opção de navegação rápida e dinâmica. Assim, eles não são obrigados a ver e ler aquilo que não querem.
No tutorial anterior, eu ensinei a colocar botões de subir ao topo no blog. Hoje, vamos aprender como colocar o botão de subir e descer no blog, deixando sua página muito mais dinâmica.

Neste tutorial, você terá a possibilidade de personalizar com as imagens de setas do jeito que preferir, deixando mais parecido com o designer do seu blog.

Vamos lá?

   Passo 1

1 - Faça um backup do seu template, caso não goste ou dê algum erro.
Não sabe fazer backup? Não tem problema, aprenda aqui.

2 - Acesse o html do seu blog e, procure por:

 </body>

3 - Acima dele, cole o código abaixo:

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script> 

 

   Passo 2


1 - Ainda no html do blog, procure agora por:

 ]]></b:skin>
 

2 - Acima dele, cole o código abaixo:

 

/* Botões Up and Down jQuery
----------------------------------------------- */
.button_up{
padding: 7px; / * DISTÂNCIA ENTRE A MARGEM E ICONE * /
background-color: transparent; 
position: fixed;
background: transparent url (URL DA IMAGEM) no-repeat top left; /* MUDE DE TRANPARENT, PARA A COR QUE DESEJAR */
background-position: 50% 50%;
width:22px;/* MARGEM LATERAL */
height:30px; /* MARGEM DISTÂNCIA */
bottom:100px; /* ALTURA DOS BOTÕES */
right: 5px; /* Mude da direita (right) para a esquerda (Left), se você quiser */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px; /* BORDAS ARREDONDADAS */
opacity:0.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding: 7px;/ * DISTÂNCIA ENTRE A MARGEM E ICONE * /
background-color: transparent;
position:fixed;
background: transparent url (URL DA IMAGEM) no-repeat top left; /* MUDE DE TRANPARENT, PARA A COR QUE DESEJAR */
background-position: 50% 50%;
width:22px; /* MARGEM LATERAL */
height:30px; /* MARGEM DISTÂNCIA */
bottom: 55px; /* ALTURA DOS BOTÕES */
right:5px; /* Mude da direita (right) para a esquerda (Left), se você quiser */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px; /* BORDAS ARREDONDADAS */
opacity:0.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
 
 

    Personalizando


Agora vamos personalizar suas setinhas.

1 - Crie uma imagem, hospede-a na Web. (Não sabe hospedar imagem? Aprenda aqui)
2 - Onde está escrito "URL DA IMAGEM", será onde você colocará a URL da sua imagem hospedada

3 - Caso, você não queira imagem e sim cor, eu deixei o fundo da imagem transparente é só trocar o nome tranparent pela cor desejada.
Exemplo: 
Está assim - background: transparent url (URL DA IMAGEM) no-repeat top left;
Ficará assim - background: #000000 url (URL DA IMAGEM) no-repeat top left;

Tabela de cores - Ufpa

4 - Dependendo da largura do seu template ou, do seu gosto.Vá mudando até ficar ao seu gosto, mais mude somente o que eu deixei escrito ao lado de cada chave. Caso contrário, você poderá ter erros.
Obs: Caso queira, que eles fiquem mais para cima, é só mudar aumentar os números ou, se preferir abaixá-los é só diminuir. Veja os números da mudança.
bottom: 100px;
bottom: 55px;
Espero que tenha ajudado. Muito obrigada por sua visita.
Deixe seu comentário, ele é muito importante para mim. Beijinhos
____________________________________________________________
Abaixo algumas imagens que você poderá usar. 
Elas são do tamanho padrão para ser colocado no código. 

     

     

   

Me Contrate!


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.