Blogger ve WordPress AMP Başa Dön Butonu

Bu yazımızda Blogger ve WorpPress AMP kullanıcıları için, AMP uyumlu başa dön butonu (AMP back to top button) eklentisini paylaşacağım. Daha önce AMP komut yani yönlendirme kodlarını paylaşmıştık.

Bknz: AMP Komut ve Kısa Kodları

AMP komut kodlarından oluşturulmuş AMP uyumlu başa dön butonunu blogunuza eklemek için, aşağıdaki adımları takip edin.

AMP Başa Dön Butonu Nasıl Eklenir?

AMP olan şablonunuzun amp-custom stil dosyası içerisine aşağıdaki CSS kodlarını ekleyin.

#backtotop{background:#dd5252;border-radius:3px;position:fixed;bottom:20px;right:20px;cursor:pointer;z-index:9999}
#backtotop:hover{opacity:0.8;}
#backtotop svg {fill:#fff;width:40px;height:40px}
#backtotop span:focus{outline:none}

Aşağıdaki AMP HTML kodu </body> kodunun bir satır üzerine ekleyin.

<div id='backtotop'><span on='tap:totop.scrollTo' role='button' tabindex='0'><svg viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path d='M5 4v2h14V4H5zm0 10h4v6h6v-6h4l-7-7-7 7z'/></svg></span></div>

AMP şablonunuzun AMP javaScript kodları arasında aşağıdaki AMP javaScript kodunun olup olmadığını kontrol edin. Şablon kodlarınız arasında bulunmuyorsa, aşağıdaki javaScript kodunu </head> kodu üzerinde bulunan AMP javaScript kodları arasına ekleyin ve şablonu kaydedin.

<script async='async' src='//cdn.ampproject.org/v0.js'/>

Blog kullanıcıları için, AMP başa dön butonu ile ilgili bilgiler paylaştık. Paylaşmış olduğumuz AMP başa dön butonunu Blogger, WordPress gibi AMP şablonu kullanılan tüm web sitelerinde kullanabilirsiniz.

Ön İzleme

AMP başa dön butonu hakkında yardım almak için yorum formunu kullanabilirsiniz.