Cara Membuat Scroll Top

1. Buka blogger.com.
2. Setelah dashboard Blogger terbuka, pilih sub menu Tema dan klik Edit HTML.
3. Karena tombol scroll ke atas ini akan menggunakan Fonts Awesome, pastikan tema Blogger yang digunakan sudah menggunakan Fonts Awsome. Jika belum, tambahkan code di bawah ini tepat di atas code <b:skin><![CDATA[

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

4. Tombol scroll ke atas ini juga menggunakan JQuery, jadi pastikan tema yang digunakan sudah menggunakan JQuery. Jika belum menggunakan, tambahkan code di bawah ini tepat di bawah code ]]></b:skin>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>

5. Lalu copy style CSS di bawah ini tepat di atas syntax ]]></b:skin>

#back-to-top { 
height: 55px; 
width: 55px; 
position:fixed;
bottom:30px;
right:30px;
display:none;
background-color:#4dc247;
color:#EEE;
z-index:9999;
cursor:pointer;
opacity:0;
-webkit-transform:translateZ(0);
transition:all .4s;
border-radius:50%;
padding:15px;
font-size:25px}

#back-to-top:hover{
background-color:#333;
color:DADADA;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;}

6. Setelah itu copy tag HTML berikut ini di atas tag </body>.

<a href='#top' id='back-to-top' title='Back to Top'>
<i class='fa fa-angle-up'/>
</a>

<script type='text/javascript'>
$(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
            $('#back-to-top') .fadeOut();
        } else {
            $('#back-to-top') .fadeIn();
        }
    });
    $('#back-to-top').on('click', function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
        });
});
</script>

7. Setelah itu klik tombol Simpan Tema dan lihat hasilnya.

Posted by Andi Setiawan

Published on July 21, 2019

Edit This

Categorized in Blogger, Blogging, Blogspot, Fonts Awesome, JQuery, Scroll to Top