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


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!

Comentários
0 Comentários


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

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 palavras de baixo calão, não serão publicados ou respondidos.

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

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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