Aprenda como se faz:..Up e Down, com efeito deslizante nos novos modelos... como fazer os mesmos modelos Designer Novo

Aprenda como se faz:..Up e Down, com efeito deslizante nos novos modelos... como fazer os mesmos modelos Designer Novo


"Up"  e "Down" , com efeito deslizante nos novos modelos


"  Algum tempo atrás nós visto em um post anterior
Tal como colocar setas no blog para ir para cima dela e ir ao fundo, com um efeito suave deslizamento, utilizando Scriptaculous."

"   Neste post vamos ver como fazer os mesmos modelos
Designer Novo."[1] De Edição de HTML do nosso painel do rótulo localizar Blogger 
</head>
; no código do seu template e cole-o no seguinte:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/><script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->

Nota:

Lembre-se que se você já estiver usando este código (Scriptaculous) para qualquer outra finalidade, não é necessário colocá-la de volta.
E lembre-se também que se você usar JQuery no modelo, você não pode usar Scriptaculous ao mesmo tempo.

[2] Quase no final do código do nosso pessoal localize 

a tag </body>; e sobre ela  

"coloque o código para visualizar as fotos ou as setas para "subir"   e "descer" "
<!--Flecha ir abajo -->
<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='Ir abajo' border='0' src='URL_DE_LA_IMAGEN_FLECHITA' style='position:fixed; bottom:40px; right:0;margin-bottom: 5px;'/></a>

<!--Flecha ir arriba -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir arriba' border='0' src='URL_DE_LA_IMAGEN_FLECHITA' style='position:fixed; bottom:0; right:0;margin-top: 5px;'/></a>

[3] Alterar onde se diz
URL_DE_LA_IMAGEN_FLECHITA A URL de suas imagens ou ícones de seta.


[4] Vamos agora localizar o modelo que esta linha de código:

<div class='body-fauxcolumns'>

E mudar isso para:

<div id='outer-wrapper' class='body-fauxcolumns'>

[5] Temos agora de encontrar esta linha de código:

<div class='content-cap-bottom cap-bottom'>

E mudar isso para:

<div id='footer-wrapper' class='content-cap-bottom cap-bottom'>

[6] Salve as alterações.



fonte e créditos deste presente post:



2 comentários:

  1. Minha querida amiga Edilene, boa noite!!!
    Mais uma excelente dica para o novo modelo, adorei minha amiga!!!
    Já copiei e guardei para depois tentar colocar no meu novo blog, valeu!!!
    Parabéns pela excelente postagem, ótima!!!
    Beijos e muita paz!!!

    ResponderExcluir