Cara Membuat Tombol Back to Top Melayang di Blog

Cara Membuat Back to Top (Tombol Navigasi) Melayang - Kali ini blogcahti akan membagikan tutorial membuat tombol navigasi back to top. Mungkin kamu sering melihat tombol navigasi ini ketika berkunjung ke sebuah website/blog. Tidak sedikit website/blog yang sudah menggunakan fungsi tombol navigasi ini. Seperti pada blog ini, kamu bisa lihat tombol navigasi tersebut yang sudah saya terapkan tepat di samping sidebar bawah pada blog ini. Cukup keren bukan? Saya rasa kalian sudah tahu fungsi dari tombol navigasi ini. Ya, fungsi dari tombol itu sendiri untuk memudahkan pengunjung kembali ke halaman atas blog.

Tentunya ini juga akan membuat blog kita menjadi lebih keren dan memberikan pengalaman yang bagus untuk pengunjung. Apalagi jika website/blog yang memiliki banyak komentar, jadi pengunjung tidak perlu susah payah scroll ke atas lagi, tinggal "klik" atau "touch" tombol satu kali saja langsung menuju halaman paling atas.

Cara Membuat Tombol Back to Top di Blogspot

Oke, langsung saja ikuti langkah-langkah berikut ini. Script ini cukup sederhana, menggunakan CSS dan JQuery. Oleh karena itu kamu harus memasang kode JQuery di template blog.

1. Pastikan di template kamu sudah terdapat kode JQuery seperti ini :

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Kamu bisa cek terlebih dahulu, caranya :

• Tekan CTRL + F untuk melakukan pencarian
• Cari kode tersebut diatas  </head>

Catatan : Ada banyak versi kode JQuery, saya menggunakan versi 2.x, jika sudah terpasang versi lain abaikan langkah ini. Tapi saya sarankan menggunakan versi 2.x .

Jika belum ada kode JQuery, lakukan langkah berikut :

• Masuk ke blogger, Tema > Edit HTML
• Salin kode JQuery diatas </head>
• Simpan 

2. Klik "Tata Letak" (Layout)
3. Klik "Tambahkan Gadget" di Sidebar
4. Pilih HTML/Javascript
5. Copy dan paste kode berikut :

<style>
.mbw-back-to-top {
    position: fixed;
    bottom: 8px;
    right: 10px;
    text-decoration: none;
    display: none;
    cursor:pointer;
    width: 40px;
}
</style>
<img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJLRMNrDcZV2ILoTewDgs6nyiF2zyVxMDwNzlk7k5cx4Tbug1iE4DUa7xnREwOIoDlnLRtndkMPIKT-sDtLZsKTKtZujrwldy3DwB1FS2G_ra7Ge87cGAveS8zCiK7tGHZEO3kzVdpMhU/s1600/Back-To-Top.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>

Catatan : Kode yang berwarna merah adalah gambar tombol navigasi back to top. Kamu bisa menggantinya dengan gambar yang lain.

6. Klik Simpan.

Kumpulan gambar-gambar tombol navigasi Back to Top

Kamu bisa coba menggunakan gambar-gambar tombol navigasi keren lainnya seperti berikut ini. Cara menggantinya cukup copy URL gambar berikut dan paste di bagian kode yang berwarna merah tadi.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_qnKQpDlwE20vj8-PoL_84ckA-8FrecE-umc2d0kxsd92PACtTVkYgh_ejfUS_e2Xk1L_hOrLJGv-T4K-_NG6TmBD7kTdvhtSXUruy26RATG_2deRapTvfYMtYB_qgeFoD0LVyhmfxTE/s1600/back+to+top.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX615QpJBv2sQPZA1g31t7Zdh3foLmW6LcZQ-9-MMJmaLUCuDB_PDZRejWr0skNLvsY9pimwkdKxTABmK0i3CXrFlnBdhF5iucbeUNr0BoSR58rssviIo21Fydp_L16JErVuI5k_ExPTE/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6WlN0UYYLDvIwtwjcgEc_PAMJXnuOATq30D1tRRl1af-FWeZByR82IjzwAdztBr7hVAvjd6_VW99LWqvs4oiuLiOMPbuaBKeWOLhNREVwtpYhOoI4-WanaySwyOwYnJs3CBfRlFfmFb0/s1600/back+to+top.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgBv8YolQwE4obJbqH4Iq3lDuPSicWACeLh9Bm1geOpMOiLsGy-zPYMUtPfUkdc7eSvMSsqV7Nd9jGl3LauZ_g1CemzOcZuK6_pK9QZ-0PwdRx7keK-fp9VA1YK0aamCwtS2PNSf3BLuQ/s1600/back+to+top+button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM0ekJ_eTEYGoQkW_dkYPpzPEbgSz9Sqr0YBPIH5HtNcIP259z1VlUJIoVq4145dcm3IjRnOianmT8PGEqsTl2NbXvpIAqY2lPHFQV-fBLP-EXY8Xp81MzClRdkQuDxC0OpV5zvYxI1y4/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgufZ-hzOyVrc1yhSyOptoTcdbJgTAs3fc3E3R4dKGQtl8K2m-P62t4qGFTK3gyzGlqSX2KrnF511fhD7PhK8S1CTVyZCvjNw3yNfbK7GxRKJgp4ny_FHO-KqZLMHgbra5ZZMAcqvAErnU/s1600/back+to+top+button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLwLmoeFLQO1C0qzPPi0bS-uz4bG810VbG6Wwi_5TWXy3j4_MJkfJEZdLSjbZ02IoAwH70FgBAaK9LEn3dTgvDUaahbucsymw_YXMkDWX1LpvLtm7_F8YsJ-ri52KukeVI2sU1Dsv9WCo/s1600/back+to+top.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYPjWVIHW8VzdJ3dogAGeq8l904qfWIx1uVjKk6UNkiQtroL45qmSq5SoLkdzvVW0lhklNjEpUCstuQAlQLTOBGoYD5BGWLwcVwzR5eYrUpN7OlKbOSeyiCCJkAtPoGWR99ExCHAdN-Lk/s1600/Back-To-Top.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlO5_jptFnBnL8zaYEbGjN4ro-_i-lrnKntudjkWnExAiT7WMH40vcCJETgmM7CoH_blVJMItw4vhwPzP_TCqwzKuFD97xpJxvxuoqE8vYCKblQ4BV9PVCyGWqgitcXzpREPHJSD3UJUY/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5nHguDU-ogjDhHSFXibjc8dJrYZnZ-TLkvfTXeCDM_5aatT4xkROIqhvUFrkgeGzVfK9TWcUEfd-e0IjG8-DkW_CiUhFFnr2Iec6Wwrn9lIpRqHjHxlkgWP8v_d1BUstQckOmqdpN3M/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheTk7qR9yGthuSlPzJ__RQqjCob-hRznaD6VL6d0or6qT2YN7wT2URy-a4LqihByGtbw9lS-aPRxhe8UM6kpvs3hkwfcmzPLzEb6tdrk0yNFGPei2pN1vAiZ_nN2FPvnsZBy9u_76bhIY/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJLRMNrDcZV2ILoTewDgs6nyiF2zyVxMDwNzlk7k5cx4Tbug1iE4DUa7xnREwOIoDlnLRtndkMPIKT-sDtLZsKTKtZujrwldy3DwB1FS2G_ra7Ge87cGAveS8zCiK7tGHZEO3kzVdpMhU/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3gujbQbcXzFG2QyLrivWjXB5fJiORvYmBIu8d4gc9KdhzOJGD7c2Izk09Ik2SEHwGLlRAXDeQoKCLA1zY1YsUDTrrScphIxlt_X03u6BMlEpP_16mlugtCOciytSxm1sdY97XvX2Cn0o/s1600/back_to_top_button.png

Sumber gambar : http://www.forumblogindo.com/2015/05/koleksi-gambar-tombol-back-to-top-button-blog-keren-user-friendly.html

Sekian tutorial tentang Cara Membuat Back to Top (Tombol Navigasi Kembali ke Atas) Melayang di Blog semoga bermanfaat.

Artikel Terkait

Cara Membuat Tombol Back to Top Melayang di Blog

4/ 5

Oleh Blogcahti