GeegleHayoO - Membuat Fitur Back To Top/Scroll To Top/Return To Top/Kembali Ke Atas
Hallo GO' Gimana kabarnya? Udah 2 Hari ini Chakly ngak posting di Blog GeegleHayoO ini. Rasanya Gatel banget jari ini pengen ngetik, Dan Chakly sekarang mao ngetik sesuatu yg sederhana, Tapi Mahal manfa'atnya...
Yaa Tambahkan fitur Kembali ke atas Tombol Gadget Di Blogger, Apakah ini?
Kalo kamu facebookerss Setia pasti sudah terbayang seluruhnya akan tampilan facebook di otak hehey. Tampilan bagian manakah? Itu looh yg ada di baris paling bawah Halaman FB ada tulisan "Back To Top" atau "Kembali ke Atas"
Naahh kamu pasti tahu kan fungsinya itu?
Ketika kami menerbitkan banyak tulisan panjang di Blogger maka kita membuka Blogger dan melihat semua postinganmaka kita menggunakan tombol scroll ke bawah.
Kami mencapai bagian bawah website atau Blogger kemudian kita gulir lagi ke atas! jadi di sini kita perlu tombol Kembali ke atas, hari ini kita belajar tentang cara menambahkan / menyisipkan tombol Kembali ke Paruh atas Halaman/Top Gadget / Widget di Blogger atau Website.
Berikut ini adalah Langkah-langkahnya:
Langkah 1: Buka Blogger klik
Template kemudian klik tombol Edit HTML.
Langkah 2: Cari script pembukaan
<head> tag kemudian Paste
Kode di <head> tag dan klik tombol Simpan Template.
<script src = 'http: //ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'> </ script>
Langkah 3: Pergi ke Blogger
Tata Letak klik tautan Tambahkan Gadget.
Langkah 4: Di sini kita pilih Gadget
HTML / JavaScript.
Langkah 5: Pastekan Kode dibawah ke daerah Content/Kolomnya kemudian klik tombol Save.
<!--Smooth Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);} else {
jQuery('.back-to-top').fadeOut(duration);}});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;})});</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;}
.back-to-top:hover {
text-decoration: none;}</style>
<a href="#" class="back-to-top"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrcT-XYCYSDW6RIi2f98k_GFODJdiJSEsLt-WktJ52aU01I4vPGD_AJZuFQzyy32dwKCb9Ba-0nwDtxx8H_0eyWGTNp7swWQK_uZPnP5RcJEuunS9-Zrt4Rm7Hp6wlTem_iKdNjxP4Olf/s1600/back+to+top+.png " alt="Back to Top" / ></a>
<!--Smooth Back to Top Button End-->
Langkah 6: Silahkan ganti script yg sudah Chakly Blok untuk mengubah Icon sesuai gaya kamu. Tapi langkah ini tidak harus dilakukan koq...
Langkah 7: Pergi ke Blogger "
Https://chaklyraflesia.blogspot.com" untuk mengucapkan terima kasih dengan menekan tombol Subcribe hehehey...
Selamat Berkarya Di Web.