Tutorial kali ini adalah cara membuat/memberikan efek scrollto atau backtotop di sticky header, efek ini seperti sticky header yang di gunakan oleh web Google Plus. Tutorial ini berguna untuk menggantikan fitur dari Back to Top Button yang secara umum biasanya ada di blog tersebut.
Anda bisa menggunakan menu navigation sticky simple yang sudah jadi satu antara mnu nav dengan judul/header blog Anda. Trick ini dapat Anda pasangkan di blog AMP, karna tutorial ini saya dapatkan dari postingan Kompi Ajaib.
Menambahkan ScroolTo Seperti Google+
Caranya sebenarnya tidak begitu sulit, dikarenakan hanya menambahkan tag dan CSS saja dan langsung work pada blog Anda
1. Silakan Anda tambahkan
on='tap:totop.scrollTo' pada tag div sticky header Anda.2. Selanjutnya menambahkan action pada tag div, harus Anda tambahkan
role='button' dan tabindex='0' kurang lebih penulisan lengkapnya seperti dibawah ini<div class='sticky_header' on='tap:totop.scrollTo' role='button' tabindex='0'>Note:
Silakan ganti
sticky_header dengan tag sticky header Anda3. Silakan tambahkan CSS dibawah ini di awal atau di akhiran tag
style pada template blog Anda#totop:before{content:"";display:block;height:53px;margin-top:-53px;visibility:hidden}Baca juga : Membuat Menu Navigation Ala Arlina Design
Silakan Anda save templatenya, untuk selain AMP saya belum menguji cobanya, akan tetapi menurut saya work juga karna tidak menggunakan banyak kode.
Post a Comment