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:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr6MnPXVEhdmCibIY7nmaXgZcmbLyCqhoWFIvwWMYaZKVHvqGP-v_fUHQubENUQxq0t_CTtbuOZfsweq34Uia7eLoJ_2zadTftMQ9Yk9uugSOVL99rT5NBn_M8S-uxbzMsHFHLKyj6QZ4/s1600-h/TOPO+copy.png"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px; height: 160px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr6MnPXVEhdmCibIY7nmaXgZcmbLyCqhoWFIvwWMYaZKVHvqGP-v_fUHQubENUQxq0t_CTtbuOZfsweq34Uia7eLoJ_2zadTftMQ9Yk9uugSOVL99rT5NBn_M8S-uxbzMsHFHLKyj6QZ4/s200/TOPO+copy.png" alt="" id="BLOGGER_PHOTO_ID_5307552435495897234" border="0" /></a>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 <span style="font-weight: bold;">automaticamente</span>, só copiar e colar e um <span style="font-weight: bold;">tutorial completo</span> para você montar o seu com suas próprias imagens. Vamos lá!<br /><br /><span style="font-weight: bold;">Primeiro o widget altomático.</span><br />1 - Selecione e copie todo o código do widget:<br /><br /><blockquote style="color: rgb(153, 153, 153);"><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> </blockquote><br /><br />2 - No painel de controle do Blogger (Blogspot) acesse:<br /><ul><li> Layout</li><li>Adicionar um widget</li><li><span class="title">HTML/JavaScript</span><br /></li></ul>3 - Cole o código e salve o widget<br /><br />Pronto seu widget estará configurado da forma automática.<br />(Funciona nos templates do novo blogger)<br /><br /><span style="font-weight: bold;">Agora o tutorial extensivo:</span><br /><h1>Tutorial Widget Hack Botão Voltar ao Topo Flutuante</h1><br />1 - Primeiro o que faz cada tag:<br /><ul><li><span style="font-weight: bold;">title="<span style="color: rgb(204, 153, 51);"> xxxx</span> "</span> = o comando title com é o texto que a parece quando passamos o mouse.</li></ul>EX: topo<br /><ul><li><span style="font-weight: bold;">img src="<span style="color: rgb(204, 153, 51);">iiiiiii.gif</span>"</span> = A tag img é responsável pela visalização da imagem</li></ul>EX: http://lh4.ggpht.com/_eZ4RDyPwpoA/SagWzGVD6mI/AAAAAAAAAw4/LivJ__3Qot0/s144/TOPO_FLUTUANTE_DICADEDICA.png<ul><li><span style="font-weight: bold;">a href="<span style="color: rgb(204, 153, 51);">#</span>" </span>= Esta é responsável pelo link para o topo da página<br /></li><li><span style="font-weight: bold;">style="<span style="color: rgb(204, 153, 51);">display: scroll</span> =</span> Este comando desabilita a barra de rolagem dando a aparência de flutuar na tela.<br /></li><li><span style="font-weight: bold;">position: <span style="color: rgb(153, 102, 51);"><span style="color: rgb(204, 153, 51);">fixed</span> </span>= </span>Fala que a imagem ficará em uma posição fixa<br /></li><li><span style="font-weight: bold;">right: <span style="color: rgb(204, 153, 51);">XXpx</span> = </span> Alinhamento da imagem a direita e com <span style="color: rgb(204, 153, 51); font-weight: bold;">XX</span> de tamanho em pixels.</li></ul>EX: 72px<br /><ul><li><span style="font-weight: bold;">bottom: <span style="color: rgb(204, 153, 51);">YYpx</span> = </span>Faz a imagem aparecer a <span style="color: rgb(204, 153, 51); font-weight: bold;">XX</span> pixels da parte de baixo da tela do navegador.</li></ul>EX: 50 px<p>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<span style="font-weight: bold;"> </dody></span></p><p style="color: rgb(153, 153, 153);"></p><blockquote><a style="display:scroll;position:<span style="color: rgb(204, 153, 51); font-weight: bold;">fixed</span>;bottom:<span style="color: rgb(204, 153, 51); font-weight: bold;">XXpx</span>;right:<span style="color: rgb(204, 153, 51); font-weight: bold;">YYpx</span>;" href="<span style="color: rgb(204, 153, 51);">#</span>" title="<span style="color: rgb(204, 153, 51); font-weight: bold;">xxxx</span>"><img src="<span style="font-weight: bold;"><span style="color: rgb(204, 153, 51);">iiiiiii.gif</span></span>"/></a><br /><br /><span style="color: rgb(0, 0, 0);"><blockquote><br />Duvidas é só perguntar, obrigado por escolher o DicaDeDica!!!<br /><br /><span style="font-weight: bold;">Mais uma dica!!!</span><br />Na falta de icones acesse o site<br /><br /><a href="http://www.iconlet.com/search?n=arrow+up">Iconlet</a><br />http://www.iconlet.com/search?n=arrow+up<br /><br />com ótimos ícones no estilo web 2.0 e gratuitos.<br /></blockquote></span><br /></blockquote><p></p><p><br /></p>