Blog ziyaretçilerinin ekranı aşağıya doğru kaydırdıktan sonra tekrar yukarı çıkmak için başa dön butonu çok faydalı oluyor. Bu yazımızda Blogger AMP HTML için yeni bir özellik olan başa dön butonu oluşturma ile ilgili ipuçlarını paylaşacağız.
Blogger İçin AMP Başa Dön Butonu Nasıl Oluşturulur?
AMP başa dön butonunu eklemek için aşağıdaki adımları takip edin.
Bknz: Blogger ve WordPress AMP Başa Dön Butonu
1- Aşağıdaki javaScript kodunu blogunuzun şablon kodları arasında bulunan </head> kodunun bir satır üzerine ekleyin.
AMP JavaScript
<b:if cond='data:blog.pageType not in ["static_page","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>2- Aşağıdaki CSS kodlarını amp-custom stil dosyası içerisine ekleyin.
CSS
.scrollToTop{font-size:1.4em;cursor:pointer;width:40px;height:40px;border-radius:2px;border:none;outline:0;background:#ff9b51;z-index:99;bottom:16px;right:16px;position:fixed;opacity:0;visibility:hidden;box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24)}
#marker{position:absolute;top:100px;width:0;height:0}
.scrollToTop:after{background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik01IDR2MmgxNFY0SDV6bTAgMTBoNHY2aDZ2LTZoNGwtNy03LTcgN3oiLz48L3N2Zz4=);content:'';margin:0;display:inline-block;vertical-align:middle;width:24px;height:24px}Buton rengini değiştirmek için yukarıdaki CSS kodları içerisinde belirtilen kod ile değişiklik yapabilirsiniz.
3- Aşağıdaki HTML kodu blogunuzun şablon kodları arasında bulunan <body> kodunun bir satır altına ekleyin.
HTML
<div id='totop'></div>4- Son olarak, aşağıdaki kodu </body>kodunun bir satır üzerine ekleyin.
AMP JavaScript
<b:if cond='data:blog.pageType not in ["static_page","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"></button>
</b:if>Not: AMP başa dön butonu sabit sayfalarda görüntülenmeyecek şekilde ayarlanmıştır.
Yukarıdaki adımları uyguladıktan sonra şablon editör sayfanızı kaydedin ve blogunuzu kontrol edin.
KategoriAMP