Pular para o conteúdo principal

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:




Comentários

Anônimo disse…
Amigo funcionou, obrigado já ta no meu blog.
Anônimo disse…
Adicionei o teu banner, parceiro. Por favor, entre em contato!
Bem vindo...
Muito bom, o teu blog!
flo disse…
oi
vou tentar
se der certo volto aqui para dar meus creditos
ok..1
e se nao der perguntarei como é q faz
ok..........2.
flo disse…
oi

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
webflow21 disse…
Ok, qual é o blog que deseja fazer a parceria?
Esse blog é muito bom, meus parabéns! Estou certo que voltarei mais vezes!

Abraços!
Renato Fernandes disse…
ôtima dica.
Implantei em meu blog e vou lhe dar um link.
Valeu
flo disse…
ja colquei o flutuante vc viu , ficou certo?

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
webflow21 disse…
Nossa... edilene, você posta em muitos blogs hehehe, sim ficou ótimo coloca nos outros blogs tambem.
flo disse…
oi
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
flo disse…
oi
coloquei
seu link
em
http://pesquisando encontrei.blogspot.com

agora colaca aqui o meu
ok
e pus o botao flutuante
grata
flo disse…
http://pesquisandoencontrei.blogspot.com
é o certo
Denis disse…
Eu fiz isto de uma dica de um blog gringo muito complicada, e vou refazer com sua dica, que é muito mais simples!
Não querendo ser chato mas não seria antes da tag < /body > e não antes da tag < /dody > hehe
webflow21 disse…
É isso memso vlw, não é chata não!!! Beijos.
keroarte disse…
Parabéns pela dica!
Grata.
Nany Bracello disse…
Ola suas dicas são muito uteis ,obrigada.
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!!!!!!!!
Edson santos disse…
MUITO OBRIGAAAAAAAADOOOOOOOOOOOOO!!
Oi! Entrem neste blog:
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
Kátia SanSuey disse…
Oi,
Muito obrigada pela Dica!!!
Funcionou de primeira.
tentei várias dicas de outros sites e não estava dando certo.
Valeu mesmo
Renata F. disse…
Editei o código com minha imagem personalizada e add como widget de HTML/Java e funcionou normalmente!
Obrigada pelo tutorial! :)

Postagens mais visitadas deste blog

Maneira fácil de contabilizar as visitas

Sei que muitos blogueiros já sabem, mais essa dica é muito importante para aqueles que estão dando os primeiros passos na blogosfera, listo abaixo os melhores sistemas que achei para contabilizar as visitas de forma gratuita dos meus blogs e sites! Para saber: Quantos usuários online, em que lugar e o que estão vendo no seu site ou blog é só add o elemento de página do site whos.amung.us . De onde estão vindo as visitas, a orígen dos visitantes que acessão seu site coloque o elemento de pagina do site e-referrer . Simplesmente o numero de visitas, tem o elemento de pagina do site amazingcounter . Nenhum desses widgets nunca me deram problemas por isso uso e recomendo sem ganhar nada com isso!!! Se souberem de algo melhor, podem ficar a vontade para postar seus comentários!!! Origem dos visitantes do DicaDeDica! www.e-referrer.com

Top 5 Programas Gratuitos Para Animar suas Festas

Agora chegando 2009, um ano com muitos feriados e com certeza com muitas festas!!!! Eu quero deixa alguns softwares que vão animar todas elas. Recomendo 5 programas e o Frest on fire é o melhor deles, mais como cada um tem sua utilidade é recomendável variar entre os programas de acordo com o publico da festa. O FrestOnFire que é o clone do Guitar Hero para PC e em português é o melhor para ser usado durante a festa e a qualquer hora, mais veja a lista abaixo esses são na minha opinião os 5 melhores programas gratuitos para animar qualquer festa. Se lembrarem de outros que estou es favor comentar ;) ------ Frets On Fire - (Guitar Hero - Clone Para PC) "Agarre seu teclado e mostre quem é que manda em incríveis solos de guitarra neste jogão emocionante!" - Aproveitando o novo nicho de mercado que o jogo abriu, foi desenvolvido Frets On Fire, seguindo o mesmo estilo de Guitar Hero com duas grandes vantagens: gratuito e em português! Frets On Fire oferece três músicas difere

Papercraft e PaperToys: Animes e Cartoons em Brinquedos de Papel

É uma pena que muitos cartoons e animes que assistimos na internet não encontramos para vender em bonecos no Brasil. Mais isso não impede que a galera que é fã destes animes tenha sua própria miniatura feita pelas próprias mãos, e para ajudar esta galera, eu mostro a galeria que achei dos Brinquedos de papel, chamados de Papercraft dos animes e cartoons mais famosos que está bombando na internet. Vídeo Tutoral PaperCraft Instruções: Como Montar um PapeCraft: 1 - Baixe o pdf do personágem 2 - Tenha instalado uma o leitor de pdf se não tiver baixe e instale aqui 3 - Imprima no modo colorido na folha de papel A4 4 - Recorte as peças seguindo as instruções do arquivo pdf (Peça supervisão de um adulto) 5 - Para melhor resistência cole as peças recortadas em cartolina ou papel cartão... 6 - Dobre as arestas serrilhadas 7 - Cole seguindo o modelo indicado nas intruções... Pronto Galeria PapeCraft Animes Brinquedos de papel todos os níveis: Death Note 1 Light Yagami Baixar RYUK é SHINIGAM