Cara Membuat Tombol Smooth Scroll Up di Blogger

MEMBUAT TOMBOL SMOOTH SCROLL UP PADA BLOG



    Halo guys :D, hari ini admin akan memberikan tutorial cara membuat tombol smooth scroll up pada blogger. Apa itu tombol scroll up?. Tombol scroll up adalah tombol yang membuat halaman yang kita lihat akan scroll up/naik ke atas secara otomatis. Scroll up pada website/blog sangat dibutuhkan dan bisa membantu pengunjung ketika membaca artikel dll, tombol scroll up biasanya terletak di pojok kanan bawah.

   Min terus apa itu smooth scroll up? tombol scroll up ini muncul secara otomatis jika kalian sedang membaca artikel ini di pertengahan halaman atau halaman bawah. Mau tau cara membuatnya? simak tutorialnya dibawah sangat mudah dan simple kok.



Langkah - Langkah :

1. Pilih menu Tema kemudian Edit HTML


2a. Cari tag </head> dengan cara Ctrl+F dan isi search box dengan tag </head> kemudian enter.


2b. Jika sudah ketemu silahkan copy Script dibawah ini dan pastekan di atas tag </head>. Kemudia Simpan/Save

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

3a. Pilih menu Layout/Tata letak, lalu tambah widget baru dan pilih HTML/JavaScript



3b. Copy dan paste script dibawah ini kedalam widget HTML/JavaScript

<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:transparent;
font-size: 12px;
padding: 1em;
display: none;
z-index:9999;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCs3jO_pECyRyGfyCq8XNTrTsV6PPSITeBc3Bnkggsl97PYZhAJ2MycWgcOECez-Y8sqWHaFexHOfmKDfnP7AD6GfpkC3Z0bWdRy6DD2_Cnwj7z4yOzCk0VCiSsB2gevuLdDOsXdqJcSlH/s1600/Tutorial-Cara-Pasang-Tombol-Back-to-Top-di-Blog-dengan-Mudah-Arief-Ghozaly-5.png" width="80px" height="80px" alt="Back to Top" / /></a>

Perhatian !!!
Jika kalian ingin mengubah ukuran scroll upnya silahkan edit yang diberi warna hijau.

4. Kemudian Save/Simpan.

   Silahkan kalian buka blog kalian dan scroll ke bawah untuk mengecek apakah smooth scrollnya bekerja atau tidak. Jika work selama anda berhasil, jika tidak silahkan coba lagi :D

Jika tutorial ini bermanfaat silahkan kalian share dan jangan lupa untuk Subscribe (Langganan) agar bisa mendapatkan update terbaru.
BHINNEKA Official Store Gadget penunjang bisnis Solusi beragam kebutuhan diskon 50% Stay Healty
Laptop murah 3 jutaan

Postingan Terbaru

Film Dragon Nest 2 Throne Of Elves HD

Film Kotonoha no niwa (The Garden Of Words) HD