Tutorial de como adicionar botão Rolar para o topo no modelo do Google AMP para Blogger com CSS
O botão volltar ao topo é útil para tornar mais fácil para os visitantes voltar ao topo do site depois de percorrer-lo até a parte inferior.
Isso fará com que os visitantes do seu blog retornem rapidamente ao topo da página do seu blog e, claro, isso é bom para o seu blog.
O botão de rolagem para cima não só pode ser adicionado ao site HTML, mas também pode ser adicionado ao site baseado em AMP.
Isso fará com que os visitantes do seu blog retornem rapidamente ao topo da página do seu blog e, claro, isso é bom para o seu blog.
O botão de rolagem para cima não só pode ser adicionado ao site HTML, mas também pode ser adicionado ao site baseado em AMP.
O Google AMP forneceu um javascript especial para engajar a criação do botão voltar ao topo, como já exemplificado no site ampbyexample.com . Isso é usando o javascriptamp-position-observer e amp-animation .
Como adicionar o botão Scroll To Top ao modelo do Google AMP Blogger ?
Se você usa a plataforma Blogspot, com base no Google AMP, é claro que a maneira de adicionar botões é um pouco diferente. Eu explicarei abaixo.
Vá para o painel Editar HTML no seu modelo de blogger.
Vá para o painel Editar HTML no seu modelo de blogger.
Em seguida, adicione o seguinte código javascript antes </ head>
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "error_page"'>
<script async='async' custom-element='amp-position-observer' src='https://cdn.ampproject.org/v0/amp-position-observer-0.1.js'/>
<script async='async' custom-element='amp-animation' src='https://cdn.ampproject.org/v0/amp-animation-0.1.js'/>
</b:if>
Copie e cole este CSS depois <style amp-custom='amp-custom'>
/* Scroll To Top */
.scrollToTop{cursor: pointer;color:#fafafa;font-size:1.4em;box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);width:50px;height:50px;border-radius:100px;border:none;outline:0;background:#FF1744;z-index:9999;bottom:10px;right:10px;position:fixed;opacity:0;visibility:hidden}
#marker{position:absolute;top:100px;width:0;height:0}
.scrollToTop svg{width:34px;height:34px;vertical-align:middle;}
* Mude a marca amarela com sua cor .
O próximo passo é chamar o seletor do seu botão. Copie e cole este código em logo abaixo do <body> .
<div id='totop'/>
O último passo é colocar o botão Scroll to Top no seu blog. Copie este código antes de </ body>
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "error_page"'>
<amp-animation id="showAnim"
layout="nodisplay">
<script type="application/json">
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#scrollToTopButton",
"keyframes": [{
"opacity": "1",
"visibility": "visible"
}]
}]
}
</script>
</amp-animation>
<amp-animation id="hideAnim"
layout="nodisplay">
<script type="application/json">
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#scrollToTopButton",
"keyframes": [{
"opacity": "0",
"visibility": "hidden"
}]
}]
}
</script>
</amp-animation>
<div id="marker">
<amp-position-observer on="enter:hideAnim.start; exit:showAnim.start"
layout="nodisplay">
</amp-position-observer>
</div>
<button id="scrollToTopButton"
on="tap:totop.scrollTo(duration=200)"
class="scrollToTop">
<svg viewBox="0 0 24 24">
<path fill="#fff" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
</svg>
</button>
</b:if>
Salve suas alterações de modelo.
Talvez seja útil, comente abaixo para qualquer pergunta sobre este tutorial AMP do Google .