Back To Top Blogger

Sebelumnya saya juga pernah membahas tentang cara membuat back to top dengan mudah tanpa harus mengedit HTML silahkan baca disini, yang selanjutnya adalah tombol back to top, bottom, home dan represh, Anda bisa baca disini. Tutorial kali ini juga membahas tentang back to top tapi bedanya sekarang dengan effect scrolling yang lembut, keren tentunya. Jika Anda tertarik untk membuatnya ikuti saja caranya berikut ini:

1. Masuk Dasbor Blogger > Template > Edit HTML.

2. Cari kode ]]></b:skin> (gunakan Ctrl+F jika Anda tidak tahu letaknya)

3. Copy kode berikut dan Paste sebelum/di atas kode ]]></b:skin>

    #bangiz{
    padding:5px;
    position:fixed;
    bottom: 5px;
    right: 5px;
    cursor:pointer;
    }

---> bottom: posisi tombol, Anda bisa menggantinya dengan top.
---> right: posisi tombol, Anda bisa menggantinya dengan left.
---> 5px: jarak tombol.

4. Selanjutnya cari </head> dan Paste kode berikut sebelum/di atas kode </head>.

    <!-- Back to top button by Izurch Bangiz -->
    &lt;script src='https://googledrive.com/host/0By-e_j-W4HZ1S0dwRTJLOHhyOE0'
    type='text/javascript'&gt;&lt;/script&gt;
    &lt;script language=&quot;javascript&quot;&gt;
    $(window).ready(function(){
    $('#bangiz').click(function(e){
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');
    });
    });
    &lt;/script&gt;
    <!-- Back to top button by Izurch Bangiz -->

5. Terakhir cari kode </body> dan Paste kode berikut sebelum/di atas kode </body>

<a href="#" id="bangiz"><img src="URL Gambar" alt="Back To Top" title="Back To Top" /></a>

Ganti yang berwarna merah dengan URL gambar yang Anda inginkan

6. Simpan Template dan lihat hasilnya