Cara Gampang Membuat Tombol Back To Top di Blog

"Cara Gampang Membuat Tombol Back To top di Blog"

Yukizawa Blog Ini sudah pasang tombol Back To Top Di Blog ini sobat udah lihat kan kalau scrool ke bawah pasti ada icon panah atas, Nah Pada kesempatan Kali ini saya akan membagikan ilmunya ke sobat,

Ngomong-ngomong soal fungsinya nih ada banyak sob, contohnya tombol ini memudahkan user atau pengunjung blog ini mengembalikan ke atas halaman tanpa harus capek - capek scrool mouse.

Nah Langsung Aja Di praktekin Sob,

1. Sobat Harus Login Dulu Ke dasbor Blogger sobat.

2. Lalu Sobat Pilih Tata Letak

3. Lalu Sobat Mau Pilih Diletakan Di Bagian Mana, Kalau saran saya di bagian Sidebar.

4. Lalu Pilih Tambahkan Gadget

5. Pilih HTML Java Script 

6. Lalu Pastekan Kodenya dan Ganti Yang Berwarna Merah Dengan kode script icon

    atau Icon Back To Top nya Di Bawah ini, Tinggal Copas & Sruput... Aja.

Ini Nih Scriptnya:

<style>
.mbw-back-to-top {
    position: fixed;
    bottom: 2em;
    right: 10px;
    text-decoration: none;
    padding: 1em;
    display: none;
    cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="http://cesem.fcsh.unl.pt/wp-content/plugins/wpfront-scroll-top/images/icons/36.png" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.mbw-back-to-top').fadeIn(duration);
        } else { //www.mybloggersworld.com
            jQuery('.mbw-back-to-top').fadeOut(duration);
        }
    });
 
    jQuery('.mbw-back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

Pilihan Icon Gambar.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnBf2RTB3fdSDgfnZbjhL9WvrRTAgGSOle7OwwN67c5hGallPXlWmU6htZyxalVFKKADQ4-5KOuo48hDmVngGe-RRBzLElDV7vvkfkOin3FvnFlsrFyXThyJb9USnZLUkBG26ViZifk90/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEHA4F9_MlL8PwGfhg8tA2qVXGOmlZBKsZgYhXvweXgBx80ZYXe6hjaXMqPeqWQ1MKLEvk5vvr6-OnPOctsx1mmmXKWZpbGuOshsvg9XNniDGStYxym6zSirIJFMBewuqbcfxh2GpCuSA/s1600/back+to+top+button.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Oo2x_phB5p7b_ARUdwisGyauobkPTszYzK8KJ1RDnBRUU1_0HzrKpLhIioBBxWzYub1KI2D0k_kIw_yn19NPXBByNNX2GWAIc_P5T6OSuBOlepvRkX8UBEnrhi6Nr_ThhcQQt4WxUYU/s1600/back+to+top+button.png

 

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_TvtEscpw6FVbW8YYGYLQCTuOfYjqAzp7i_zTjnVM71QlFSOTDm60kC3Vk2Leg3IC1CavaI5VaQLq5gbWArCJC8jgyUJwdHN5U9EhCHRQtxLpQM0f-FV8PyEK3u95F0DEf55O9Bv_5cM/s1600/back_to_top_button.png

Note : kalau Mau Cari Gambar di google Ya Tinggal pilih dan copy link gambarnya.

 Sekian , Itu dia Cara membuat Dan memasang tombol Back to Top Di Blog, Untuk Kemudahan Pengunjung Blog Sobat, Dan Jika Ada Pertanyaan Masalah Atau Script Kodenya Tidak Berfungsi Harap Comment Di Kotak Bawah ini...

Baca Juga : Cara Membuat Blog Penghasil Dollar.

 

Tweet