Tutorial: Voltar ao topo do blog (deslize)

Tutorial: Voltar ao topo  do blog (deslize)


Para iniciar o passo -  a - passo

.Logado no painel do blogger,
...vá até o html
de seu template blogger
e,
...

Primeiro Passo:

No CSS, de seu "lay-out", template blogger, 
cole ,antes de ]]></b:skin>

o código a seguir:

#toTop {
    background: none repeat scroll 0 0 #f7f7f7;
    border: 1px solid #ccc;
    bottom: 10px;
    color: #333;
    cursor: pointer;
    display: none;
    font-family: verdana;
    font-size: 11px;
    padding: 5px;
    position: fixed;
    right: 10px;
    text-align: center;
    width: 100px;
}
...

Pronto.
Visualize
Salve!

Segundo passo:

Agora, 
você ,
cola,
antes de </head>,
o código "Java Script", a seguir:



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();
    } else {
            $('#toTop').fadeOut();
    }
    });

    $('#toTop').click(function() {
        $('body,html').animate({scrollTop:0},800);
    });
});
</script>

...
Terceiro Passo:

Antes da tag </body>,  de seu template blogger,no html,
cole,
o código a seguir:
...

<div id="toTop" style="display: none;">^ Voltar ao topo</div>

...
Pronto
Visualize!
Salve!
...
Nota:
...

Esse terceiro passo, você pode também colar
em

"Adicionar um gadget",

 no seu  "lay-out" de seu template  blogger.




Bom, espero ter ajudado!


Veja, nesse meu blog, o exemplo, embaixo , do lado direito.