botão voltar ao topo do blog, com "efeito-scroll" (deslizante)

 
 Botão "voltar  ao topo  do blog", com "efeito-scroll" (deslizante)


Tutorial:

Primeiro:

Logado no seu painel blogger;
Vá até o html dele.
E, procure por  ]]></b:skin>


Uma vez, encontrando-o,

acima de ]]></b:skin>
cole o código:

▼

/* to top */
    #toTop {
    width:50px;  /* Largura do botão * /
    border:1px solid #000; /* Cor e tipo da borda */
    text-align:center; /* Alinhamento do texto */
    padding:5px; /* Distancia entre texto e borda */
    position:fixed; /* Posição que faz com que ele corra por toda a página*/
    bottom:5px; 
    right:5px;
    cursor:pointer;
    color:#ff0000; /* Cor da fonte do botão */
    text-decoration:none;
    font-weight:700;  /* Define o negrito da fonte */
    -moz-border-radius:5px;  /* Definições para o ângulo do botão */
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    }

Visualize!
Salve!


Agora,
acima de </body>

cole o código:

<a href='#' id='toTop'>Topo</a> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 
<script type='text/javascript'>    
/*-----------------------     
* jQuery Plugin: Scroll to Top     
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)     
*      
* Copyright (c) 2009 Ph.Creative Ltd.     
* Description: Adds an unobtrusive &quot;Scroll to Top&quot; link to your page with smooth scrolling.     
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx     
*      
* Version: 1.0, 12/03/2009     
-----------------------*/ 
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var   scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html,  body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}}); 
  $(function() {    
                $(&quot;#toTop&quot;).scrollToTop();     
            });     
        </script>

Visualize!
Estando tudo certo,
Salve!


 Nota:

Caso prefira uma imagem,ao invez de escrito "topo"

troque
o código
▼

<a href='#' id='toTop'>Topo</a> 

por este código a seguir:
▼

<a href='#' id='toTop'><img src='Aqui você insere o ENDEREÇO DE SUA IMAGEM aonde a hospedou'>

 </img></a>

Caso você prefira, uma dica mais simples:


cole, em gadget, do lado de "html" (<>),
de seu "lay-out", do template blogger,
fazendo as alterações necessárias,
o código a seguir:
 

<div style="position:fixed; bottom:0px; right:0px;"><a href="#">

<img src="LINK DA IMAGEM" border="0" /></a></div>                 

Mensagem do formulário de comentário:

"comentários de anônimos, não serão publicados, e aqui... 
...não é local para desentendimentos e discórdias! 
Seja bastante educado! Frequenta qual escola, ou frequentou?
 ...ou a educação vem de berço?