Adicionar botão voltar ao topo no blogger do modelo Google AMP

Publicidade

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.



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. 

Em seguida, adicione o seguinte código javascript antes </ head>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<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 != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<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 .
Tópicos: