Dicas de DicadeDica.com

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.

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



Voltar ao topo flutuante Dicadedica





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 px2 - 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

fixed;bottom:XXpx;right:YYpx;" href="#" title="xxxx">iiiiiii.gif"/>










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





Mais uma dica!!!

Na falta de icones acesse o site





Iconlet

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






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

Comentários

Anterior Proxima Página inicial