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
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.
- img src="iiiiiii.gif" = A tag img é responsável pela visalização da imagem
- 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.
- bottom: YYpx = Faz a imagem aparecer a XX pixels da parte de baixo da tela do navegador.
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.
Comentários
Bem vindo...
Muito bom, o teu blog!
vou tentar
se der certo volto aqui para dar meus creditos
ok..1
e se nao der perguntarei como é q faz
ok..........2.
voltei
tentei uma
duas
tres
vezes
e o que
consegui
deve ter dado certo
de uma olhadinha,
e...
eu ja te linkei em um dos meus blogs
porem o botao esta em outro blog
saudediversascategorias.blogspot.com
te conheço de onde
deve ser do dihitt
gostei muito de suas dicas e ha muito tempo te linkei
hj vi este botao e tentei fazer deve ser q acertei
qualquer
coisa desculpas antecipadas
entre em contato se quiser quando puder
ok
sou nv na area
se errei
desculpa de nv
rsss
e...
meus creditos a vc
aonde ponho aqui ou bo meu blog????????
obrigada
fica com Jesus
Abraços!
Implantei em meu blog e vou lhe dar um link.
Valeu
e coloquei seu linke em dois dos meus blogs ou 3, me agora vc poe o meu, como recebi seu recado e mail
seu
ok
coloquei o botao flutuante
em
http://mensagensdiversificadas.blogspot.com
de umsa olha da e cluq nos anuncios ok
deu certo
e te linquei
agora me linka aqui no seu
grata
coloquei
seu link
em
http://pesquisando encontrei.blogspot.com
agora colaca aqui o meu
ok
e pus o botao flutuante
grata
é o certo
Não querendo ser chato mas não seria antes da tag < /body > e não antes da tag < /dody > hehe
Grata.
Entrei pra esse mundo de blogs a pouco tempo e não sei quase nada então sou grata a pessoas que como vc q se preocupa com os novatos como eu .
Sorte!!!!!!!!
http://funwedeo.posterous.com/
Clara e Ana
FunWeDeo
Olá!!!
Somos Clara e Ana Letícia,e nós esperamos que você se divirta vendo o nosso site.
Aqui temos fotos e videos legais, curiosidades e muito +!
Coloque opiniões, sugestões, e talvez o seu comentário vai fazer parte do próximo vídeo ou assunto!!!!!!
Toda semana colocaremos algo novo.
Entrem tb em: http://aldrops.posterous.com/ ,meu site (ana letícia).
Atenciosamente
Clara e Ana Letícia.
PS:Sigam-nos no Twitter: @funwedeo
Muito obrigada pela Dica!!!
Funcionou de primeira.
tentei várias dicas de outros sites e não estava dando certo.
Valeu mesmo
Obrigada pelo tutorial! :)