Botão Subir/Descer com efeito deslizante (e mais brindes para seu blog!)

Não é de hoje que me pedem pra ensinar esse botão Subir/Descer que uso no blog há tempos.
Não é simples, mas com um pouco de atenção e paciência todo mundo vai conseguir fazer.
Vamos lá?

Para começar você precisa editar as imagens de Subir e Descer.
Sim, trata-se de uma imagem, não de texto.
As medidas das minhas são 50px de largura por 22px de altura. Mas isso pode variar dependendo de suas imagens.
O importante é alterar no código essas medidas caso sejam diferentes do meu exemplo.
Também pode retirar a borda caso use a imagem do círculo rosa que disponibilizo abaixo, por exemplo.
Pode mudar a cor da borda, pode tirar, pode trocar a cor de background que está em transparent  pelo código da cor que desejar, sempre precedido do sinal #.
Use a imaginação, faça testes, divirta-se!


Com suas imagens prontas hospede-as para conseguir o endereço http delas.
Clique aqui e aprenda como hospedar imagens usando o próprio Blogger

Colocando os botões Subir e Descer no blog

Agora chegou a parte legal, vamos colocar no blog.
Sugiro que faça antes em um blog de testes, para "pegar o jeito", tá?

Clique na aba Modelo de seu blog.
Depois clique em Editar HTML e dentro da caixa de código tecle Ctrl+F.
Na barra de busca que abrir digite ]]></b:skin> e tecle Enter para localizar.
ACIMA dessa tag de fechamento cole este 1º código:

Copiar o 1º código
Preste atenção!
Deixei marcado no código as partes que podem ser editadas, sendo que a essencial é colocar o endereço das imagens nos lugares determinados.

Agora, dentro da barra de busca digite </body> e novamente tecle Enter pra localizar.
Acima da tag encontrada cole este 2º código:

Copiar o 2º código
Neste segundo código você não deve mexer em nada, tá? É o script que faz o recurso funcionar.
Salve as alterações e voilà! Está prontinho.

Brindes para você

Quer presente?
Sim, tem!
Fiz alguns modelos de imagens Subir/Descer para você. Estão com fundo transparente.
Salve em seu pc e use à vontade, tá?
Só não pode postar as imagens em seu blog dizendo ou dando a entender que foram feitas por você.

Caso prefira usar ícones diferentes veja esses, gratuitos, do site Flaticon.
Se gostou do tutorial recomende-o no Google+, no Facebook ou em outra rede social que preferir.
Isso ajuda o blog a crescer e ser cada vez mais útil e bom para você, querido leitor!