Cara Membuat Tombol Back To TOP di Blog yang Keren

Back to TOP atau dalam bahasa Indonesia sering kita sebut "Kembali ke Atas" adalah gadget yang berbentuk tombol yang jika di klik maka pembaca akan dibawa ke tampilan paling atas pada sebuah blog, sehingga pembaca tidak perlu menarik scroll di layar blog. Tombol ini berfungsi untuk menyingkat waktu bagi pembaca untuk kembali ke awal paragraf pada suatu artikel tertentu pada sebuah blog.

Pada artikel berikut ini, saya akan memberitahu bagaimana cara membuat tombol back to top pada blog. Berikut caranya:

Cara Memasang Tombol "Back to TOP"

1.  Login ke blogger.com
2.  Klik menu Template / Tema lalu klik edit HTML
3.  Pastikan di blog sobat sudah ada kode jquery, kodenya seperti ini

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

Atau:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Silahkan di cek terlebih dahulu, jika belum ada tidak usah kuatir lakukan langkah berikut ini:
1.  Masuk ke menu Template > Edit HTML
2.  Cari (CTRL + F) kode </head>
3.  Copy salah satu kode diatas lalu PASTE di atas kode </head>
4.  Klik "SAVE"

Jika sudah memasang kode JQUERY pada template HTML blog sobat, langkah selanjutnya adalah:

-  kembali ke menu template / tema
-  klik "Edit HTML"
-  cari kode </head>
-  copy dan paste kode dibawah ini diatas kode </head>

<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="KODE TOMBOL" />
<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>

Kode yang bergambar merah adalah gambar "Back to TOP" maka ganti kode warna merah tersebut dengan gambar yang sesuai menurut sobat blogger.

Contoh penempatan pada body template

Kotak warna biru : kode JQUERY dan kotak warna merah adalah script yang dipakai untuk menempatkan tombol "Back to TOP"

Kode tombol juga bisa di tempatkan di SIDEBAR caranya:
1.  Klik "Layout" (Tata Letak)
2.  Klik "Add Gadget" di sidebar
3.  Pilih Javascript/HTML
4.  Copy dan Paste kode script tombol di atas


Kode Gambar Back to TOP

Berikut ini adalah beberapa pilihan icon atau tombol "Back to TOP" dan kode URL-nya yang pasti bisa sobat pergunakan. Silahkan copy-paste kode URL tersebut dan sematkan di "kode tombol" tentunya kode tombol di hapus dan ganti dengan link URL ini ya.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoZH_Ssu6kHCL7DkFfegrx5f0w_BSO8silRCLGBW-Bpx1r3naH8SR9wLA_y59nSJMwiH3wlJUeytu91omicCZA0gMthxwBKxIb5Bwu10LzYP5CZgHMl3Zv1X65YBM0F4w4yA0gS16w7qjk/s1600/icon-backtop.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg28NyNmJCe_IFW73MyW-gQtcADe8yZRmWv-NWXnm3P_qKvF7U8UYbAQp4WIN0x1g7lJe7iFDEuMS-UDXwLNpTJciaYFNZzvfRYWfhyuNLQVj0sfCpcxsqKDzFFtwPC5TehDP2kXd_NllY/s1600/back+to+top.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfXFRPNCDVl0CA4b8ql_EHrGeoVrDob6VaNahyS7oiHLdREry0ojlnLTbmCkpHDsIi2fFbCMoYgU5VyB_XG98P1Vx4X-rg0rL1_cem9EAZs0PTLnQXLiBp2gBqqyiTkqqPrgkk2ie7w2s/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgnDKVMsPmV3T2-wZiLO9_vKhQig-owjnlNtMEyXWFkKUjsLn_4oPXiwLj21KsYZIRmL5QBE1jQ2rmqEqVwufcuY3ASpwhi7Y4pZtN8-02dfmA2FVxQOQ-spaWeQnt5q-aJhCnmPBFryg/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj90RenM-x34Wl9dbozgrpf_iVewvE3ALIBbU6ncGiSxN8QcwIOMaEbMyMEU4tzbFJWoEJljRRVg-Oc2gwB9uM1vuQrWZ-vrm6-SyBdwJcPf_xe6ewfQG1hpraj55joT4OPBQjMb6kXUzY/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidZAFjXOxu1FlPkLEHsPtSVAutuqZ2ijpQ3Ag3jTHMj7QfR6dU1Vi8PZPpxWjvX5RfYfMCIv6uU_D3znkj0B3rxycAqYe_H3ez8y51Osrvdh_5mdrZT5WNWsprEpfyI_e3vL7v6k__qzkZ/s1600/BTP+black.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhtWnOQRj6ojIOn_BgXeUj1jp0ygm3R7VYaFOeJJm0lLuE58TwqEqHFEZyqhmEzAooNkaf3qcN8QQbp8alNyFj3vR7gNwR8YrFTzMhMKd7Kr2ekI48GfJbvPOh7HrI7oSziVLPa_DQf4-o/s1600/BTT+2.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMn1GdECLb0b-4_Vy8GHhqFH7nDYuRf4Eku-nl64nFgHHyOENzgcDLLOq4pCJ0NtclGmsvh-Q6xF8NPd55OXEqbRX9bjeHRblMHQfnwsLGmNRnuKNClS8yYVUMdK7W7q70wPyGqvz_gklm/s1600/BTT+3.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR_j4tnC8u4s4CveliwR4wZqFgMIzq7S5vMrS4S9Cwi9RrBsniUg1aSuLGs08Zf80dV1lXSVHEFjNoba7G4har4t-JC5A-DVlkPuL21XytRDulovGXFXl_HR8g86xYgn4biAG-CW2O12Zn/s1600/BTT+4.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqROvIm4WgzEXOSoYEUQQ543qClaiLkovag1Cy3ahfJeUTQ2k8sEzRfw0c1IuHWhg7FtJOVNdtUzp3QlSUhdK4-g5gnN-bOnCgjAUKzn4kd-RAcdHMnbvth4eW5bB-vGBOZHstrlg4r4M/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibR6RaCAyAjjfb6qr2PXRl6q21DrHYoMj9267jiSFu7r-jm08WXBw-AH7IZpoUsU_5mumgPHmlGwELs_w5kMdKkTMsK9C4aYubwP1bEAXhi5qvM45AuoyevfZmgv70opusq18SRGQ8Rrqe/s1600/back-to-top-icon.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOZCRECPy54n1AkGie2mVVic3MvTpem-s4vmuyDXCeh7eFK53tNJ3EXMQluAXfooaanigHl3saUW-JGa-jokcYxDXf8XZwcLRys2i-6jmdi3tusmwhnhKmm3qdOPBU-us-zn6UznHDoXiR/s1600/backtotop.PNG

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsEBH3Zr7F3CAMrM3nuDYf5_qfzVDJe5vAgq3rehpwx7R7bfBIJ0k8_4LzkkLwW7BhjkzfXNTTPWJaE8-V0JdcJD80qB7F7pEhtKiQBDEl024cTjOArIHYUMdE1G2UbIMCGe5yQEjtcBf1/s1600/GreenButton_UpArrow.svg.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ICm_rAATRVRZ_vtFH4TcckddnMSTtALx5AW0Qmx8aQqSuzVMUZ7NeCN2QsfgRz9aGuddq4V5XIL9UPRtQ4wE8JxxxKpu2HBGFdzWx1G9GrmEGQHZ1lWTljQnbE_yFGbJqz1dDY_XQ_SU/s1600/up_arrow.gif.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7qjpDRpCApETabM1fk1icOkDNy6AqigPoor4Qg-9aNzNwOJIJemQdjetzIVsWkhwVgK_ouvURl5IpRm1kV1_SQtHaR1tMFZoXS5jhf3WyyabYu0IV5OX3tTg7gm9xpt61tsm3VFRP1jtt/s1600/Back+to+top.png

Inilah cara untuk membuat tombol "Back to TOP" pada blog sobat, semoga artikel ini bermanfaat. Selamat mencoba dan berkreasi.

Salam Blogger-Indonesia

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: