Coloque widget voltar ao topo flutuante do blog DicaDeDica!

Galera, sabe aqueles templates legais que tem um botão para o usuário voltar ao topo do blog que fica flutuando quando mexemos na barra de rolagem? Vários novatos já me pediram para disponibilizar um tutorial ensinado a colocar este recurso no blog, então hoje trago duas coisas, um widget hack que insere isto automaticamente, só copiar e colar e um tutorial completo para você montar o seu com suas próprias imagens. Vamos lá!



Primeiro o widget altomático Flutuante!

1 - Selecione e copie todo o código do widget:

<a style="display:scroll;position:fixed;bottom:72px;right:50px;" href="#" title="VOLTAR AO TOPO (do blog DicaDeDica)"><img src="http://lh4.ggpht.com/_eZ4RDyPwpoA/SagWzGVD6mI/AAAAAAAAAw4/LivJ__3Qot0/s144/TOPO_FLUTUANTE_DICADEDICA.png"/></a> <a href="http://www.dicadedica.blogspot.com/"> <span >Voltar ao topo flutuante Dicadedica</span></a> </span>


2 - No painel de controle do Blogger (Blogspot) acesse:
  • Layout
  • Adicionar um widget
  • HTML/JavaScript
3 - Cole o código e salve o widget

Pronto seu widget estará configurado da forma automática.
(Funciona nos templates do novo blogger)

Agora o tutorial extensivo!

Tutorial Widget Hack Botão Voltar ao Topo Flutuante


1 - Primeiro o que faz cada tag:
  • title=" xxxx " = o comando title com é o texto que a parece quando passamos o mouse.
EX: topo
  • img src="iiiiiii.gif" = A tag img é responsável pela visalização da imagem
EX: http://lh4.ggpht.com/_eZ4RDyPwpoA/SagWzGVD6mI/AAAAAAAAAw4/LivJ__3Qot0/s144/TOPO_FLUTUANTE_DICADEDICA.png
  • a href="#" = Esta é responsável pelo link para o topo da página
  • style="display: scroll = Este comando desabilita a barra de rolagem dando a aparência de flutuar na tela.
  • position: fixed = Fala que a imagem ficará em uma posição fixa
  • right: XXpx = Alinhamento da imagem a direita e com XX de tamanho em pixels.
EX: 72px
  • bottom: YYpx = Faz a imagem aparecer a XX pixels da parte de baixo da tela do navegador.
EX: 50 px

2 - Agora que já sabe o que faz cada comando substitua no codigo abaixo o que lhe for do agrado e cole no html da pagina do blogger imediatamente antes da tag </dody>

<a style="display:scroll;position:fixed;bottom:XXpx;right:YYpx;" href="#" title="xxxx"><img src="iiiiiii.gif"/></a>


Duvidas é só perguntar, obrigado por escolher o DicaDeDica!!!

Mais uma dica!!!

3 - Na falta de ícones, acesse o site

Iconlet
http://www.iconlet.com/search?n=arrow+up

com ótimos ícones no estilo web 2.0 e gratuitos.



Gostou? Então copie este post para seu Blog:




20 comentários

Postagens mais visitadas