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:
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:
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!
Mais uma dica boa!!! E com presente! Você é o máximo, amiga!
ResponderExcluirObrigada por dividir.
Beijocas,
Cris
Este comentário foi removido pelo autor.
ResponderExcluirDiego, desculpe, foi erro meu, barrinha demais...
ExcluirJá corrigi.
Seus posts sempre nos ensinam muito, acho que vou criar um blog e usar todas as dicas que ja deu e er como me saio rsrs
ResponderExcluirOs seguidores do Café entre amigos elegeram os melhores blogs de 2014, parabéns o seu está entre os vencedores. Convido com muito carinho para vi conferir o post e receber o selo especialmente criado para os eleitos.
http://www.cafeentreamigos.com/2014/12/seguidores-do-cafe-entre-amigos-elegem.html
Elaine voce como sempre, sempre nos ajudar a melhorar o nosso blog.
ResponderExcluirObrigada pelas dicas.. sempre estou aqui lendo e aprendendo com voce!
Um forte abraço, Srta Paloma.
http://blogdasrtapaloma.blogspot.com.br/
Olha consegui colocar os dois só que não aparece escrito o botão descer.
ResponderExcluirPaloma, apague no primeiro código o trecho que está sobrando, background-color: white
ExcluirAcho que pode ser isso...
Para aparecer a palavra "descer" só apague o jogo da velha da linha>> background: # transparent url que está antes do url da imagem descer, para ficar igual o da imagem subir>> background: transparent url
ExcluirObrigada, Silvana!
Excluirhttp://imperfeitaselindas.blogspot.com.br/
Obrigada Elaine pelo código! Coloquei ele em 2014 no blog, porém hoje percebi que o botão descer desapareceu.
ExcluirEncontrei a dica da Silvana e solucionei o problema.
Obrigada!!
<3
ExcluirSempre ensinando coisinhas bacanas para nossos blogs.
ResponderExcluirParabéns pelo Troféu Xícara de Ouro!
joturquezzamundial
Beijos.
Olá Elaine! Sempre com dicas maravilhosas! Fico com vontade de por tudo em pratica no blog. ;p
ResponderExcluirBeijos.
http://maisquerimel.blogspot.pt/
Oi Elaine! adorei a dica... tenho medo de fazer as coisas no blog e fazer coisa errada rsrsrs como faço para desfazer isso caso eu não goste? beijos!
ResponderExcluirgiovanna, antes de aplicar clique em visualizar.
Excluirse você não gostar é só voltar. Beijos :)
Tentei e tentei varias vezes, mas nao deu certo.....serà que tem algum codigo errado, Elaine?
ResponderExcluirAdriana, tem certeza?
ExcluirÉ o mesmo código que uso... talvez haja algum script em seu template que esteja causando conflito...
Adriana, eu tbm tentei tentei no meu e não deu certoo. :(
ExcluirOi Elaine, passei para agradecer por todas as dicas que você disponibiliza. Já me ajudou tanto... Parabéns pelo Blog. Suas explicações são claras e objetivas, isso facilita muito. Sucesso.
ResponderExcluirno meu HTML não aparece esse codigo :(
ResponderExcluirElaine, eu fiz tudo o que você mandou mais o meu botão para baixo não aparece. O que eu faco?
ResponderExcluirhttp://nicoleregiane.blogspot.ca/
Opaaa!! Deixa para la, olhei o comentário acima e consegui. Muito obrigada do mesmo jeito :)
ResponderExcluirhttp://nicoleregiane.blogspot.ca/
HELP ME :'( Estou muito triste, a palavra DESCER e SUBIR não aparece e já salvei....
ResponderExcluirSOCORROOOOOOOOOOOOOOOOOOO
Patrícia, não são palavras, são imagens.
ExcluirVocê criou, hospedou e inseriu os endereços das imagens no lugar correto?
beijosss
Olá Eliane!
ResponderExcluirColoquei os botões SUBIR E DESCER (usei esse rosinha do seu modelo), mas não funcionou!
Pode me ajudar? :(
Olá!
ExcluirSe você seguiu o tutorial e não conseguiu visite minha loja, este é um dos serviços adicionais que ofereço no catálogo de serviços da loja.
Aqui:
http://loja.elainegaspareto.com/2015/03/botao-subirdescer.html
beijos
Oie!! rsrsrs
ResponderExcluirMto obrigada por dividir. Fiz, deu super certo. Usei uma de suas imagens. Vou agora mesmo colocar nos créditos.
Beijos
Oie flor,
ResponderExcluirno meu não deu certoo. :/ :(
fica dizendo que deu erro quando coloco o ultimo codigo.
como faço?
Desde já agradeço. beijoss
Olá!
ExcluirSe você seguiu o tutorial e não conseguiu visite minha loja, este é um dos serviços adicionais que ofereço no catálogo de serviços da loja.
Aqui:
http://loja.elainegaspareto.com/2015/03/botao-subirdescer.html
beijos
Elaine, você arrasa demais, mulher! Obrigada <3
Excluirhttp://imperfeitaselindas.blogspot.com.br/
Oie!
ResponderExcluirMuuuito obrigada!
Como sempre seus tutoriais sempre me ajudam!!
Oiie! Muuitíssmo obrigada pelo tutorial ^^
ResponderExcluirMas há algo ainda de errado :\
Os arquivos PNG ficam com borda, alguns até saem recortados :\
Olá ! Gostaria de colocar apenas o botão de Subir em meu blog, tem alguma forma de inserir apenas ele??
ResponderExcluirFiz tudo certinho e as imagens não aparecem :/
ResponderExcluirKarol, tem certeza?
Excluirnewsvolleyballbyworld.blogspot.com.br
ResponderExcluirobrigado!
Oi, amo seu blog. Já passei aqui antes e hoje tive tempo de ler com calma. Agradeço a ajuda, mas fiquei com medo de testar..kkkkk. Sou nova nesse meio.... Mas vou tentar em breve. Meu blog é...http://eupensoq.blogspot.com.br/ . beijos e abraços. Voltarei.
ResponderExcluirFiz todo o processo mas as imagens do botão não aparecem...
ResponderExcluircoloquei assim...
ResponderExcluir.button_up{
padding:7px; /* posicionamento interno da imagem */
border:1px solid #fff; /* cor da borda, troque ou exclua se desejar */
position:fixed;
background: #transparent urlhttps://4.bp.blogspot.com/-CaDtjKoEsqw/WALG07WuM6I/AAAAAAAAA9k/g1HBrzHR-T0UtUJSD0qln5wckhcK1HW4gCLcB/s1600/seta%2Bpara%2Bcima%2Bblog.png no-repeat top left; /*troque transparent pelo código da cor, caso queira*/
background-position:50% 50%;
width:64px; /* largura do botão */
height:64px; /*altura do botão */
bottom:125px; /* distância em relação à base */
right:5px; /* distância da direita */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
...mas nada de imagem...se puder ajudar seria ótimo! muito obrigado
Hum, tem certeza?
ExcluirEu olhei hoje e vi que está funcionando normal, as setas vermelhas.
Confere?
bjssss
o meu só fica transparente e não quer entra a imagem que vc recomendou :/
ResponderExcluirOlá,primeiramente gostaria de agradecer pelas dicas aqui no blog, você me ajuda muito,
ResponderExcluirEu tenho uma dúvida se eu já tivesse feito isso de colocar botão uma vez e colocar de novo. Ai ficou 2 botões e não consigo tirar nenhum dos dois.
Olá Elaine,
ResponderExcluirAntes de mais, agradeço as dicas que nos oferece, muito úteis. Sempre que venho aqui dou uns cliques nas publicidades como meu contributo ;P
Agora acerca deste código, há um contra no meu blogue, porque tenho um código para evitar as bordas das imagens que é o seguinte:
/* Imagens sem borda
----------------------- */
}.status-msg-wrap { display:none; }.post-body img, .post-body .tr-caption-container, .ss, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
*/
Este código está evitando que as imagens (setas) apareçam, descobri após muitas voltas, mas confirmo que quando tiro este código fica tudo ok o seu código. Mas não poderei tirar o outro também, dessa forma não sei o que faço, como editar um ou outro código para que os dois funcionem.
Agradecia a dica,
Cumprimentos
Ed, infelizmente não sei dizer, teria que estudar.
ExcluirAcredito que você terá que optar por um ou por outro...
Ok Elaine,
ExcluirObrigado na mesma :)
Já descobri Elaine :)
ExcluirUma falha minha, faltava fechar o tal código que já tinha com }
Boas festas
Percebi que mesmo quando a página já está em cima os botões permanecem exibíveis. Nesse hack é possível fazer com que eles só apareçam quando rolar a página pra baixo?
ResponderExcluirMoisés, esse não, mas tem um mais recente e moderno que públiquei recentemente que permite isso.
ExcluirAqui:
https://www.elainegaspareto.com/2019/01/botao-subir-e-descer-deslizante.html